zoukankan      html  css  js  c++  java
  • 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 标签时不起作用

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

  • 相关阅读:
    Representation Data in OpenCascade BRep
    Render OpenCascade Geometry Surfaces in OpenSceneGraph
    Render OpenCascade Geometry Curves in OpenSceneGraph
    OpenCascade Shape Representation in OpenSceneGraph
    Geometry Surface of OpenCascade BRep
    Geometry Curve of OpenCascade BRep
    Tyvj2017清北冬令营入学测试
    Spfa算法模板
    洛谷1016 旅行家的预算
    洛谷1290 欧几里得的游戏
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/12983939.html
Copyright © 2011-2022 走看看