zoukankan      html  css  js  c++  java
  • CSS3美化网页元素

    一.为什么使用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);

  • 相关阅读:
    【iCore4 双核心板_ARM】例程三十三:SD_IAP_ARM实验——更新升级STM32
    【iCore4 双核心板_ARM】例程三十二:UART_IAP_ARM实验——更新升级STM32
    【iCore4 双核心板_ARM】例程三十一:HTTP_IAP_FPGA实验——更新升级FPGA
    【iCore4 双核心板_ARM】例程三十:U_DISK_IAP_FPGA实验——更新升级FPGA
    【iCore4 双核心板_ARM】例程二十九:SD_IAP_FPGA实验——更新升级FPGA
    【iCore4 双核心板_ARM】例程二十八:FSMC实验——读写FPGA
    【iCore4 双核心板_ARM】例程二十七:LWIP_NETIO实验——以太网测速
    【iCore4 双核心板_ARM】例程二十六:LWIP_MODBUS_TCP实验——电源监控
    【iCore4 双核心板_ARM】例程二十五:LWIP_DNS实验——域名解析
    【iCore4 双核心板_ARM】例程二十四:LWIP_DHCP实验——动态分配IP地址
  • 原文地址:https://www.cnblogs.com/ws1149939228/p/9193316.html
Copyright © 2011-2022 走看看