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,...)

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

    希望对你有所帮助!!!

  • 相关阅读:
    xmlTextTextReaderNodeType来读取XML元素的类型
    [转]关于两个坐标点的距离的计算问题
    Incorrect decrement of the reference count of an object that is not owned at this point by the caller1
    让ipad时时显示内存剩余量
    【转】苹果开发者账号注册流程
    自定义百度地图气泡
    [转] iOS 常用数学函数
    [转]JDK环境变量的配置
    纬度在换算距离上一度等于多少公里?
    [转]UIDevice uniqueGlobalDeviceIdentifier(百度地图API的那些事)
  • 原文地址:https://www.cnblogs.com/javahenku/p/7472089.html
Copyright © 2011-2022 走看看