一、CSS简介
1.什么是CSS
CSS全称为Cascading Style Sheet（层叠样式表），是一种不需要编译的标记性语言，用于增强控制网页样式并允许将样式信息与网页内容分离。可以使用如何一种文本编辑器对其进行编辑。
2.CSS的作用
a.修饰页面文本、图片等元素，避免使用不必要的HTML元素。
b.更有效地控制页面结构、页面布局（DIV+CSS）。
c.提高开发和维护效率。
3.CSS的基本结构
selector {property:value;}
例如：p {color:#ff0000;}
选择符（selector）：告诉浏览器，这个样式将用于匹配页面中的哪些对象，包括HTML标签，class，id或者组合使用的选择符。 声明：由property和value组成，主要是告诉浏览器怎么去渲染（修饰）页面中与选择符相匹配的对象。 属性（property）：主要以一个单词的形式出现，并且都是CSS约定的而非自定义的（除个别浏览器私有属性）。 属性值（value）：包括数值和单位，以及一些关键字。其会根据属性而改变形式， 属性名过长其带有空格时，一定要将属性值用引号包含，如p {font-family:"sans serif";}二、CSS选择符
1.通配选择符
所谓通配选择符，其实只有一个星号（*）而已，通配选择符一般用来对页面所有元素应用样式。例如：
1 * {2 margin:0;3 padding:0;4 color:#ff0000; 5 }/*将页面中所有元素的内外边距都设为0，字的颜色设置为红色*/ 2.类型选择符
以HTML元素类型作为选择符。例如：
1 p {2 font-size:14px;3 text-decoration:underline;4 color:#ff0000; 5 } 3.类选择符
类（class）在编程语言中经常使用，实现代码的复用和封装。在页面中，可以将一段CSS代码定义成一个类，并为其取名，这样也能实现CSS在页面中的复用，减少样式的定义。例如一个名为myContent的css类如下所示。（ 注意，css的类定义时要以.开头 ）
css-test .myContent{ font-size: 25px; line-height: 5px; text-decoration:underline; font-weight:bold; color: #f00;; } Hello
css很强大， 可以控制页面 任何元素 的样式 dfd
1与世界同步，做一个成功的页面仔
2让我们看看css多么奇妙吧
运行效果如下图所示：
4.ID选择符
ID选择符与类选择符很像，但是它是 以#为前缀 的。例如id为myId的选择符：
1 2 3 4 5 css-test 6 7 #myId{ 8 font-size: 25px; 9 line-height: 5px;10 text-decoration:underline;11 font-weight:bold;12 color: #f00;;13 }14 15 16 17 Hello
18 css很强大， 可以控制页面 任何元素 的样式 dfd
19 1与世界同步，做一个成功的页面仔
20 2让我们看看css多么奇妙吧
21 22 运行效果图如下：
5.包含选择符
包含选择符也成为后代选择符，作用于某个元素 所有的后代 （子，孙，重孙...），例如改变p标签内的所有strong标签样式 p strong，两个选择符之前用空格隔开。
1 2 3 4 5 css-test 6 7 p strong { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 13 14 15 Hello
16 css很强大， 可以控制页面 任何元素 的样式 dfd
17 1与世界同步，做一个成功的页面仔
18 2让我们看看css多么奇妙吧
19 20 运行结果如下图所示，可以看出，p标签内的两个strong标签中的内容样式都发生了改变：
6.子选择符
子选择符的主要作用是定义某个元素 子元素 的样式（两个选择符之前用>连接），而无法定义子元素以外的对象（如孙，重孙都不可以），这是与包含选择符不同的地方。将5中的例子进行修改p strong变为p > strong，表示选择p内的strong子元素。
1 2 3 4 5 css-test 6 7 p > strong { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 13 14 15 Hello
16 css很强大， 可以控制页面 任何元素 的样式 dfd
17 1与世界同步，做一个成功的页面仔
18 2让我们看看css多么奇妙吧
19 20 运行结果如下图所示：
这时只有 dfd 是p的子元素，而 任何元素 是p的孙元素，所以只有前者的样式发生了改变。
7.相邻选择符
a. 相邻选择符的表示形式与子选择符类似，只是将>换成了+，主要匹配同一父级元素下某个元素之后的元素。如定义与p相邻的strong元素 p + strong。
1 2 3 4 5 css-test 6 7 p + strong { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 13 14 Hello
15 css很强大， 可以控制页面 任何元素 的样式 dfd
16 1与世界同步，做一个成功的页面仔
17 2让我们看看css多么奇妙吧
18 3千万不要因为这一点内容就满足了 19 20 运行结果如下
如上图所示，p标签内的strong元素的样式并没有改变，只是与p相邻的 3千万不要因为这一点内容就满足了 样式发生了改变。
b. 如果将上述代码中的p + strong 改为 p + strong + strong，且增加strong便签，例如：
1 2 3 4 5 css-test 6 7 p + strong + strong { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 13 14 15 Hello
16 css很强大， 可以控制页面 任何元素 的样式 dfd
17 1与世界同步，做一个成功的页面仔
18 2让我们看看css多么奇妙吧
19 3千万不要因为这一点内容就满足了 20 4千万不要因为这一点内容就满足了 21 5千万不要因为这一点内容就满足了 22 6千万不要因为这一点内容就满足了 23 24 则运行结果如下图所示
c. 如果将b中的p + strong + strong 换成 strong + strong，则运行结果如下所示。
8.兄弟选择符（css3引入）
E~F {property:value }，选择E元素后面的所有兄弟元素F。例如选择p后面的所有兄弟元素p
1 2 3 4 5 css-test 6 7 p ~ p { 8 color: #f00; 9 font-size: 18px;10 text-decoration: underline;11 }12 13 14 15 Hello
16 css很强大， 可以控制页面 任何元素 的样式 dfd
17 1与世界同步，做一个成功的页面仔
18 2让我们看看css多么奇妙吧
19 3千万不要因为这一点内容就满足了 20 4千万不要因为这一点内容就满足了 21 22
css x
23
查看更多关于CSS那些事儿-阅读随笔1（CSS简介与选择符）_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110718