这是绝对的初学者。了解了框模型的工作原理以及如何浮动这些框之后，就该认真考虑CSS了。为此，我们汇总了许多技巧，窍门，技巧以及偶尔的肮脏技巧，以帮助您构建所需的设计。
CSS可能会很棘手，您也应该这样做。现在，您几乎不需要知道什么（几乎）就可以了：
1.绝对定位
如果您想始终控制某个元素在我们网站上的位置，则绝对定位是实现此目标的关键。如果您将浏览器视为一个大边界框，则绝对定位使您可以精确控制元素将在该边界中保留的位置。使用顶部，右侧，底部和左侧以及像素值来控制元素的位置。
position:absolute; top:20px; right:20px上面的CSS将元素的位置设置为与浏览器的顶部和右侧边缘保持20px的距离。您也可以在div中使用绝对定位。
2. * +选择器
在*可让您选择一个特定选择的所有元素。例如，如果您使用* p然后添加CSS样式，它将使用<p>标记对文档中的所有元素进行处理。这样就可以轻松地将网站的各个部分作为全球目标。
3.覆盖所有样式
应该谨慎使用，因为如果您对所有操作都这样做，从长远来看，您将发现自己遇到了麻烦。但是，如果要为特定元素覆盖其他CSS样式，请在CSS中的样式之后使用！important。例如，如果我希望网站的特定部分中的H2标头为红色而不是蓝色，则可以使用以下CSS：
.section h2 { color:red !important; }
4.居中
居中很棘手，因为它取决于您要居中的内容。让我们看一下基于内容的要居中项的CSS。
文本
使用text-align：center;将文本居中 。如果您希望它在任一侧，请使用向左或向右而不是中心。
内容
甲DIV（或任何其它元件）可以通过将嵌段性给它，然后使用自动边缘居中。CSS看起来像这样：
#div1 { display: block; margin: auto; width: anything under 100% }我将“任何低于100％的宽度”放置为宽度的原因是，如果宽度为100％，则为全角宽度并且不需要居中。最好具有固定的宽度，例如60％或550px等。
5.垂直对齐（一行文本）
您将在CSS导航菜单中使用它，我几乎可以保证。关键是使菜单的高度和文本的行高相同。当我回头为客户编辑现有网站时，我会看到很多技巧。这是一个例子：
.nav li{ line-height:50px; height:50px; }
6.悬停效果
这用于按钮，文本链接，站点的Bock部分，图标等。如果您想在有人将鼠标悬停在其上时更改某些颜色，请使用相同的CSS，但在其中添加：hover并更改样式。这是一个例子：
.entry h2{ font-size:36px; color:#000; font-weight:800; } .entry h2:hover{ color:#f00; }它的作用是当有人将鼠标悬停在h2标签上时，它会将h2标签的颜色从黑色更改为红色。使用：hover的好处是，如果字体大小或粗细没有变化，则不必再次声明它。它只会更改您指定的内容。
过渡
对于悬停效果，例如菜单或网站上的图像，您不希望颜色过快地捕捉到最终结果。理想情况下，您希望逐渐缓解更改，这是过渡属性起作用的地方。
.entry h2:hover{ color:#f00; transition: all 0.3s ease; }这使更改发生在0.3秒内，而不是立即变为红色。这使悬停效果更令人愉悦，震颤更少。
7.链接状态
这些样式被许多设计师所遗漏，并且确实引起了访问者的可用性问题。的：链接伪类控制还没有被点击但所有链接。的：参观伪类处理所有你访问过的链接的样式。这会告诉网站访问者他们已经在您网站上的位置以及他们尚未探索的位置。
a:link { color: blue; } a:visited { color: purple; }
8.轻松调整图像大小以适合
有时，您会遇到需要按比例缩放图像的情况，以适应一定的宽度。一种简单的方法是使用最大宽度进行处理。这是一个例子：
img { max-width:100%; height:auto; }这意味着图像最大可能为100％，并且根据图像宽度自动计算高度。在某些情况下，您可能还必须将宽度指定为100％。
9.控制部分的元素
使用上面的图像示例，如果您只想定位某个部分（例如您的博客）的图像，请为博客部分使用一个类，然后将其与实际选择器组合。这样，您就只能选择博客部分的图像，而不能选择其他图像（例如徽标或社交meia图标）或站点的其他任何部分（如侧边栏）中的图像。CSS的外观如下：
.blog img{ max-width:100%; height:auto; }
10.直系子女
我希望我刚开始使用CSS时就知道这一点。这样可以节省我很多时间！使用>选择元素的直接子代。例如：
#footer > a这将选择和设置位于页脚ID下的所有活动链接元素的样式。它不会选择活动元素之外的任何内容，也不会选择页脚中包含的其他任何内容，例如纯文本。这也适用于顶级导航元素。
特定的子元素
相信我，这在您设置列表样式时非常方便。您只需要计算要样式化的元素下的多少项，然后应用该样式即可。
li:nth-child(2) { font-weight:800; color: blue; text-style:underline; }上面的CSS以列表中的第二个项目为目标，并使其变为粗体，带下划线的蓝色。在括号中的数字后面添加“ n”，您可以定位每个第二个列表项。想象一下，能够以表格样式的布局为每行设置样式以便于阅读。CSS将是：
li:nth-child(2)
11.将CSS应用于多个类或选择器
假设您要在所有图像，博客部分和侧边栏周围添加相同的边框。您不必写相同的完全相同的CSS 3次。只需列出这些项目，并用逗号分隔即可。这是一个例子：
.blog, img, .sidebar { border: 1px solid #000; }无论您是多年的网页设计师，还是刚刚起步的人，学习如何以正确的方式构建网站似乎是一段艰难，永无止境的旅程。一旦确定了要学习的语言，就必须学习和提高技能。
无论您学习什么，CSS都是必备的技巧之一，但您必须掌握这些技巧。不过，它不必那么困难，特别是如果您知道一些方便且鲜为人知的CSS技术来完成这项工作。
12. box-sizing：边框框；
这是许多Web设计人员的最爱，因为它解决了填充和布局问题。基本上，当您将框设置为特定宽度并向其中添加填充时，填充会增加框的大小。但是，使用box-sizing：border-box; ，这被否定，并且框保持原本应有的大小。
13.：之前
此CSS是一个选择器，使您可以选择CSS元素，并在应用了特定类的每个元素之前插入内容。假设您有一个网站，每个H2标签前都需要特定的文本。您需要我们进行以下设置：
h2:before { content: "Read: "; <span class="Apple-converted-space"> color: #F00;</span> }这非常方便，尤其是在使用图标字体的情况下。您可以将图标放在某些元素之前，然后将其全局应用。
14 .：之后
与：before选择器一样，您可以使用：after在特定元素上全局插入内容。实际用途是在博客的每个摘录之后添加“更多内容”。这是您要执行的操作。
p:after{ content: " -Read more… "; color:#f00; }
15.内容
content是一个CSS属性，在您需要插入要控制的元素时会派上用场。我见过的最常见的用法是在特定位置从图标字体插入图标。在上面的示例中，您可以看到必须将要插入的文本用引号引起来。
16. CSS重置
不同的浏览器具有默认的CSS设置，因此必须重置这些设置，这样您才能获得均匀，一致的竞争环境。可以将其想象成是盖房，无论您是建在山坡上，沙滩上还是林木之中，您都希望该地基平整。
这种CSS重置方法为所有网站设置了标准基础，从而使它们在CSS起点方面保持一致。它删除了不需要的边框，预设边距，填充，线条高度，列表中的样式等。EricMeyer创建了一个效果很好的边框。
17.首字下沉
每个人都喜欢戴帽。它使我们想起了传统的印刷书，并且是开始内容页面的一种好方法。也就是说1 日，大信真正抓住你的注意力。有一种简单的方法可以在CSS中创建首字下沉，这是通过使用伪元素：：first来实现的。这是一个例子：
p:first-letter{ display:block; float:left; margin:3px; color:#f00; font-size:300%; }这将字母设置为其他字母大小的3倍。它将字母周围的空间设置为3px以防止重叠，并将字母的颜色设置为红色。
18.强制文本全部大写，全部小写或大写
在所有大写字母中输入整个部分是荒谬的。想象一下，当网站格式更改或更新时，必须稍后再进行修复。相反，请使用以下css样式将文本强制为某种格式。此CSS以h2 title标签为目标。
- h2 {text-transform：大写；} –全部大写
- h2 {text-transform：小写；} –全部小写
- h2 {text-transform：大写；} –大写每个单词的第一个字母。
19.垂直屏幕高度
有时，无论屏幕大小是多少，您都希望一个部分充满整个屏幕。您可以使用vh或查看高度来控制它。它之前的数字是百分比，因此，如果您希望它填充浏览器的100％，则可以将其设置为100。您可以将其设置为类似85％的值以容纳固定的导航菜单。
杭州网站建设创建一个类，并应用所需的vh量。您可能需要调整的一件事是针对特定屏幕或屏幕方向的媒体查询值，例如纵向模式下的手机。想象一下拉伸风景图像以适合人像模式。那看起来并不好。
