css----层叠样式表,用来设置网页元素中的样式
一、css运用
1.第一种方式:内联样式(行内样式)
(1)只能对一个标签使用
2、第二种方式:内部样式表
(1)将样式编写到head中的style中
3、第三种方式:外部样式表
1、将css编写到一个外部css文件中,通过link标签引入外部的css文件
4、基本语法
选择器 声明块
(1)选择器:选中页面指定元素
(2)声明块:由一个个声明组成; 是一个名值对结构; 名和值之间用冒号连接,末尾以分号结尾
二、选择器
1、元素选择器
(1)作用:根据标签名选择指定元素
(2)语法: 标签名{ }
(3)举例:p{ } h1{ } div{ }
2、id选择器
(1)作用:根据元素的id属性值选中一个元素
(2)语法:# id属性值{ }
(3)举例:#box{ } #red{ }
3、class选择器
(1)与id选择器用法相似(区别:id选择器不可重复使用,而class选择器可以重复使用)
(2)语法: .属性值{ }
(3)举例:.box{ }
4、通配选择器
(1)作用:选中页面所有元素
(2)语法:*
5、交集选择器
(1)作用:选择多个符合条件的元素
(2)语法:选择器1选择器2选择器n { }
(3)注意点:交集选择器里如果有元素选择器,必须元素选择器开头
6、并集选择器
(1)作用:同时选择多个选择器对应的元素
(2)语法:选择器1,选择器2,选择器n
7、子元素选择器
(1)作用:选中指定父元素的指定子元素
(2)语法:父元素>子元素
8、后代元素选择器
(1)作用:选中指定元素内的指定后代元素
(2)语法:祖先 后代
9、属性选择器
10、伪类选择器
(1)作用:用来描述一个元素的特殊状态
(2)语法:一般情况下使用冒号开头
10.1、超链接的伪类
(1):link----用来表示没访问的链接
(2):visited----用来表示访问过的链接
!!!此伪类只能修改链接的颜色
(3):hover----用来表示鼠标移入的状态
(4):active----用来表示鼠标点击
11、伪元素
(1)表示页面中一些特殊的并不真实的存在的元素
(2)伪元素用::开头
!!! 选择器的权重
- 内联样式 1 0 0 0
- id选择器 0 1 0 0
- 类和伪类选择器 0 0 1 0
- 元素选择器 0 0 0 1
- 通配选择器 0 0 0 0
- 继承的样式 没有优先级
(1)比较优先级时,需要将所有的选择器进行相加计算
(2)选择器的累加不会超过其最大的数量级
比如:类选择器在高也不会超过id选择器
(3)优先级计算相同,则优先使用靠后的样式
(4)在某一样式中加 !important,此时优先级取到最高,甚至超过内联样式
三、
1、像素px(长度单位)
(1)屏幕实际由一个个小点点构成
(2)不同屏幕大小的像素大小是不同的,像素越小的屏幕显示效果越清晰
2.百分比
(1)将属性值设置为相对于父元素属性的百分比
(2)设置百分比可以使子元素跟着父元素的改变而改变
3、em(长度单位)
(1)相对于元素的字体大小来计算
(2)1em=1font-size
(3)会根据字体的大小改变而改变
3.1、rem(长度单位)
(1)相对于根元素(html)的字体大小来计算
4、rgb值(r–红色 g–绿色 b–蓝色)
(1)通过三种颜色调配出不同颜色
(2)每一种颜色的范围在0~255(0%到100%)之间
(3)语法rgb(红,绿,蓝)
4.1、rgba值(a表示不透明度)
(1)比rgb多了一位
4.2、十六进制的rgb值
(1)颜色浓度通过00~ff
(2)语法:#红色绿色蓝色
(3)若颜色两位两位重复可以进行简写(#aabbcc->#abc)
未完待续…