CSS 学习总结

CSS 学习那些事

何为CSS

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。CSS 入门极其容易，但要完全掌握及合理的应用则比较困难。

CSS的语法和格式

CSS 规则集（rule-set）由选择器和声明块组成：

CSS 选择器
选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
实例

在此例中，所有<p>元素都将居中对齐，并带有红色文本颜色：
p {
color: red;
text-align: center;
}
例子解释

• p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。
• color 是属性，red 是属性值
• text-align 是属性，center 是属性值

组合选择器

除了上面的三种单独的选择器外，还可以将这些选择器进行组合，下面介绍这些组合选择器。
后代选择器
后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div>元素中:
实例
div p
{
background-color:yellow;
}

子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了

元素中所有直接子元素

：
实例

div>p
{
  background-color:yellow;
}

相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

实例

div+p
{
  background-color:yellow;
  }

后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有

元素之后的所有相邻兄弟元素 <p> :
实例

div~p
{
  background-color:yellow;
}

个人体会

感觉写一个网页就像实在做一件衣服，一针一线，每个细节都要照顾到位，才能写出令人愉悦的网页来，但是其中的东西太多了，想要直接硬性记住，几乎不太可能，所以只得多加应用，才能熟能生巧！