• Css + div 常用CSS标签及属性


    CSS中的长度
    绝对单位:几乎不用在网页中
    in 英寸      1in = 2.54cm
    cm 厘米    1cm = 0.394in
    pt 磅        1in = 72pt
    pc pica      1in = 6pc
    相对单位:较常用
    em   1em = 相应字体的font-size值
    ex    1ex = 相应字体中的小写x字母的高度值,较难求得,一般取0.5em
    px    最为常用的
    CSS中的元素分类
    display   设定元素所属类别,不可继承
    none(设定为不显示在屏幕上)
    block(块级元,包括 P,H1-H6,list,div,body)
    inline(内联元,包括 a,em,span)
    list-item(列表元,如 LI)
    颜色与背景类
    color        设置文字颜色   
    #rgb    #rrggbb   rgb(255,255,255)    rgb(100%,100%,100%)
    H1{color:red}
    H1{color:#f00}
    H1{color:#ff0000}
    H1{color:rgb(255,0,0)}
    H1{color:rgb(100%,0%,0%)}
    background-color    设置背景颜色,格式同上;不可继承,可用于所有元
    BODY{background-color:red}
    BODY{background-color:#f00}
    BODY{background-color:#ff0000}
    BODY{background-color:rgb(255,0,0)}
    BODY{background-color:rgb(100%,0%,0%)}
    background-image     设置背景图片,默认为none,不可继承,可用于所有元
    url(imageURL)   none
    body{backround-image:url(back.jpg);}
    background-repeat    设置背景图片是否重复排列,不可继承,用于所有元
    repeat(XY轴均重复)   repeat-x(X轴重复排列)   repeat-y(Y轴重复排列)   No-repeat(不重复排列,默认值)
    BODY{background-repeat:repeat-x;}
    BODY{background-repeat:No-repeat;}
    background-attachment   设定背景图片是否卷动,不可继承,用于所有元
    scroll(随网页卷动,默认值)   fixed(不随网页卷动)
    BODY{background-attachment:fixed;}
    background-position   设定背景图片或背景颜色开始显示的位置,不可继承,用于块级元和可替换元
    top,buttom,left,right,center(用关键字)
    70px 10px(用长度值)
    50% 30%(用百分比)
    BODY{background-position:right top;}
    BODY{background-position:50px 10px;}
    BODY{background-position:20% 50%;}
    background   定义背景综合属性,不要求顺序,各属性值以空格分开
    BODY{background:#ffcc00 url(bg.jpg) fixed center}
    字型类
    font-family    设置字型属性,取值可以是任何字型名称,缺省为浏览器内定字型,可以设多个以逗号(,)分开,有空格的英文字型可用单引号或双引号括起来。可继承,用于所有元
    P{font-family:宋体,楷体,黑体,"Time New Rom";}
    font-style   设定字型样式,可继承,用于所有元
    Normal(正常,默认值)   italic(斜体)   objlique(直斜体)   
    P{font-style:italic;}
    font-variant    需要特定的字体配合,可继承,用于所有元
    Normal(默认)   small-caps(如果是中文字型则将字型缩小显示,如果是英文则全部改为较小的大写)
    H3{font-variant:small-caps;}
    font-weight 设定字体粗细,可继承,用于所有元
    Normal(默认)   bold   bolder   lighter   100   200...900
    由于浏览器支持程度不同,一般只用normal和bold两种属性
    P{font-weight:bold;}
    font-size 设定字体的大小,可继承,用于所有元
    绝对大小:xx-small   x-small   small   medium(默认值)   large   x-large   xx-large;
    相对大小:larger   smaller
    数字表示可用单位:磅(pt),像素(px),英寸(in),厘米(cm);
    亦可用百分比表示
    H2{font-size:36pt;}
    P{font-size:200%;}
    font   设定字型的综合属性,必须含有字体名称和字体大小,顺序如下
    {font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}
    文字类
    letter-spacing   设定文字间距,默认为0,可为负值,可继承,用于所有元
    P{letter-spacing:5pt;}
    text-decoration 设定文字加上下划线、删除线等效果,不可继承,用于所有元
    none(无,默认值)     underline(下划线)     overline(上划线)      line-through(删除线)   
    vertical-align   设定文字或图片垂直方向的对齐方式
    baseline(默认值)   sub(下标)   super(上标)   top(垂直向上对齐)   middle(垂直居中)   bottom(垂直向下对齐)   百分比(相对于行高,可为负值)
    text-transform   转换英文字母大小写,可继承,用于所有元
    none(默认值)   capitalize(首字母大写)   uppercase(所有英文字母大写)   lowercase(所有英文字母小写)
    text-align 设置文字的水平对齐方式,可继承,用于块级元
    left(左对齐)   right(右对齐)   center(水平居中)   justify(左右对齐)
    text-indent   设定标记元素内文字的首行缩进或配合margin-left属性设定首行凸排,可为负值,可继承,用于块级元
    line-height   设定行高,声明方式有标准行高、固定值表示法、百分比行高(相对于字体尺寸)、字型大小比例行高等,可继承,用于所有元
    white-space   设定空白符处理方式,不可继承,用于块级元
    pre(不忽略块中的空白符)   nowrap(文字不在块中自动换行)   normal(忽略空白符,默认值)
    列表类
    list-style-type   有序列表的编号方式(供标记使用),可继承
    none:无编号 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母
    list-style-type  无序列表的符号样式(供使用),可继承
    none:无符号 disc:实心圆符号 circle:空心圆符号 square:实心方形符号
    list-style-image  无序列表的自定义符号样式,可继承
    url(图片名称)   none(默认值)
    UL{list-style-imag:url(dd.gif);}
    list-style-position 设置列表清单符号缩排属性,可继承
    outside(凸排,默认值)   inside(缩排)
    UL{list-style-imag:url(dd.gif); list-style-position:outside;}
    list-style   列表清单项目的综合设定,属性之间用空格隔开
    UL{list-style-imag:url(dd.gif) inside;}
    边界及其相关类
    margin   标记元素边界值的综合设定,可为负值,不可继承,用于所有元。应用于块级元时,纵向相邻边界被压缩/重叠;应用于内联元时,不影响文本的行高。
    亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。 声明4个值,其顺序为上、右、下、左边界,如:DIV{margin:12pt 15pt 20pt 16pt;}
    声明3个值,其顺序为上、右、下,缺少的左边界取其对边(右),如:DIV{margin:12pt 15pt 16pt;}
    声明2个值,其顺序为上、右,缺少的下、左边界取其对边,如:DIV{margin:12pt 15pt;}
    声明1个值,则4个边界同一个值,如:DIV{margin:15pt;}
    padding   设定标记内容与标记边框之间的留白的综合设定,不能为负值,不可继承,用于所有元。也可分开设定padding-top、padding-right、padding-bottom、padding-left各值。
    border-width   标记元素边框宽度的综合设定。 也可分开设定border-top-width、border-right-width、border-bottom-width、border-left-width各值
    border-color   标记元素边框颜色的综合设定(规则类似于margin属性)。颜色取值见color属性。 也可分开设定border-top-color、border-right-color、border-bottom-color、border-left-color各值
    border-style 标记元素边框样式的综合设定(规则类似于margin属性)。边框样式有none(默认值),dotted,dashed,solid,double,goove,ridge,inset,outset等。 也可分开设定border-top-style、border-right-style、border-bottom-style、border-left-style各值
    border   标记元素4个边框的综合设定,可以分别声明边框宽度、边框样式、和边框颜色
    DIV{border:5pt solid #ff0000;}
    width   设定标记元素的宽度
    height   设定标记元素的高度
    float   设定标记元素与文字间的相对位置(文字绕排方式),不可继承,用于所有元
    none:以默认方式显示
    left:标记元素靠左,文字在右边绕排
    right:标记元素靠右,文字在左边绕排   
    clear 设定标记元素与文字间的相对位置(与float不同的是标记元素两边都不绕排),不可继承,用于所有元
    none:以默认方式显示;
    left:标记元素靠左,右边无文字绕排;
    right:标记元素靠右,左边无文字绕排;   
    定位
    z-index 设定标记元素的堆叠层次,取值为整数,也可以是负数,数值大的在上层,不可继承,用于定位元
    visibility 设定标记元素是否可见,不可继承,用于所有元
    inherit:取默认值 visible:可见 hidden:不可见(隐藏) collapse
    position   设定定位样式,不可继承,用于所有元
    static(默认值)   relative(相对定位)   absolute(绝对定位)   fixed   inherit
  • 相关阅读:
    基于 kubeadm 搭建高可用的kubernetes 1.18.2 (k8s)集群- 四 部署 dashboard 2.x
    基于 kubeadm 搭建高可用的kubernetes 1.18.2 (k8s)集群- 三 集群可用性测试
    基于 kubeadm 搭建高可用的kubernetes 1.18.2 (k8s)集群二 搭建高可用集群
    基于 kubeadm 搭建高可用的kubernetes 1.18.2 (k8s)集群一 环境准备
    git 多用户多仓库配置
    百度地图结合ECharts实现复杂覆盖物(Overlay)
    【简洁易懂】CF372C Watching Fireworks is Fun (单调队列优化dp)
    博客上线测试
    Google Guava14.0 瓜娃学习笔记
    Lucene 4.7 学习及实例demo
  • 原文地址:https://www.cnblogs.com/lavenderzh/p/1130710.html
Copyright © 2020-2023  润新知