一、 CSS文字属性
color : #999999; /*文字颜色*/
font-family : "Microsoft Yahei"; /*文字字体*/
font-size : 9px; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1px; /*字间距离*/
line-height : 2em; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-transform : capitalize; /*首字大写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
vertical-align属性: vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
二、选择器
(1)类选择器
语法:.***{CSS样式代码} <span class="***">...</span>
(2)ID选择器
语法:#***{CSS样式代码} <span id="***">...</span>
类选择器和ID选择器的区别:
(1)ID选择器只能在一个页面之使用一次。
错误:<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
正确:<p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>
(2)类选择器可以为一个元素设置多种样式。
错误:#stressid{color:red; }
#bigsizeid{font-size:25px; }
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>
正确:.stress{color:red; }
.bigsize{font-size:25px; }
<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
三、盒模型
1.块级元素:<div>、 <p>、<h1>、<form>、<ul> 和 <li>。
2.内联元素:<span>、<a>、<label>、 <strong> 和<em>。
3.内联块状元素:<img>、<input>。
4.边框(border):border-style(边框样式)常见样式有:dashed(虚线)、dotted(点线)、solid(实线)。border-top、border-bottom、border-left、border-right分别表示上、下、左、右边框,可以根据需要对边框进行样式设置。
5.盒模型的图示及盒子宽度的计算:
6.填充(padding):元素内容与边框之间是可以设置距离的,称之为“填充”。对填充的样式设置方法与边框类似。
7.边界(margin):元素与其它元素之间的距离可以使用边界(margin)来设置。对边界的样式设置方法与边框类似。
8.代码缩写:如果top、right、bottom、left的值相同,则可以只写一个,例如:margin:10px。
如果top和bottom值相同、left和 right的值相同,则可只写两个,例如:margin:10px,20px。
如果left和right的值相同,top和bottom的值不同,则可以只写left和right中的一个,例如:margin:10px 20px 30px。
四、层模型
1.绝对定位:position:absolute。是对整个页面的位置固定。
2.相对定位:position:relative。是对这个页面里你设定或者默认的范围内改变位置。
3.固定定位:position:fixed。是对屏幕的固定位置,会随着滚轮条的下拉而下移。