CSS 学习（上）

2网页的血肉：CSS

HTML 决定了网页中包含哪些内容，而CSS 则决定了这些内容呈现的样式

CSS  为层叠样式表

 

2.1 基本结构

CSS 语法的基本结构由两部分组成：选择器（selector），样式（style）。选择器指定了CSS作用的目标DOM元素，样式决定了在目标元素上应用何种样式，包括样式名（property）和样式值（value）。

例：

h2

{

        color:blue

}

2.2使用CSS

使用css 的方法有3种：

1引入外部CSS文件

Head中加入

引用外部 out.css 文件

2在HTML中定义CSS

在head 和body中加入

 优先级比引入外部CSS文件高

3在DOM元素中使用内嵌CSS

我是二号标题

优先级比 在HTML中定义CSS 优先级还要高

2.3常用选择器

元素名

        h2

                {

                         color:red

                }

Id

#main

                {

                  color:red

                }

Class

Class作为选择器，适用于同时控制多个元素的样式，只需将它们设为同一个class即可，

.context

                {

                         color:gray

                }

 

如果某个元素符合多个选择器，则会对CSS样式进行合并覆盖操作，不同的属性名进行合并，其对应的属性值叠加作用于元素之上，相同的属性名进行覆盖，仅应用优先级最高的选择器对应的属性值。标签名，class ，id 选择器优先级依次提高，并且它们组合之后的选择器优先级更高。总而言之，选择器越具体越细化，条件越严格，对应的优先级越高。

 

标签名，id，class 可以组合使用，例如：h1#main表示id为main的h1标签，p.content表示class为content的p标签。

后代选择器

例 h1 span为后代选择器，表示h1标签中的span标签，样式作用于所有符号要求的span （h1 里面的所有span）所以孙子span 和儿子span 均变为绿色

       

       

               

                         孙子span

               

                儿子span

       

 

子元素选择器

例 h1>span为子元素选择器，表示h1标签直接子元素中的span标签，h1必须是span的直接父元素，所以此处只有儿子span变成绿色

       

       

               

                         孙子span

               

                儿子span

       

相邻兄弟选择器

.test+h1为相邻兄弟选择器，表示和h1标签处于同一层级并且直接相邻的类为test标签，样式作用于所有符合要求的h1，至多一前一后共两个。此处老二字体变绿

       

       

                老大

               

老二

               

老三

                儿子span

普通相同兄弟选择器

.test~h1 为普通相同兄弟选择器，表明和.test类 对应的h1标签处于同一层级的全部h1标签，两者处于同一级别即可，限制不及相邻兄弟选择器严格，此处除 test类对应的h1标签字体未变绿外，其他同级的h1标签字体全变绿了

       

       

       

                老大

               

老二

               

老三

                儿子span

伪类选择器

例：”:hover” 表示鼠标悬浮时才生效的样式，此处鼠标停留在 老大 ，老二 ，老三字体上字体就会变绿，离开字体恢复正常。

       

       

       

               

老二

                老大

               

老二

               

老三

                儿子span