HTML是网页内容的载体CSS样式是表现(外观控制)JavaScript是行为,用来实现网页特效效果
CSS 层叠样式表 (Cascading Style Sheets)用于定义HTML内容在浏览器内的显示样式
CSS简化HTML相关标签,网页体积小,下载快解决内容与表现分离的问题更好的维护网页,提高工作效率
CSS规则由两部分构成:选择器,声明
写在标签内:
html注释:CSS注释:/注释语句/
行内样式(内联样式)内部样式表(嵌入样式)外部样式表(Link链入)导入式
在开始标签内添加style样式属性
内部样式(嵌入样式),把css样式代码写在:
说明: style要放在head标签之间
外部样式表,把CSS样式代码写在独立的一个文件中扩展名: CSS文件名。CSS引入外部文件:
说明: link要放在head标签之间
@import “外部CSS样式”说明:@import写在style标签内最开始
类别引入方法位置加载行内样式开始标签内stylehtml文件内同时内部样式head中style内html文件内同时外部样式head中link引用css样式文件与html文件分离页面加载时,同时加 载CSS样式导入式 @import在样式代码最开始处css样式文件与html文件分离在读取完html文件之 后加载
标签选择器类选择器ID选择器全局选择器群组选择器后代选择器
为HTML标签添加class属性:
通过类选择器来为具有此class属性的元素设置CSS样式:
可对不同类型元素的同一个名称的类选择器设置不同的样式规则:
同一个元素可以设置多个类,之间有空格隔开
以HTML标签作为选择器:
为HTML标签添加ID属性:
通过ID选择器来为具有此ID的元素设置CSS规则:
所有标签设置样式:
集体统一设置样式:
使用后代选择器设置,之间用空格隔开:
后代选择器可以多层
链接的4中状态:激活状态,已访问状态,未访问状态, 和鼠标悬停状态。
伪类说明link未访问的链接visited已访问的链接hover鼠标悬停状态active激活的链接
:hover用于访问的鼠标经过某个元素时:active用于一个元素被激活时(即按下鼠标之后放开 鼠标之前的时间)
:Link > :Visited > :Hover > :Active
** 说明: **
a:hover 必须置于 a:link 和 a:visited 之后,才有效a:active 必须置于 a:hover 之后,才有效伪类名称对大小写不敏感。
从父元素那继承部分CSS属性
可以定义多个样式不冲突时,多个样式可层叠为一个冲突时,按不同样式规则优先级啦应用样式
行内样式>内部样式>外部样式
说明:
链入外部样式表与内部样式表之间的优先级取决于所处位置的先后最后定义的优先级最高(就近原则)
同一样式表中:
权值相同
就近原则(离被设置元素越近优先级越高)权值不同
根据权值来判断CSS样式,哪种CSS样式权值高,就使用哪种样式
标签选择器:权值为1类选择器和伪类:权值为10ID选择器:权值为100通配符选择器:权值为0行内样式:权值为1000
统计不同选择器的个数每类选择器的个数乘以相应权值把所有的值相加得出选择器的权值
可调整样式规则的优先级添加在样式规则之后,中间用空格隔开
!important声明高CSS使用方法的优先级
行内样式>内部样式>外部样式link链入外部样式和style内部样式优先级,取决于先后顺序。样式表中优先级
Id选择器>class选择器>标签选择器>通配符
权值相同权值不同就近原则使用权重高的
采用英文字母、数字以及“-”和“_”命名以小写字母开头,不能以数字和“-”、“_”开头命名形式:单字,连字符,下划线和驼峰使用有意义的命名
id不要滥用, 谨慎使用适当使用class
|