CSS 示例

基础内容

引入样式表：<link rel="stylesheet" href="test.css">
em：相对大小单位

选择器

示例	说明
#id	选择所有类
.clsss	选择所有类
p	选择所有p标签，可以加逗号分组
p em	后代选择器，选中p标签中所有em标签
p > em	子元素选择器，只会查一层
p+em	相邻兄弟选择器，选择p相邻的em
p [class=“p1”]	属性选择器
…	…

背景样式

background-color: green;
background-image: url("image/wen.jpg");
background-repeat: no-repeat;  // 可以x或y轴重复
background-attachment: fixed;  // 固定图片不跟着滚动条移动
background-position: 10px 30px;top center;  //图片位置，也可以百分比，可以与attachment的fixed搭配
background: green no-repeat ...;  // 复合设置

文本字体样式

color: #FF0000;
direction: ltr/rtl;  // 文字书写方向
letter-spacing: 5px;  // 字符间距
line-height: 50px;  // 行高
text-align: justify;  // 文本对齐方式left right center
text-decoration: underline  // 定义划线
text-shadow: 2px 2px 1px #ff0000;  // 阴影
text-transform: uppercase;  // 定义大小写
text-indent: 2em;  // 首行缩进

字体

font-size: 20px;
font-style: italic; // 斜体
font-weight: bold;  // 加粗
font-family: 隶书;  // 字体

列表样式

list-style-type: square;  // 列表项目的样式
list-style-position: inside;  // 列表前面标记(小圆点)的位置，默认outside
list-style-image: url("image/1.gif");  // 设置列表项目的图标
list-style: square inside...;  // 复合设置

list-style-type详解

伪类样式

注意：同时写多个需要按下面顺序书写

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接，鼠标按住未松开的时候 */
:focus  // 键盘输入焦点的元素

伪类详情

DIV 盒子模型 定位

width: 150px;
height: 150px;
top: 150px;
left: 150px;

// 位置参照，才能用top left之类的
position: relative相对 absolute绝对 static无定位 fixed相对于浏览器固定
相对定位位置会被保留，绝对定位不会
z-index: 50;  // 堆叠顺序，大的在前面

overflow: auto scroll hidden;  // 设置超出部分，隐藏或者显示滚动条等
outline: dashed;  // 轮廓，边框之外
border: solid; // border-left... 边框
margin: 10px 10px 10px 10px;  // 外边距，上右下左
padding: ...;  // 内边距，同上
box-sizing: border-box;  // 让padding的绘制的距离包含在整体大小里

位置浮动

text-align: center;  // 内容居中，文字图片
line-height: 150px;  // 设置行高，可达到垂直居中的目的
vertical-align: bottom;  // 垂直对齐方式
margin: 0px 50%;  // 左右为auto实现块级元素居中

文档流：从左往右从上往下排序，float可以脱离标准文档流

float: left right;
clear: both;  // 清除浮动，把前面的当做没有浮动看待，撑起高度

其他效果

box-shadow: 0 0 5px 3px #ccc;   // 阴影