css美化网页元素

1.CSS设置字体样式

font字体属性的顺序：字体的风格—>字体的粗细—>字体大小—>字体
2.CSS设置文本样式

扩展：text-shadow:可向文本应用阴影

例：text-shadow：5px 5px 5px #ffff00;

3.超连接伪类

语法：

4.鼠标的形状

5.CSS设置图片对齐方式

5.1背景设置

background—image：为指定的元素使用多个背景图案

6. CSS设置列表样式 list-style-typelist-style:简写列表属性，将所有的列表写在一个声明中

list-style-type:decimal;改变列表的标志类型
list-style-image: url("images/dog.gif");用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部

7.控制溢出

8.隐藏元素

9.盒子模型

9.1什么是盒子模型

9.2 边框相关属性

border-style:边框样式，值有以下情况：
                solid:实线
                double:空心线
                dashed:圆点组成的边框
                dotted:虚线组成的边框
                border-color:边框颜色
                border-width:边框宽度

9.3 外边距的相关属性

               margin:外间距,边框和边框外层的元素的距离（就是最外层的边框与浏览器的距离）
               margin:四个方向的距离(top right bottom left)
               margin-top:
               margin-bottom:
               margin-left:
               margin-right:

10.clear扩展盒子的高度

规定元素的那一侧不允许其他浮动元素

 

运用：

如果页面中有绝对定位元素且元素超出了父级的范围，就必须使用clear属性来清除浮动来扩展盒子高度
11.定位属性

11.1 默认的值（static）

没有定位以标准流方向显示

11.2 相对定位（relative）（*****）

相对自身的原来位置进行偏移

属性的定义：h2.pos_left {
                position: relative;
                left: -20px
            }

11.3 绝对定位（absolute）

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。
例：position:absolute;
    right:30px;

11.4 固定定位（fixed）

fixed目前还不被一些浏览器支持，实际网页制作中不常用

12.元素透明度

 

13.元素的重叠

调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。
z-index值大的层位于其值小的层上方

网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可

 

 

 14.css扩展属性

10.1 border-radius创建圆角

10.2 box-shadow:用于向方框添加阴影