美文网首页视觉艺术
CSS:选择器、继承、权重、文本标签、列表、单位、颜色

CSS:选择器、继承、权重、文本标签、列表、单位、颜色

作者: 琉佳 | 来源:发表于2019-10-10 19:50 被阅读0次

    选择器:

          属性选择器:[属性名]:设置名称为属性名

                              [属性名="属性值"]:属性名与命名值

                              [属性名~="属性值"]:

                              [属性名|="属性值"]:

                              [属性名^="属性值"]:以属性值开头的所有行

                              [属性名$="属性值"]:以属性值结尾的所有行

                              [属性名*="属性值"]:包含属性值

          兄弟元素选择器:查找后边一个兄弟元素  .  兄弟元素 + 兄弟元素{}

                                    查找后边所有的兄弟元素  .  兄弟元素 ~ 兄弟元素{}

          子元素选择器:父元素 > 子元素{}    【ie6即以下浏览器不支持】

                              :first-child  选择第一个子标签【所有】

                              :last-child  选择最后一个子标签

                              :nth-child  选择指定位置的子元素  其中odd奇数行;even偶数行

                              :first-of-type    |同

                              :last-of-type    |下    type中指【当前类型】

                              :nth-of-type    | 选择指定类型的子元素

          否定伪类::not(选择器)  eg:p:not(.hello)  表示选择所有的p元素但class为hello的除外

    继承:指CSS中祖先元素的样式会被子元素继承。(并非所有)

              背景边框和定位不会被继承

    权重:CSS选择器选择元素时,会一元素被多元素选中、此时会看权重即优先级

              内联样式:权重是 1000

              id选择器:权重是 100

              类、属性、伪类选择器:权重是 10

              元素选择器:权重是 1

              通配符:权重是 0

              继承的样式,没有优先级

              计算权重:将一个样式的全部选择器相加

              并集选择器的优先级是单独计算的

              !important:优先级更高,优先于所有,但尽量避免

    文本标签:

          <em>:斜体 表语气强调

          <strong>:粗体

          <i>:    icon图标    可用于电商网站的小图标  【答辩重点】

          <b>

          <small>    小字体.用于底下条款等

          <cite>参考内容

          <q>短引用

          <blockquote>  长引用    如论坛引用评论

          <sup>上标(类似百度百科超链接)

          <sub>下标

          <ins>插入内容  加下划线

          <del>表删除内容

          <code>|

          <pre>  |一般code包pre结合使用

          box:

    列表:互相之间随意嵌套

          <ol>+<li>有序列表

          <ul>+<li>无序列表

          <dl><dd><dt>定义列表  dl列表 dd描述 dt内容  可互相嵌套    类似下拉列表  {list-style:none;}给ul列表设

    单位:

        长度单位:

          em:1em = 1font-size

          像素:px

          百分比%  :  针对父元素来讲,如父元素使用大小为16px,则100%就是16px,同理200%就是32px

    颜色:

          RGB(r,g,b)表示法    可用0~255或0%~100%

          直接使用颜色表示

          十六进制颜色:#6600FF  按顺序为红绿蓝  如每一组两个数字都想同,可简写为#60F  (举例用字母数字不固定)

          RGBA:比RGBA多了一个A(alpha),区间为(0~1)0为完全透明,1为不透明  RGBA(255,100,5,0.5)

    前端三大块

          结构:html

          表现:CSS

          行为:javascript

    相关文章

      网友评论

        本文标题:CSS:选择器、继承、权重、文本标签、列表、单位、颜色

        本文链接:https://www.haomeiwen.com/subject/mbnapctx.html