课工场中关村软件学院：常用的CSS语法总结

http://web.mybdqn.com/

课工场中关村软件学院：常用的CSS语法总结一：网页<div>的基本命名规范
网页布局的时候（命名代码规范）
头部div取值为：id="header"
中间div取值为：id="container"
中间左部分div取值为：class="left"
中间中部分div取值为：class="middle"
中间右部分div取值为：class="right"
底部div取值为：id="footer"

二：字体设置
1：字体样式
字体类型 font-family font-family:"隶书"（楷体）;
字体大小 font-size font-size:12px;（单位像素）
字体风格
font-style font-style:italic; normal:默认 italic:倾斜体
字体的粗细font-weight font-weight:bold;
normal:标准、bold:粗体字体 lighter:细体
在一个声明中设置所有字体属性 font font:italic bold 36px "宋体";

①：颜色:color black blue green red gray orange purple white yellow 2：文本样式

④：行高（line-height:12px）
⑤：文本添加修饰：text-decoration
none:标准文本 underline:设置文本的下划线 overline:设置文本的下划线
line-through:设置文本的删除线blink:设置文本的闪烁（IE无效）
⑥：垂直对齐方式（只用于图像与文本的居中对齐）vertical-align
<p><img ......../>xxxxx</p> 示例：pimg{vertical-align:middle;}
三：超链接
1：根据用户未单击访问前（a:link）
鼠标悬浮在超链接上(a:hover)【必须设置在a:link和a:visited之后才有
效】
单击未释放(a:active)【必须设置在a：hover之后才有效】
单击访问后(a:visited)
的四个状态显示。

①语法：

http://web.mybdqn.com/

}
2:设置鼠标形状:cursor
default：默认箭头
pointer: 超链接的指针（小手）
wait:指示程序正在忙（）
help:可用的帮助（箭头问好）
text:指示文本（细I的形状）
crosshair:呈现十字状
三：背景样式
1:<div>:可将HTML文档分割成的，不同的部分，常用来进行网页的布局 width:宽度（200px）height:高度（290px）
<divid="iys2" style="width:180px ;height:180px;">
或
#iys2{width:180px ;height:180px;
2：背景属性
①背景颜色：background-color（值：red、yellow或#ff0000）
②背景图像
背景图像：background-image:url(bg.jpg)
背景重复：background-repeat(repeat:水平垂直方向重复 repeat-x:水平方向重复

显示一次 显示背景图像上的起始位置（基准的位置：左上方）：background-position
repeat-y:在垂直方向重复 no-repeat:背景图像仅

四：列表样式 none:无标记符号
disc:实心圆，默认类型
circle:空心圆
square:实心正方形
decimal：数字
2：图像替换列表项的标记（设置它后list-style-type将不起作用） list-style-image
list-style-image:url(image/arrow-right.gif);
3：何处放置列表项标记 list-style-position
inside:标记放置在文本（范围）以内
outside:标记放置在文本以外
4：设置所有列表的属性list-style
顺序：list-style-type list-style-position list-style-image
五：盒子模型
1：边框（第一层）

http://web.mybdqn.com/

框)+margin(两个内容之间的距离)
1：边框
①border-color：颜色
属性 说明 示例
border-top-color 上边框颜色
border-top-color:#369; border-right-color右边框颜色border-right-color:#369;
border-bottom-color 下边框颜色border-bottom-color:#fae45b;
border-left-color 左边框颜色
border-left-color:#efcd56; 四个边框为同一颜色border-color:#eeff34;
上、下边框颜色：#369左、右边框颜色：#000 border-color:#369#000;
border-color 上边框颜色：#369左、右边框颜色：#000border-color:#369 #000 #f00;
上、右、下、左边框颜色：#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f;
②border-width：粗细
thin 设置细的边框
medium 默认值（设置中等的边框）
thick 设置粗的边框

border-top-width:5px; border-right-width:10px; 像素值自定义设置边框的宽度

