前端基础学习笔记(css)1.2

一、css简介及特点

Css——Cascading Style Sheets（层叠样式表）

作用：用来设置html元素如何在网页中显示

特点：很好的实现了结构与表现相分离

二、css语法

css是由选择器和声明两大部分组成，声明又是由属性和属性值组成。即：

选择器{属性:属性值;}

eg:   h1{
             color:red;
             font-size:12px;
        }

三、三种样式表的创建

1.内联样式（行间或行内样式）

语法：<标记 style=“属性:属性值;”></标记>

eg: <h1 style="color:red;">内联样式</h1>

2.内部样式（嵌入式样式）

语法：<style>...</style>

eg:   <h1>内部样式</h1>
        <style type="text/css">
        h1{
			color:red;
        }
        </style>

注：建议将style标记放在head部分

3.外部样式表

语法： 首先创建一个后缀名为.css的外部文件，然后在html文件的head部分使用link引入，语法如下：

  ` <link rel="stylesheet"  href="1.css">`

注：rel用来设置引入文件和当前文件之间的关系

四、样式表的优先级

当在同一个html文件中存在多种样式表时，会存在优先级问题。

我们一般采取就近原则，即离被设置的元素越近，优先级越高

一般情况下： 内联>内部>外部

当属性值上出现!important关键词时，那么它的优先级最高，即

!important>内联>内部>外部

五、html注释和css注释

1.html注释

语法：<!--注释内容-->

2.css注释

语法：/*css注释*/

注：快捷键： 添加或删除注释 ctrl+/

六、css选择器

1.id选择器

语法：<标记 id="id名"></标记>

eg: <h1 id="tit">id选择器</h1>

样式： #tit{color:red;}

注：
a) id名命名要语义化，不能为数字，汉字或者关键词。
b) 常用命名方法： 驼峰命名法（xxCssTit）、下划线连接命名法（xx_Css_tit）
c) id名是唯一的，不能出现同名的id

2.class选择器（类选择器）

语法：<标记 class="类名"></标记>

eg: <h1 class="qfEdu">class选择器</h1>

样式： .qfEdu{color:red;}

注：我们可以给具有相同样式的元素添加相同的class名

3.标签选择器（元素选择符）

语法：标记名称{属性:属性值;}

eg: a{color:orange;} 匹配body下所有a这种类型的元素

4.后代选择器（包含选择器）

语法：选择符1 选择符2{属性:属性值;}

eg: ul li{color:red;}

注：选择符1和选择符2必须是包含与被包含的关系才能使用后代选择器

5.群组选择器

语法：选择符1,选择符2,选择符3,选择符4{属性:属性值;}

eg: h1,h2,h3,h4,h5,h6{font-weight:100;}

注：我们可以给不同类型的具有相同样式的元素使用群组选择器

6.伪类选择器
语法：选择器:hover{属性:属性值;}

eg: a{color:black; text-decoration:none;} 默认状态下字体黑色，去掉下划线
a:hover{color:blue; text-decoration:underline;} 滑过时，字体为蓝色，添加下划线

扩展：
超链接的四个状态

I. a:link 链接没有被访问过时的状态（初始状态）

II. a:visited 链接访问过后的状态

III. a:hover 鼠标滑过(悬停)时的状态

IV. a:active 鼠标按下时的状态

7.通用选择器（通配符）

语法：*{属性:属性值;}

eg: *{margin:0; padding:0;}

注：*匹配所有的html标签元素

七、选择器权重问题

描述：当有两个选择器同时匹配到同一个元素时，并且给这个元素设置了相同的css属性，那么就会发生冲突，我们会优先使用权重较高的选择器的样式。

我们把选择器的权重分为以下四个等级：

1. 内联样式 <h1 style="color:red;"></h1> 权重：1000

2. id选择器 权重：100

3. class选择器，伪类选择器，属性选择器 权重：10

4. 标签选择器，伪元素 权重：1

注：
后代选择器权重：所有选择器权重之和
群组选择器权重：每个选择器自身的权重
权重相同时，后写的会覆盖先写的

★css层叠的含义

层叠指的是样式的优先级，当产生冲突时以优先级高的为准

1. 内联样式>内部样式>外部样式（除非使用!important标记 ）

2. id选择器>class选择器>标签选择器

3. 权重相同时取后面定义的样式