内部样式表
- 每个css 的样式都分为两部分,选择符和内部样式表
- 声明又分为属性和属性值
- 属性必须放在花括号内,属性和属性值之间用:号连接
- 每条声明之间用分号结束
- 声明放在head标签内的
<style> </style>
中 - 形式:选择器{属性1:属性值;属性2:属性值}
- 外部样式也能单独建立css文件,但是要有一个link标签导入
link标签的属性
- rel :stylesheet
- type:导入文件类型
- href:css文件的路径
选择器
要使用css对html页面中的元素进行,一对一,一对多,或者多对一的控制的话,就要用css选择器。
元素选择器
元素的名称{属性:属性值;}
类选择器
语法:class{属性:属性值;}
实例:
<div class = "top"> </div>
.top{width:20px;height:100px;}
id选择器
eg
<div id = 'box'></div>
#box{width:300px;height:300px}
注意:一个id的名称只能对应文档中一个具体的元素对象(唯一性)
通配选择器
*{属性:属性值} 代表所有元素
eg:
*{margin:0;padding:0;}#设置所有元素的边界和填充值为0
群组选择器
选择符1,选择符2,选择符3{属性:属性值;}
多选择器应用相同声明的时候,用逗号隔开,然后合并为一组。
包含选择器
选择符1 选择符2{属性:属性值;}
当要改变子类选择器中的某个样式时使用。选择器1是父类选择器,选择器2是子类选择器
伪类选择器
伪类选择器用在标签上面
- a:link{属性:属性值} 超链接的初始状态
- a:visited{属性:属性值}超链接被访问后的状态
- a:hover{属性:鼠标悬停
- a:active{属性:属性值} 超链接被激活时的状态
注意
顺序必须是“link visted hover action””否则无效
选择器的权重
!import 》内联样式》包含选择器》id选择器》类选择器》元素选择器