一、CSS样式



外链样式:


页内样式:

行内样式:

二、CSS选择器:
4种基础选择器:标签选择器、class选择器、id选择器和通用选择器




两种复合选择器:后代选择器、编组选择器



编组选择器

伪类选择器:

三、css文本样式:

文本区块:


四、CSS背景:背景颜色和背景图片







背景设置简写:

五、盒子模型



内边距

内边距会使元素变大,外边距不会

margin的值设为auto,元素会居中显示:

很多标签自带内外边距,但在各个浏览器中的边距显示有差别,为了兼容各浏览器,应先将边距清零:

边框border:


可以用border-top、border-botton、border-left、border-right设置上下左右边框

浮动:


添加浮动后,元素为漂浮状态,块级元素将可以被显示在一行
清除浮动:


clear:left将忽略float:left的浮动效果,将box3显示在box1的下面
网友评论