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 标签时不起作用

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

  • 相关阅读:
    最长k可重区间集问题【网络流24题】
    分配问题 【网络流24题】
    航空路线问题 【网络流24题】
    最长不下降子序列问题 【网络流24题】
    数组去重
    项目选题报告(团队)
    关于DLL的创建与使用简单描述(C++、C#)
    原型设计(结对第一次)
    团队展示(团队)
    第二次作业——个人项目实战
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/12983939.html
Copyright © 2011-2022 走看看