什么是CSS
css,Cascading Style Sheets,层叠样式表.主要用于设置html页面的外观显示样式.
css具有层叠性和继承性
层叠性指多种css样式可以叠加,效果按权重比例.一级256 1000 内联> id > 类 > 标签 >伪对象 >* >继承,!important最优先, 继承样式权重为0.
继承性指css样式子标签会继承父标签的某些样式.(边框 外边距 内边距 背景 定位 元素宽高 盒子相关属性都不可继承')
CSS的编写方式
1.浏览器样式:不同浏览器自带默认样式设置.
2.内联样式
<span style="color:red;"><span>
3.内部样式
<head>
<style> p {color:red;}</style>
</head>
4.外部样式
通过link标签引入css样式文件
<link rel="stylesheet" href="a.css" />
CSS选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> /*选择器 所有标签 * ID选择器 #id 类选择器 .类 */ /*子元素 */ h1 > strong { color: pink; }
h1 strong{后代选择器}
h1 + strong{相邻兄弟选择器} /*属性选择器*/ h2[class]{ color:red; } h2[class="h2"]{ color:yellow; } h2[class~="h"]{ /*属性名全包*/ color:green; } h2[class^="h"]{} /*属性名开头*/ h2[class$="h"]{} /*属性名结尾*/ h2[class*="h"]{} /*属性模糊匹配包含h*/ </style> </head> <body> <h1> <strong>test</strong> </h1> <h2 class=""> <strong>test</strong> </h2> <h2 class="h"> <strong>test</strong> </h2> <h2 class="h2"> <strong>test</strong> </h2> </body> </html>
CSS伪类
:link 伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接使用a标签。
:hover 伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容。
:active 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited 伪类将应用于已经被访问过的链接
:focus 伪类将应用于拥有键盘输入焦点的元素。
CSS伪元素
伪元素能够在文档中插入假想的元素,从而得到某种效果.css2.1中定义了4个伪元素
设置首字母样式
h2:first-letter{font-size: 200%;}
设置第一行的样式 只试用于mei每一段所显示的第一行文本
p:first-line{color:hotpink;}
设置之前和之后元素的样式
p:before{content: "before"}
p:after{content: "after"}
<p> test </p>
部分CSS属性
letter-spacing:定义字间距
word-spacing:定义英文单词之间的间距
white-space:空白符处理
word-break:自动换行
word-wrap:normal break-word属性允许长单词或URL地址换行到下一行
display inline-block IE兼容问题
IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换
成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果。
div {
display: inline-block;
*display: inline;
*zoom: 1;
}
border属性
1.表单的边框通常改为 0；
border:0 none;//兼容所有浏览器
2.表格的细线边框
table { border-collapse:collapse; }
3. 轮廓 （链接有虚线 和 文本框 有 蓝色边框）
outline-style:none;
浮动
html页面的元素排列正常是块级元素独占一行,行内元素从左向右,从上向下排列,这种情况叫做标准流.按照这种情况布局,绝对不会出现例外的情况叫做标准流布局,也叫做流式布局.
浮动float,可以让盒子向左向右浮动,脱离标准流,不占位置,但是会影响标准流.
父容器高度塌陷:如果父盒子没有设置高度,其子元素全部浮动,就会造成塌陷.解决这一问题:1给父盒子设置高度.2给父盒子设置overflow:hidden.3空标签清除浮动clear.4伪元素清除浮动.
布局
定位
元素的定位position主要有static,relative,absolute,fixed.
relative:相对定位,相对本身原位置进行定位,在文档流中的位置仍然保留.
absolute:绝对定位,相对其最近的已经定位的父元素进行定位,原位置不保留.
fixed:固定定位.固定在该位置.脱离标准流控制.
z-index:当元素设置多重定位时,元素可能会发生重叠.z-index就是显示先后层级.默认为0.
背景
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置是否及如何重复背景图像。
background合写的顺序： 背景颜色、背景图地址、平铺设置、背景图滚动、背景图位置。
精灵图
网页上每张图像都要经过一次请求才能展现给用户.为了减少请求量,就对一些小的图片进行修饰,合并成一张精灵图.页面元素通过定位精灵图的不同位置得到小图.
滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
消除inline-block中的空隙
行内块之间会有缝隙，去掉的方法
1. 去除空格，把代码放在一行上。
2. 使用margin负值。
3.给父级添加font-size:0；
4.使用letter-spacing或者 word-spacing
5、使用float的方式