CSS学习笔记

一、 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。是对屏幕的固定位置，会随着滚轮条的下拉而下移。