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

    <span>标签 </span>
    属性名 含义 举例
    font-family 设置字体类型 font-family:"隶书"
    font-size 设置字体大小 font-size:12px;
    font-style 设置字体的风格 font-style:italic;
    font-weight 设置字体粗细 font-weight:bold;
    font 在一个声明设置所有字体属性 font:italicbold36px"宋体 "

    font-style属性
    normal 正常
    italic 倾斜(用的多)
    oblique 斜体


    font-weight属性
    值 说明
    normal 默认值定义标准字体
    bold 粗体字体
    bolder 更粗字体
    lighter 更细字体
    100....900 定义由粗到细的字体400等同于normal,700等同于bold

    font属性
    字体属性的顺序:字体风格---字体粗细--字体大小---字体类型
    p span{
    font:obiqer bold 12px"楷体"
    }

    文本属性
    属性 含义 举例
    color 设置文本颜色 color#ooc;
    text-align 设置元素水平对齐方式 text-align:right;
    text-indent 设置首行文本缩进 text-indent:20px;
    line-height 设置文本行高 line-height:25px;
    text-ddecoration 蛇者文本装饰 text-decoration:underline;

    值 说明
    left 把文本排列到左边。默认值:由浏览器决定
    right 把文本排类到右边
    center 把文本排类到中间
    justify 实现两端对齐文本效果

    首行缩进
    text-indent:em或px
    行高
    line-height:px

    文本装饰
    text-decortion属性

    none 默认值,定义标准文本
    underline 设置文本下划线
    overline 设置文本上划线
    line-through 设置文本删除线

    垂直对齐方式
    vertical属性:middle、top、bottom 。
    文本阴影
    text-shadow:color x-offset y-offset blur-radius

    字体属性
    字体属性的顺序:字体风格----字体粗细----字体大小---字体类型


    伪类名称 含义 实例
    a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
    a:visited 单击访问后超链接样式 a:visited{color:#333;}
    a:hover(记住) 鼠标悬浮上的超链接样式 a:hover{color:#ff7300;}
    a:active 鼠标单击未释放的超链接样式 a:active{color:#999;}

    伪类样式
    标签名:伪类名{声明;}
    设置伪类的顺序 :a:link>a:visited>a:hover>a:active

    list-style-type

    none 无标记符号

    disc 实心圆


    circle 空心圆 list-style-type:none;


    square 实心正方形


    decimal 数字

    list-style-image

    list-sytle-position

    list-style(记住)


    背景颜色
    background-color
    transparent 透明色
    背景图像
    background-image:url(图片路径)
    背景重复方式
    background-repeat属性
    repeat:沿水平和垂直两个方向平铺
    no-repeat:不平铺,即只显示一次
    repeat-x:只沿水平方向平铺
    repeat-y:只沿垂直方向平铺

    背景定位
    background-position属性
    值 含义
    xpos 单位:px,Xpos表示水平位置,Ypos表示垂直位置
    X% Y% 使用百分比表示背景位置
    X Y方向关键字 水平方向关键字:left center right
    垂直方向关键词:top center bottom


    背景尺寸 background-size
    属性值 描述
    auto 默认值,使用背景图片保持原样
    percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的而相对元素宽度来计算的
    cover 整个背景图片放大填充了整个元素
    contain 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适合所定义背景的区域


    线性渐变
    颜色沿着一条直线过渡;从左到右、从右到左、从上到下
    语法
    liner-gradient{position(渐变方向)color1,color2,...)

    经向渐变
    圆形或椭圆形渐变,颜色不再沿着一条直线变化,从而从一个起点朝所有方向混合

    希望对你有所帮助!!!

  • 相关阅读:
    又玩起了“数独”
    WebService应用:音乐站图片上传
    大家都来DIY自己的Blog啦
    CSS导圆角,不过这个代码没有怎么看懂,与一般的HTML是不同
    网站PR值
    CommunityServer2.0何去何从?
    网络最经典命令行
    炎热八月,小心"落雪"
    Topology activation failed. Each partition must have at least one index component from the previous topology in the new topology, in the same host.
    SharePoint 2013服务器场设计的一些链接
  • 原文地址:https://www.cnblogs.com/javahenku/p/7472089.html
Copyright © 2011-2022 走看看