border-width:5px 1px 6px;
border-width:1px 3px 5px2px;
③border-style：样式
none：无边框
dotted：点线边框
dashed：虚线边框
solid：实线边框
double：双线边框
④简写（border）：在一个声明中设置所有的边框属性
border-top border-right border-bottom border-left
顺序为：width style color
2：外边距(与其他盒子之间的距离)
属性
margin-top：上边距

http://web.mybdqn.com/

示例
auto:居中显示
margin-top: 1 px
margin-right: 2 px
margin-bottom: 2 px
margin-left: 1 px
margin:3px 5px 7px 4px; 上、右、下、左边距
margin:3px 5px; 上下3px 左右边距5px
margin:3px 5px 7px; 上下为3和7；左右为5
margin:8px; 四个边距都是8px

3：内边距（内容与边框之间的距离）
属性
padding-left
padding-right
padding-top
padding-bottom
padding

padding-left:10px; padding-right: 5px; 示例

padding:30px 8px 10px ; ：上下为30和10；左右为8
padding:10px;
4：标准文档流（CSS默认的排列规则）
①块级元素：以一块区域显示的元素(独占一行，拥有自己的区域)
<ul><ol><dl><h1><p><div>
②内联元素:字母之间横向排列，到最右端自动拆行（没有自己的区域）
<span><a><img><strong>
③内联标签可以包含在块级标签之中；但块级标签无法包含在内联标签之中
④display属性（控制元素的显示方式）

值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符none 设置元素不会被显示

http://web.mybdqn.com/

left:向左浮动
right：向右浮动
设置了浮动后，该元素将会脱离标准文档流，盒子的元素将不再延伸，而是根据内容

的宽度来确定
2：清除浮动 clear属性（设置元素的哪一侧不允许有浮动元素）
left:左侧不允许有浮动
right:右侧不允许有浮动
both:两侧均不允许有浮动
none:两侧允许有浮动元素（默认值）
3：控制元素的大小（<div>）
width:元素宽度
height:元素高度
4：扩展盒子的高度
因为盒子中的元素有了浮动，所以，盒子本身的高度可能就会变低，那么如果想让

盒子的高度视觉上依然包含所有的元素，我们可以扩展盒子的高度。

方法一：在盒子中元素的最下方添加空div,设置样式clear:both清除浮动方法二：在父级的标签设置中添加overflow属性为：hidden。

5：溢出处理
就是将内容放到一个固定宽度和高度的盒子中，超出的部分隐藏起来或以带滚动条的

owerflow 属性 visible:默认值，内容不会被修剪，会呈现在盒子之外窗口显示

没有内容溢出的方向不会出现滚动条

七：定位机制

标准流

浮动

绝对定位
1：position属性：相对于父级的位置和相对于它自身该在的位置
①：static:默认值没有定位（元素按照标准流进行布局）
②：relative:相对定位(移动后的位置相对于原位置)（负数正方向/正数反方向） 同时还要指定一定的偏移量，水平方向：left或right;垂直方向：top或tottom 元素移动之后，元素的大小并没有改变，原有的位置依然保留，其他的元素不受

影响（不会被下面的其他的元素占用）
#third{
background-color:#C5DECC;
border:1px #395E4F dashed;

}	position:relative;
	right:20px;
	bottom:30px;

http://web.mybdqn.com/

③：absolute:绝对定位
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。

如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。

元素的某个边框相对于父级的某个边框的距离
设置绝对定位，不设置偏移量，他将保持在原有的位置上（但依然脱离了文档流）
元素定位之后，元素的大小将以内容的大小填充，原有的位置没有了，被其他的元素占用
④：先浮动后定位
相对定位，对浮动元素没有影响，并且继续执行相对定位
绝对定位，会让浮动元素失去浮动的效果，执行绝对定位

2：z-index属性：用于调整元素定位是重叠的上下位置（在设置了position的值的时候，
他才有效）
z-index的值越大，他的堆放位置越在上面