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

    一.为什么使用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(正常)、it alic(斜体)和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等同于

    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);

  • 相关阅读:
    C# 多文本取数
    【SSH网上商城项目实战25】使用java email给用户发送邮件
    【SSH网上商城项目实战24】Struts2中如何处理多个Model请求
    【SSH网上商城项目实战23】完成在线支付功能
    【SSH网上商城项目实战22】获取银行图标以及支付页面的显示
    【SSH网上商城项目实战21】从Demo中看易宝支付的流程
    【SSH网上商城项目实战20】在线支付平台的介绍
    【SSH网上商城项目实战19】订单信息的级联入库以及页面的缓存问题
    【SSH网上商城项目实战18】过滤器实现购物登录功能的判断
    【SSH网上商城项目实战17】购物车基本功能的实现
  • 原文地址:https://www.cnblogs.com/wishsaber/p/9190408.html
Copyright © 2011-2022 走看看