六样式表
1.语法:
<head>
<style type=“text/css”>
选择器(即修饰对象){
对象的属性 1: 属性值 1;
对象的属性 2: 属性值 2;
}
</style>
</head>
2.选择器
id选择器
class选择器
标签选择器
且优先级:id 选择器>class选择器>标签选择器
关系:
紧邻是交集关系 例:div#d4 选中id 为 d4 的 div 元素
逗号(,)是并集关系 例:p,h3 选中了两个标签选择器
空格( )是层次关系 例:div #d3 选中 div 下级元素中 id 为 d3 的元素
3.文本属性
字号字体:font(缩写形式):粗细 大小/行高 字体
font-weight(粗细)
font-size(大小)
font-family(字体)
行距,对齐:line-height(行高)
text-align(对齐)
letter-spacing(字符间距)
text-decoration(文本修饰)
white-space(空白处理)
4.背景属性
background(缩写形式)
background-color(背景颜色)
background-image(背景图)
background-repeat(背景图重复方式) 默认沿x和y都重复
background-position:上或下 左或右(坐标位置,偏移量)
5.列表属性
list-style-type disc 实心圆
circle 空心圆
square 实心正方形
decimal 数字
6.浮动
float left 文本流向对象的右边
right 文本流向对象的左边
7.伪链接
未访问状态 a:link 未访问状态 例:a:link{color:#999;}
已访问状态 a:visited 已访问状态 例:a: visited {color:#333;}
鼠标移上状态 a:hover 鼠标移上状态 例:a: hover {color:#ff7300;}
激活选定状态 a:active 激活选定状态(鼠标点击未释放时) 例:a: active {color:#999;}
8.样式表
行内样式表 直接在某个标签内部加入行内样式表,该样式表只对该标签起作用
<div style=“background-color:#00FFCC; font-family:黑体; color:red;”>aaa
内部样式表 直接放在 html 文档中的 head 标签中
<style type=“text/css”>
div{
background-color:#00FFCC;
}
</style>
外部样式表 直接建立一个外部样式文件来保存,该文件的扩展名是.css
导入外部样式表:<link href=“css/c1.css” type=“text/css” rel=“stylesheet” />
<style type=“text/css”>
@import url(“css/c1.css”);
</style>