一、CSS格式化排版
文字排版:
body{font-family:"Microsoft Yahei";(字体)
font-size:12px;color:#666;
font-weight:bold;(粗体)
font-style:italic;(斜体)
text-decoration:underline;(下划线)
text-decoration:line-through;(删除线)
text-indent:2em;(段落前空两个文字空格)
line-height:1.5em;(行间距倍数)
letter-spacing:50px;(字母间距)
word-spacing:50px;(单词间距)
text-align:center;(块状元素位置)}
二、CSS盒模型
1. 元素分类:
常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联 块状元素有:<img>、<input>
2. 块级元素特点:
每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
常见块级元素:<div>、 <p>、<h1>、<form>、<ul> 和 <li>
例如:将<span>设置成块级元素:span{
display: block;
}
3. 内联元素特点:
和其他元素都在一行上;
元素的高度、宽度及顶部和底部边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变。
常见内联元素:<span>、<a>、<label>、 <strong> 和<em>
例如:将<div>设置成内联元素:div{
display:inline;
}
4. 添加边框:div{border:2px solid red;} 或者 div{ border-width:2px;border-style:solid; border-color:red;}
div{border-bottom:1px dotted #ccc;} //设置下边框
border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)。
5. 内边距: margin
外边距: padding
三、CSS布局模型:
1、 流动模型(Flow):1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)。如:a、span、em、strong标签
2、 浮动模型 (Float):
div{
width:200px;
height:200px;
border:2px red solid;
float:left;//浮动模型
}
3、 层模型(Layer):
绝对定位(position: absolute)
相对定位(position: relative)
固定定位(position: fixed)
四、CSS代码缩写:
1. margin:10px 15px 12px 14px;2. p{color: #000;} 替换 p{color:#000000;}
五、单位和值:
1. px:像素
2. em:就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px
3. % : p{font-size:12px;line-height:130%} 设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)