css层叠样式

CSS:

四大核心：

一、选择器

二、盒子模型（实现网页布局）

三、浮动四

四、定位

了解css：

概念:层叠样式表（级联样式表）（Cascading Style s heet）

作用：美化网页（通过css的方式给HTML标签设置样式）

css语法：

选择器 {

        属性： 值;

       属性 ： 值；

}

什么是选择器? 用来选中标签

属性：给标签设置样式

常见css属性：

1.color：表示文字颜色（前景色）

2.background —color：背景色

3.width：宽 height：高

4.font—size：改变文字大小

5.text—align：left|center|right

5.text-indent: 2em;（1em代表一个汉子大小）

6.cursor:pointer;设置鼠标样式为小手;

css书写位置（确定要将css写到哪）：

1.内嵌式写法（推荐在学习阶段使用）

（1）新建HTML页面

（2）在HTML页面中，在head标签中加入style标签

2.外联式写法（工作中常用的写法）

将css代码单独放到文件中去写

（1）新建css文件，文件后缀名是.css，在该文件中直接写css代码

（2）在HTML页面中，通过link标签将css文件引入即可（在head中）

例如：

3.行内式写法（使用的情况比较少）

将css代码直接写到标签内部，直接通过style加上属性

例如：

选择器（重点）

一、基础选择器

标签选择器（会将网页中所有的同种类型标签选中，和标签结构无关）

            语法：

		HTML标签名{

			属性：值；

					}

类选择器

            语法：

1.定义类型

.自定义类型名 {

            属性：值;

                    }

2.调用类型（定义类名不能以数字和特殊符号开头、不能用汉子定义类名）

标签class类名与定义类名相同并调用

特点：

1.一个类样式可以被多个标签同时使用

2.一个标签可以用多个类样式

文字

ID选择器（了解）：#ID{

属性：值；

}

ID与类选择器的区别：一个标签只能调用一个ID样式（ID具有唯一性）

统配符选择器（将页面中所有的标签选中）：*

其他部分：

单位：px（像素） | em（相对单位）|百分比

颜色的表示方式：

1.使用系统与定义表示法

2.可以使用十六进制表示一个颜色（以#开始 0-9和 a-f ）

3.通过rgb表示一个颜色

r————红色 0-255

g————绿色 0-255

b————蓝色 0-255

4.实现颜色半透明效果

opacity: 1;/0-1之间/

设置rgba（）实现半透明效果啊a的取值0-1之间

其他属性扩展：

设置文字加粗：font-weight：normal 或（400）|bold 或（700）【前面是加粗后面不加粗（100—900）】

设置文字斜体：font-style: italic;（normal不斜体）

字体设置方式：

1.直接写字体名称 ：font-family: “宋体”

2.设置字体对应的单词：font-family: “simsun”

3.可以通过Unicode编码表示字体

总结：

font-family可以一次设置多个字体（以最常见的字体开头和结尾）使用逗号隔开

文字行高（设置文字上下之间距离）：

line-height：30px；

font属性合写方式：

font: 700 italic 20px/50px;

注意：

1.font合写必须设置font-size和font-family

2.font-size应在font-family之前

3.斜杠后面是行高 斜杠之前是文字大小

二、复合选择器（将基础选择器一起使用）

后代选择器(重点)

注意：

1.后代选择器只能用在嵌套结构中

2.后代选择器中，选择器之间必须用空格隔开

3.后代选择器只能选择子元素（包括直接和间接子元素）不能选中父元素

语法：

   选择器 选择器 {

           属性：值;

}

子代选择器

注意：

1.子代选择器只能用在嵌套结构中

2.选择器之间用>号连接

3.只能选中直接子元素

语法：{

选择器>选择器 {

属性：值；}

}

标签指定式选择器（交集选择器）

语法：

选择器选择器{

}

注意：

选择器必须满足既…又…关系

并集选择器

语法：

选择器，选择器，选择器{

属性：值；

}

注意：

一般情况下并集选择器会代替通配符选择器

去掉a标签下划线样式:text-decoration: none;