CSS层叠样式表的学习

CSS层叠样式表：Cascading Style Sheets 

背景介绍：

　　现代网页的设计原则是内容和样式分离，降低它们之间的直接相互依存关系，耦合度；同样的内容，可以通过不同的CSS样式表现出来。

功能：

　　CSS负责处理标记语言(HTML、XHTML)的显示效果。HTML主要是告诉搜索引擎的内容，CSS主要负责内容的样式风格。

 

CSS有三种保存方式：

方式一：放到HTML标签(Tag)的Style属性中

             例子：

                       

             缺点：每一次只能写在单一的标签里面,如果有很多元素，操作太复杂。在项目中，最不建议使用

方式二：放到HTML文件的头部中

             例子：

                       

             优点：可以将所有相同元素的内容一次性设置好，操作快速简单

方式三：放到独立的CSS文件中

             例子：

                       

                      优点：可以将设置内容样式的所有操作放在另一个文件中，使用时只需要链入即可，便于开发。在项目中，极力推崇使用这种方式。

CSS代码：（新建的独立的CSS文件中）demo.css

CSS选择器：

                     作用：指明CSS“样式”作用的对象

                     使用范围：三种保存方式都可以

常见的五种选择器：

                      ① 标签选择器

                                                 写法： HTML标签名{}

                                                 作用：选中页面中所有与选择器同名的HTML标签。

                      ②类选择器（class选择器）

                                                 写法： .类名{}

                                                 调用： 在需要应用这套样式的标签上，使用class="class名"调用选择器。

                      ③ID选择器：

                                                 写法： #ID名{}

                                                 调用： 在需要应用这套样式的标签上，使用id="ID名"调用选择器。

                      ④行内选择器：

                                                  写法：通过style将样式直接写在标签里面

                                                  例如：<p style=”color: red;font-size: 32px;”>啊啊啊啊</p> 

                      ⑤通用选择器

                                                  写法： *{}

                                                  作用： 作用于页面中所有的HTML标签；

 

优先级：

行内样式（最高级）>id选择器>类选择器>标签选择器>通用选择器(最低)