zoukankan      html  css  js  c++  java
  • css常用的属性方法 上篇

    自己是从java后台自学转前端的,所以平时一些简单的css+html就不写了,列出的都是新手常用的一些属性,会持续更新,大神勿喷,留给新手做个参考!
    尤其是跟我一样自学前端的。
     
     
    背景关联
    background-attachment 属性body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; }
     
    CSS 背景属性
    属性 描述
    background 简写属性,作用是将背景属性设置在一个声明中。
    background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
    background-color 设置元素的背景颜色。
    background-image 把图像设置为背景。
    background-position 设置背景图像的起始位置。
    background-repeat  
     
    缩进文本
    text-indent 属性禁止文本换行:
    p
    {
    white-space: nowrap
    }
    字间隔
    word-spacing 属性p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} <p class="spread"> This is a paragraph. The spaces between words will be increased. </p> <p class="tight"> This is a paragraph. The spaces between words will be decreased. </p>
     
     
     
    CSS列表
    CSS 列表属性(list)
    属性 描述
    list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
    list-style-image 将图象设置为列表项标志。
    list-style-position 设置列表中列表项标志的位置。
    list-style-type 设置列表项标志的类型。
     
    ,可以使用属性 list-style-type
    描述
    none 无标记。
    disc 默认。标记是实心圆。
    circle 标记是空心圆。
    square 标记是实心方块。
    decimal 标记是数字。
    decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
    lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
    upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
    lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
    lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
    lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
    upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
    hebrew 传统的希伯来编号方式
    armenian 传统的亚美尼亚编号方式
    georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
    cjk-ideographic 简单的表意数字
    hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
    katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
    hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
    katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
     
     
     
    1、border
    如果需要把俩条重复的边框显示为单条边框就使用table { border-collapse:collapse; } table,th, td { border: 1px solid black; }
     
    CSS Table 属性
    属性 描述
    border-collapse 设置是否把表格边框合并为单一的边框。
    border-spacing 设置分隔单元格边框的距离。
    caption-side 设置表格标题的位置。
    empty-cells 设置是否显示表格中的空单元格。
    table-layout 设置显示单元、行和列的算法。
     
    CSS 边框属性
    属性 描述 CSS
    outline 在一个声明中设置所有的轮廓属性。 2
    outline-color 设置轮廓的颜色。 2
    outline-style 设置轮廓的样式。 2
    outline-width 设置轮廓的宽度。 2
     
     
    属性 描述
    position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
    top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
    right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
    bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
    left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
    overflow 设置当元素的内容溢出其区域时发生的事情。
    clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
    vertical-align 设置元素的垂直对齐方式。
    z-index  
     
    static
    relative
    absolute
    fixed
    提示:
    overflow: scroll;无论框内是否放的下内容都会出现一种滚动机制;
     
    设置元素形状:
    clip:rect(0px 50px 200px 0px);
     
     
    重叠:z-index
     
     
     
    CSS 选择器参考手册
    选择器 描述
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。
    为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:
    a[href][title] {color:red;}
     
     
    根据具体属性值选择
    例子 1
     
    属性 描述 CSS
    :active 向被激活的元素添加样式。 1
    :focus 向拥有键盘输入焦点的元素添加样式。 2
    :hover 当鼠标悬浮在元素上方时,向元素添加样式。 1
    :link 向未被访问的链接添加样式。 1
    :visited 向已被访问的链接添加样式。 1
    :first-child 向元素的第一个子元素添加样式。 2
    :lang 向带有指定 lang 属性的元素添加样式。 2
     
    注释:注释:
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    zabbix--完整安装攻略
    python--8大排序(原理+代码)
    python--二分法查找
    celery生产者-消费者
    python--基础知识点梳理(之数据结构)
    mysql--事务详解
    python--基础知识点梳理(三)深浅拷贝、进线协程、os和sys、垃圾回收机制、读文件的三种方式
    python--基础知识点梳理(二)面向对象
    python--基础知识点梳理(一)数据类型、迭代生成装饰器、函数
    java 集合
  • 原文地址:https://www.cnblogs.com/lihaolh/p/6744514.html
Copyright © 2011-2022 走看看