一、使用CSS的方式
1.内联/行内样式:
<divstyle="color:red;"></div>
2.内部样式表:定义在<head>中,对当前网页有效
<style>
div {
color:red;
}
</style>
3.外部样式表:引入css文件
<linkrel="stylesheet"type="text/css"href="style.css"/>
@charset "utf-8";
二、优先级
0:浏览器缺省设置
1:内部样式表 或 外部样式表
2:行内/内联样式
3:!important规则:放在属性值之后,用空格区分,优先级最高
三、选择器
1.元素/标记选择器
2.类选择器:.className{}
3.分类选择器:p.important{}
4.通用选择器:*{}
5.id选择器:#id{}
6.群组选择器:span,p,a{},用于定义公共样式
7.后代/包含选择器:div p{}
8.子代选择器:div>p
9.伪类选择器:链接伪类、动态伪类、目标伪类、元素状态伪类、结构伪类、否定伪类
四、选择器优先级
元素选择器:1
类/伪类选择器:10
ID选择器:100
内联样式:1000
五、尺寸单位
px、em:1em=当前字体的尺寸
六、尺寸属性
width,max-width,min-width
height,max-height,min-height
溢出:overflow
值:visible(默认值)、hidden、scroll、auto
overflow-x:横向溢出时的处理
overflow-y:纵向溢出时的处理
七、边框
border: width style color
透明色:transparent
边框圆角/倒角:border-radius:给定值,或百分比(border-radius制作特殊图形)
边框阴影:box-shadow,常用方式:
box-shadow:0 0 1px #ddd;