006 HTML+CSS(Class036

[A] CSS文字样式

  font-family:文字类型

    只针对英文起作用的字体:Arial, "Times New Roman"...

    中英文均可识别的字体:微软雅黑,宋体...

  衬线体与非衬线体

    字体有衬线体与非衬线体之别,衬线体字体有棱有角,笔画粗细有变化;而非衬线体比较圆滑,笔画粗细相同

  通常情况下,字体样式设置为多种,以防计算机中不存在某种字体。

  

  font-size:字体大小

    属性值:数值(px) / 单词(small,large......)

  font-weight: 字体粗细模式

    属性值:

      1. 单词设置  normal(正常)  bold(加粗)   

      2. 数值设置  (100,200,......900,其中100-500为正常,600-900为加粗效果)

  font-style:字体样式

    属性值:normal(正常)    italic(斜体,只能操作具备倾斜字体属性的字体),oblique(斜体,较少用,可以操作任何字体)

  color:颜色

[B] CSS段落样式

  1. text-decoration: 文本修饰

    可选值:underline  下划线

        overline    上划线

        linethrough    删除线

        none    不添加任何装饰

    【注】上划线,下划线,删除线可同时设置,中间用空格隔开即可

  2. text-transform:文本大小写(只针对英文段落)

    可选值:lowercase  全部改为小写

        uppercase  全部改为大写

        capitalize   首字母改为大写

  3. text-indent:首行缩进

    可选值:20px    像素值,若缩进值与字体大小值相同,则缩进一个字。以此类推

        em单位    相对值,一个em永远跟字体大小相同,1em则缩进一个字,2em缩进两个字,以此类推

  4. text-align:文本对齐方式

    可选值:left(左对齐),right(右对齐),  center(居中对齐), justfy(两端对齐)

  line-height:定义行高,即一行文字的高度,默认上边距和下边距相同,行高根据字体大小而变化

    可选值:

      20px  像素值大小

  

  5. letter-spacing:10px  定义字之间的间距

  6. word-spacing:   10px  定义词之间的间距(只针对英文)

  

  7. 英文和数字的折行问题:
    1. word-break: break-all    非常强烈的折行,即一个长单词会被这段,一定不会超出边界

    2. word-wrap:  break-word    并不那么强烈的折行,单词不会被折断,若某个单词过长,可能会超出边界

[C] CSS复合样式

    一个CSS属性控制一种形式,叫做单一样式;

    一个CSS属性控制多种形式,叫做复合样式;

  background, border,font......

[D] CSS选择器

  1. ID选择器  # + id号,如  #id001{......}

      【注】id在页面中事为唯一值,不能重复

  2. class选择器  预设elem{......}    调用时 class = "elem"

  3. 标签选择器  标签名{.....}    如:div{......}, span{......}......

  4. 层次选择器  

      后代   M   N{......}   定义标签 M 内部的 儿子标签 N 的样式,并往内部深入,即包含 标签N 内部的所有N样式

      父子  M > N{......}     定义标签 M 内部的 儿子标签 N 的样式,不在深入,即不包含 标签N 内部的所有N样式

      兄弟  M ~ N{......}     定义标签 M 下面的 兄弟标签 N 的样式,上面的不管

      相邻  M + N{......}     定义标签 M 下面的一个相邻的 N 样式,上面的不管,下下面的也不管

  5. 属性选择器

    div[class]{......}      定义div中带有class属性的标签的样式

    div[class = "abs"]{......}    定义div中类别名为abs的标签的样式    

         【注】div[class *= "abs"]{......}定义div中类别名为 包含字符串 abs 的标签的样式    

                = 表示完全匹配

                *= 表示部分匹配

                ^= 表示开始匹配

                ¥= 表示结束匹配

    div[class][id]      组合匹配,定义既有 class 属性,也有 id 属性的标签的样式

  6. 伪类选择器  div:伪类{......}

      CSS伪类用于向某些元素添加特殊的效果,一般用于初始样式添加不上的时候,用伪类来添加。

    1. 通过伪类添加样式

     : link  访问前的样式  (只能添加给 a 标签)

     : visited  访问后的样式  (只能添加给 a 标签)

     : hover   鼠标移入时的样式,可以添加给任何标签

     : active 鼠标按下时的样式,可以添加给任何标签

    【注】后面三个伪类里面的属性中重复的会覆盖之前的,没有的,保持原样不变。

    【注】网站一般只设置两个伪类,即 a{......}  和  a: hover{......}

    2. 通过伪类添加一段文本内容,并给该段文本内容设置好样式

      M:after{content: "文本内容";color:red}  在标签 M 内部内容的尾部添加文本内容,并可以设置样式

      M:before{content: "文本内容";color:red}  在标签 M 内部内容的头部添加文本内容,并可以设置样式

    3. 表单相关伪类

      M: checked{......}    当表单的属性,如复选框被选后时的样式

      M: disabled{......}    当表单的属性,如复选框未被选后时的样式

      M: focus{......}      当表单的属性,如输入框被选中时的样式

  7. 结构性伪类选择器

    li: nth-of-type(){......}                                  li: nth-child(){......}

      可选值:数值  如 2 表示定义第二个类型为 li 的标签的样式                可选值:数值  如 2 表示在 存在 li 的这个层次中的第二个标签,即往下数第二个

          n的表达式,如 2n 表示偶数项(注:n 的取值从 0 到正无穷)                 n的表达式  如 2n 表示偶数项(注:n 的取值从 0 到正无穷)

    li: first-of-type(){......}  

      可选值:数值 和 n 的表达式,表示定义在 li 标签存在的该层的第一个 li 标签的样式

    li: last-of-type(){......}

      可选值:数值 和 n 的表达式,表示定义在 li 标签存在的该层的最后一个 li 标签的样式

    li: only-of-type(){......}

      可选值:数值 和 n 的表达式,表示定义在 li 标签存在的该层的唯一的一个 li 标签的样式,当该层存在多个 li 标签时不起作用

  【注】伪类还有很多,继续探索

原文地址:https://www.cnblogs.com/carreyBlog/p/12983939.html