zoukankan      html  css  js  c++  java
  • CSS字体的属性

    1.CSS字体的属性

    font                    简写,作用是把所有的针对字体的属性设置在一个声明中
    font-family             设置字体系列
    font-size               设置字体尺寸
    font-style              设置字体风格,italic或者normal;
    font-variant            以小型大写字体或者正常字体显示文本
    font-weight             设置字体的粗细,normal/bold/bolder/lighter
    
    

    实例:在一个声明上设置所有的字体属性:

    font:italic bold 12px;//设置字体大小
    font-size:200%;
    
    

    2.CSS的文本属性:

    color                   设置文本颜色
    direction               设置文本方向
    line-height             设置行高
    letter-spacing          设置字符间距
    text-align              对齐元素中的文本
    text-decoration         向文本中添加修饰
    text-indent             缩进元素中文本的首行
    text-transform          控制元素中的字母
    unicode-bldl            设置文本的方向
    white-space             设置元素中空白的处理方式
    word-spacing            设置字间距
    
    

    3 背景
    背景
    上=>右=>下=>左
    ">background-image: url('1.jpg');
    background-repeat: no-repeat;(repeat:平铺满)
    background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)

    简写:<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
    <div style=" 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

    注意:如果将背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片,另外,如果此时要设置一个width=100px,你也看不出效果,除非你设置出html。

    实例:

    <p style="color:red;
            line-height:40px;
            letter-spacing:10px;
            background-color:silver;
            300px;
            height:300px;
            text-align:center;">hello world<br>hello world<br>
        </p>
    
    

    4、链接
    ● a:link - 普通的、未被访问的链接
    ● a:visited - 用户已访问的链接
    ● a:hover - 鼠标指针位于链接的上方
    ● a:active - 链接被点击的时刻
    注释:为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后!!
    注释:为了使定义生效,a:active 必须位于 a:hover 之后!!

    5、列表
    list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
    list-style-image 将图象设置为列表项标志。
    list-style-position 设置列表中列表项标志的位置。
    list-style-type 设置列表项标志的类型。

    ul,ol{
    list-style: decimal-leading-zero;
    list-style: none; #经常作为去掉ul前面的符号
    list-style: circle;
    list-style: upper-alpha;
    list-style: disc;
    }

    6、表格
    border
    border-collapse:边框合并模型separate、collapse、inherit
    width
    height
    text-align
    vertical-align
    padding:td里面文本和边框的距离
    color
    background-color

    7、轮廓
    outline : #00ff00 dotted thick 颜色、虚线、粗的
    outline-color:轮廓颜色
    outline-style:轮廓样式
    none 默认。定义无轮廓。
    dotted 定义点状的轮廓。
    dashed 定义虚线轮廓。
    solid 定义实线轮廓。
    double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
    groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
    ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
    inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
    outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
    inherit 规定应该从父元素继承轮廓样式的设置。
    outline-width:轮廓宽度

    效果:

     
    image
  • 相关阅读:
    c++ 动态判断基类指针指向的子类类型(typeid)
    qt在GUI显示时,将调试信息输出到控制台的设置
    Qt库版查询
    Qt动态库静态库的创建、使用、多级库依赖、动态库改成静态库等详细说明
    ICMP timestamp 请求响应漏洞
    linux 防火墙 ufw使用
    MySQL--binlog和relay log的生成和删除
    SSD 相关基础知识
    python36--将数据保存为excel
    MySQL 5.7并发复制和mysqldump相互阻塞引起的复制延迟
  • 原文地址:https://www.cnblogs.com/pyxuexi/p/13871236.html
Copyright © 2011-2022 走看看