...
6、选择器分组
为n多元素定义相同的样式部分
CSS: input,a.link,#title,.s1 {XXX}
7、伪类
有不同的状态
:link---未访问过的
:hover---悬浮,悬停
:active---按下
:visited---访问过的
CSS: 某种选择器:link/hover
8、扩展
各种样式选择器----不重复的取并集,重复的依靠优先级
选择器的优先级:范围越小,优先级越高
div a {}
#link1 {}
a.s1 {}
三、各种样式属性
尺寸单位:pt/px/cm/mm/%/..
颜色单位:red/#ff0000
四、尺寸
width、height
overflow:visible/hidden/scroll/auto(建议)---设置内容溢出时如何处理
五、边框
border:width style color;---4边框
border-top:1px solid red;
border-left:2px dotted blue;
border-left-width:2px;
border-left-style:dotted;---线型
border-left-color:blue;
六、边距
盒子模型(框模型):元素的边框、内容、外边距以及内边距之间的定义
margin:外边距
margin:20px;---四个方向
margin:10px 20px 30px 40px; --- top right bottom left
margin:10px 20px;---值复制
margin-left:10px;---单个方向的边距
margin-top:20px;
padding:内边距
padding:1/2/4;
padding-left/right:;
定义边距,可能导致占用的总面积的增加
特别的取值:
margin:10px auto;----居中,auto:由浏览器自动计算左右的边距
七、背景
1、背景色: background-color:颜色;---纯色
2、背景图片:
background-image:url(images/a.jpg);
background-repeat:repeat/no-repeat/repeat-x/repeat-y;
background-position:x y;
background-attachment:scroll/fixed;--附着方式---取值为fixed,背景图像固定,类似于水印的效果
八、文本
color
font-size
font-family:value1,value2,value3;
font-weight:normal/bold;
text-align:left/center/right;
text-decoration:none/underline;
text-indent:12px;----仅首行缩进
line-height:20px;---行高
九、表格
vertical-align:top/middle/bottom;----td里
border-collapse:separate/collapse;---边框合并
border-spacing:10px;---边框之间的边距;
十、光标
cursor:default/pointer/help/....;---光标
十一、浮动
1、页面默认情况下,采用流布局的模式
2、设置元素浮动,脱离原有的布局,原有的位置不再保留,后续元素补上
float:none/left/right;3、清除浮动元素带来的影响
clear:left/right/both;
十二、显示----元素的显示方式
每个 html 元素都有其默认的显示方式(块级、行内)
行内元素:高度和宽度---无效
块级元素:高度和宽度有效
十三、列表的样式
list-style-type:none/circle/...;
list-style-image:url();----使用图片作为列表项的标识