前端开发者需要了解的10个重要的CSS技能

对于刚入门的前端开发者来说，在设计和修改网站前端时，我们需要编写一些CSS和JS内容来实现界面效果。今天我要分享前端开发的10个CSS必备技能。这是我在为很多客户创建网站的过程中总结出来的。

1。绝对定位

大多数情况下，如果你想确定某个元素在网站上的固定位置，绝对定位就是这种方法的解决方案。在网页中，绝对定位可以精确控制网页中元素的位置。我们可以使用上、下、左、右，并插入像素值来控制元素的位置。上面的

position:absolute;top:50px;right:50px

CSS 设置元素的位置，使其与浏览器的顶部和右侧保持 50px 的距离。您还可以在 div 内使用绝对定位。

2。替换所有样式

在编写CSS时你需要知道你想要为某个元素添加新的CSS样式，但这个样式之前已经定义过了。这时候我们就可以使用它了！important对此下了定义。

例如，如果我希望网站某个部分的 H3 标题为红色而不是黄色，我可以使用以下 CSS：

.section h3 {color:red !important; }

3。中心

中心的情况很多，一般分为文本中心和DIV内容中心。

文本居中
对于居中文本，请使用text-align: center;。如果您希望文本位于左侧或右侧，则可以使用 left 或 right。

内容 DIV
内容中心 DIV 与文本中心不同。 CSS 可以这样定义：

#div1 { display: block;边框：自动； width：低于100%的任何东西}

之所以将width设置为“低于100%”是因为如果是100%宽度，那么如果是全宽度，不需要居中。如果宽度是固定的，例如 60% 或 550 像素等，那就更好了。

4。垂直对齐（针对文本行）

要使菜单高度与文本行高度一致，可以这样设置：

.nav li{line-height:50px;高度：50px；}

5。悬停效果

这适用于按钮、文本链接、网站部分、图标等。如果你想创建悬停效果，可以尝试：

.entri h2{font-size:36px;颜色：#000； font-weight: 800;} .h2 条目：hover{color: #ffeb3b;}

此功能可以将 h2 标签的颜色从黑色更改为黄色。

6。悬停效果过渡

对于悬停效果，比如使用菜单或者网站上的图片，我们肯定不希望颜色很快接近结果，所以我们可以通过时间变化来实现过渡效果。

.entry h2:hover{颜色:#ffeb3b;过渡：全部0.5秒缓和；}

这在风格上做了改变，从黑色到黄色的过渡时间可以是0.5秒，而不是直接变成黄色。这使得悬停效果更加和谐且不那么突兀。

7。标签状态

当我们遇到标签时，我们需要为该标签定义一个样式，否则很容易给使用它的用户造成混乱。这些样式可以让用户知道链接已被点击，更有利于用户体验。

a：链接{颜色：蓝色； } a: 打开 { 颜色: 红色; }

8。轻松调整图像大小以适应

说到这种风格，我不知道可以通过以下方式实现图像自适应效果。作为一个新手，相信很多人都想做出这样的效果。当然，我提供的方法只有一种：

img {max-width: 100%;height: auto;}

这种风格表示最大的图片可以是100%，高度是根据图像宽度。在某些情况下，您还应该将宽度设置为 100%。

9。父元素和子元素

如果不想选择子元素，但想限制范围，只选择特定元素的子元素，请使用子元素选择器：

h1 gt Strong { color: red;}

特殊情况下，你可能想指定第N个子元素的样式，那么可以使用如下样式：

li:nth-child(n)

具体可以去w3school 看看如何使用它。

10。将 CSS 应用于多个类或选择器

如果您想为所有图像、博客部分和侧边栏添加相同的边框。您不应该将相同的 CSS 样式编写 3 次。只需列出项目，以逗号分隔：

.blog,img,.sidebar {border: 1pxsolid #000;}

10 这是一项相对重要的 css 技能，为客户构建网站时经常发生。过程。