• CSS-样式属性分类


    文字

    • font-family:字体名称

      注意: 当指定多种字体时,用“,”分隔每种字体的名称
      当字体名称包含两个以上分开的单词是,用“”把该字体名称括起来。
      当样式规则外已经有“”时,用‘’代替“”。

    • font-size:字号参数。

    • font-style:斜体字的名称。

      normal正常状态、italic斜体字、oblique 斜体和正常状态之间。

    • font-weight:字体粗细。

      取值是:number(100~900) 或者参数 lighter(细体) 和bold(粗体)bolder(特粗体) 参数 显示更细或更粗。

    • text-transform:参数

      参数的范围: uppercase 所有文字大写显示
      lowercase:所有文字小写显示
      capitalize 每个单词的头字母大写
      none 不继承母体的文字变形参数。

    • text-decoration:参数

      参数的范围: underline 为文字加下划线
      overline 为文字加上划线
      line-through 为文字加删除线
      blink 使文字闪烁
      none 不显示上叙任何效果。

    • color:#rrggbb或者 #rgb原则(还可以参考资料有多种方式,但是只要掌握基本的一种方式)。

    • 可以用font 属性全部定位

      示例:p{font:italic bold 12pt;}

    背景

    • background-color 背景颜色

    • background-image 背景图片
      示例:{background-image:url('http://baidu.com/zhouliang.gif')}

    • background-repeat:参数
      参数的范围:
      repeat 表示图像从水平和垂直角度平铺
      no-repeat 不重复平铺背景图片
      repeat-x 使图片只在水平方向上平铺
      repeat-y 使图片只在垂直方向上平铺。

    • background-attachment 参数
      fixed 网页滚动时,背景图片相对浏览器而言固定不动。
      scroll 网页滚动时,背景图片相对浏览器而言一起滚动。

    • background-postion 参数 (背景定位)
      参数:top 相对前景对象顶对齐
      bottom 相对前景对象底对齐
      left 相对前景对象左对齐
      right 相对前景对象右对齐
      center 相对前景对象中心对齐
      说明:一般用坐标的方式来确定图片的位置。

    • 可以直接用 background 复合属性来确定式样
      示例:table{background:#001122 url(zhouliang.jpg) no-repeat bottom right}

    文本

    • 英文单词间距 word-spacing:
      取值可以是:normal或者是单位像素;

    • 英文字母间距 letter-spacing:间隔距离
      取值可以是:normal或者是单位像素;

    • 行距 line-height:值

      可以是精确的值,也可以是百分比。

    • 文本水平排列text-aglin:参数

      left: 左对齐 right:右对齐 center: 居中 justify:相对左右对齐。
      注意到:text-aglin 是块级属性,只能用于

        -

        等表示符里

      • 文本垂直排列 vertical-align:参数

        top 顶对齐 bottom 底部对齐 text-top 相对文本顶对齐
        text-bottom相对文本底对齐 baseline:基准线对齐 middle 中心线对齐
        sub 以下标的形式对齐 sup 以上标的形式对齐,相对于元素行高属性的百分比。

      • 文本缩进 text-indent 缩进距离

        说明:缩进距离必须是值或者%比

      • white-space

        设置值:normal:合并连续的多个空格
        pre:保留原样式
        nowrap:不换行,直到遇到
        标签

      • text-decoraition

        值:none :表示不对文本进行修饰,也是默认值,
        underline:表示对文字添加下划线
        overline:表示添加上划线
        line-through:表示对文本添加删除线
        blink:表示文字具有闪烁效果

      • text-transform文本转换

        取值范围:none:表示原有值
        capitalize:使每个字的第一个字母大写
        uppercase:大写
        lowercase:小写

      定位

      是指指定元素的位置,他是CSS-P(cascading style sheets positioning)中的内容,CSS-P是CSS的一个扩展,
      它可以用来控制任何网页元素在浏览器文档窗口中的位置。

      • postion

        设置值: 含义
        absolute 采用绝对定位(分别用四个边框来定位)
        relative 采用相对定位(也得用四个边框来设定位置)
        static 默认值

      • left/top/width/height

        说明:设置值可以是

      • z-index(也就是元素的堆叠,大的在上,小的在下。默认是按照先后顺序)

        说明:取值auto默认值,表示它遵循其父对象的定位属性;如果设置为数字,必须是无单位的正整数,可以取负值,
        但是一般为正数,一般数字为1时间是最底层。

      布局

      • visibility 可视性

        设置值:inherit:表示对象继承父本的继承性。
        visible:表示对象可见
        hidden:表示对象隐藏

      • display 设置或检索对象是否及如何显示

        设置值:block、inline、list-item、none

      • clip 可视区域
        设置值:auto表示对象不裁剪
        rect(数值表示)(一般有四个设置值:方向定位于上右下左的顺序,一般以左上角(0,0)坐标计算4个偏移数值。其中 任何一个值都可以用auto代替)

      • overflow 超出范围:
        设置值:isible 扩大浏览器
        hidden 裁剪掉多余的文本
        scroll 滚动条
        auto 当有多余的时候才显示滚动条

      • float 浮动属性

      设置值:left表示文字浮在元素左侧
      right 表示文字浮在元素右侧
      none 默认值,表示不浮动。<该属性特别重要,一定要掌握>

      • clear 表示指定一个元素周围是都允许有其他元素漂浮在它的周围。

        设置值:left ,right,none,both;指要清除本元素四周的浮动对象。

      • page-break-before 设置值:always 是否强制分页

      • page-break-after 设置值:always 打印后设置是否强制分页

      • width和height 表示层的宽度与高度。设置值为 auto|数值

      边距与填充属性

      • 复合属性margin:与边距的距离

        (margin-top margin-left margin-bottom margin-left)
        取值可以是:auto默认
        %比或者具体的值:
        说明:取值可以是一个或者两个或者三个或者四个(每个都具有不同的含义)。

      • 复合属性填充(指用白值填充):padding

        说明:和margin的用法一样。

      • border-width

        边框宽度:
        border-top-上边框宽度
        border-right-右边框宽度
        border-bottom-底边框宽度
        border-left-左边框宽度
        取值为:medium 默认宽度;thin 细边框 thick 粗边框

      • border-style

        border-top-style:上边框样式
        border-right-style:右边框样式
        border-bottom-style:底边框样式
        border-left-style:左边框样式
        取值: 含义

        none 不现实边框,为默认值
        dotted 点线(电线)
        dashed 虚线,也称短线
        solid 实线
        double 双实线
        groove 边框带有立体感的沟槽
        ridge 边框成脊形
        inset 使整个表框凹陷,即在边框内嵌入一个立体边框
        outset 使整个边框凸起,即在边框外嵌入一个立体边框

      • border-color

        设置边框的颜色:用法同上margin

      • border

        复合属性:border:边框宽度|样式|颜色
        那么还有:border-top|border—right|border—bottom|border-left

      列表

      • list-style-type 指显示于列表项前的标识符号

        取值: 含义
        none 表示不显示列表符号
        ..... ..........

      • 列表缩进 list-style-postion 列表位置描述列表在何处显示

        参数:inside 列表内容和列表标识符号处在不同垂直位置,在符号内测。
        outside 列表内容和列表标识符号处在同一垂直位置

      • list-style-image
        说明:用图片符号作为链接标题
        取值 含义
        none 表示不指定图像
        url(网页地址) 指定图片位置

      • 复合属性:list-style

        实现以上三种属性

      光标属性

      • cursor 当点击某个内容时,鼠标显示其他的图形
        style="cursor:hand" 手形
        style="cursor:crosshair" 十字形
        ..............

      滤镜属性

      • filter
  • 相关阅读:
    c#+linux+mono+Redis集群(解决无法连接Redis的问题)
    实验楼----奇妙的音乐
    实验楼----PHP大法
    实验楼----PHP代码审计(sha1、md5)
    实验楼----变异凯撒
    storm安装
    storm问题汇总
    windows下linux子系统安装
    mongoDB学习记录
    excel vba 不可查看
  • 原文地址:https://www.cnblogs.com/i969639/p/11201097.html
Copyright © 2020-2023  润新知