CSS3美化网页元素

标签：font   near   ddl   样式   主题   repeat-x   span   gif   web   

一.为什么使用CSS
                    1.有效的传递页面信息
                    2.使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
                    3.可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
                    4.具有良好的用户体验



        二.字体样式属性

                    1.font-family:英文字体,中文字体        （类型）
                        font-family: Times,"Times New Roman", "楷体";

                    2.font-size:值单位                     (大小)
                        单位
                            px（像素）
                            em、rem、cm、mm、pt、pc

                    3.font-style:normal（正常）、italic（斜体）和oblique（倾斜）        （风格）
                        p span{
                            font-weight: 700;
                        }

                    4.font-weight: 700            （字体粗细）

                        normal    默认值，定义标准的字体
                        bold    粗体字体
                        bolder    更粗的字体
                        lighter    更细的字体
                        100、200、300、400、500、600、700、800、900    定义由细到粗的字体
                        400等同于normal，700等同于bold

                    5.font:字体风格→字体粗细→字体大小→字体类型
                        font:oblique bold 12px "楷体";
        三.文本样式
                    1.color
                            rgb(0,0,0)        取值在0~255之间
                            rgba(0,0,0,0)    最后一位代表透明度，取值在0~1之间

                    2.文本水平对齐方式text-align
                            left    把文本排列到左边。默认值：由浏览器决定
                            right    把文本排列到右边
                            center    把文本排列到中间
                            justify    实现两端对齐文本效果

                    3.首行缩进
                            text-indent:20px;

                    4.行高
                            line-height:30px;

                    5.文本装饰
                            text-decoration
                            none    默认值，定义的标准文本
                            underline    设置文本的下划线
                            overline    设置文本的上划线
                            line-through    设置文本的删除线

                    6.文本垂直对齐
                            vertical-align
                            top:上对齐
                            bottom:下对齐
                            middle:中间对齐
                    7.文本阴影
                            text-shadow:颜色   x轴移动位置   y轴移动位置  模糊半径（0代表没有）

        四.超链接伪类
                    a:link    未单击访问时超链接样式    a:link{color:#9ef5f9;}
                    a:visited    单击访问后超链接样式    a:visited {color:#333;}
                    a:hover    鼠标悬浮其上的超链接样式    a:hover{color:#ff7300;}
                    a:active    鼠标单击未释放的超链接样式    a:active {color:#999;}

        五.列表样式
                    list-style-image: url(image/arrow-icon.gif);        列表项前图像
                    list-style-type        指定列表项前图标
                    none    无标记符号    list-style-type:none;
                    disc    实心圆，默认类型    list-style-type:disc;
                    circle    空心圆    list-style-type:circle;
                    square    实心正方形    list-style-type:square;
                    decimal    数字    list-style-type:decimal

        六.背景颜色和图像
                颜色：background-color
                图像：background-repeat：url(路径)
                    repeat：沿水平和垂直两个方向平铺
                    no-repeat：不平铺，即只显示一次
                    repeat-x：只沿水平方向平铺
                    repeat-y：只沿垂直方向平铺
        七.渐变
                -浏览器内核-linear-gradient(方向，开始颜色，结束颜色)
                background:linear-gradient(to left,red,blue);
                background:-webkit-linear-gradient(to left,red,blue);

CSS3美化网页元素

标签：font   near   ddl   样式   主题   repeat-x   span   gif   web   

原文地址：https://www.cnblogs.com/ws1149939228/p/9193316.html