HTML5+CSS3从入门到精通 CSS3核心知识点-职坐标

HTML5+CSS3从入门到精通 CSS3核心知识点

沉沙 2018-09-17 来源：阅读 804 评论 0

摘要：本篇教程探讨了HTML5+CSS3从入门到精通 CSS3核心知识点，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5+CSS3从入门到精通 CSS3核心知识点，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

一.复杂选择器：

         1.兄弟选择器：（next）同一位置级别的元素，可称之为兄弟元素。

         语法：通过+作为结合符（selector1+selector2）

         2.通用兄弟选择器：（nextall）匹配某元素后面所有满足条件的选择器，称为通用兄弟选择器

         语法：使用~作为结合符（div~p）

二．属性选择器：

         使用元素所附带的属性用于选择器当中，作为选择器元素的条件

         语法：[属性相关内容]

                   [id]:具有id属性的所有元素

                   1.[id]

                   2.p[id][class]

                   3.p[id="p1"]  input[name="username"]

                   4.p[class~="value"]

                   5.p[class^="b"]匹配class 属性值以b 开始的p标记

                   6.p[class*="b"]匹配 class 属性值中包含 b 的 p 标记

                   7.p[class$="b"]匹配class 属性值以 b 结尾的p 标记

三．伪类选择器：

         1.目标伪类：突出显示活动的HTML锚元素

         语法：target (div:targrt)

         例：

        <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #show img{
        display: none;
    }
        #show img:target{
            display: block;
        }
    </style>
</head>
<body>
    <div id="anchor">
        <a href="#img1" style="display:block">img1</a>
        <a href="#img2">img2</a>
        <a href="#img3">img3</a>
        <a href="#img4">img4</a>
    </div>
<div id="show">
    <img src="../京东/images/ad_01.jpg" alt="logo" id="img1">
    <img src="../京东/images/ad_02.jpg" alt="logo" id="img2">
    <img src="../京东/images/ad_03.jpg" alt="logo" id="img3">
    <img src="../京东/images/ad_04.jpg" alt="logo" id="img4">
</div>

2.元素状态伪类：

                   多数用在表单元素上：

                   1.：enabled   匹配每个已启用的元素（表单元素）

                   2.：disabled  匹配每个已被禁用的元素（表单元素）

                   3.：checked 匹配已被选中的表单元素（只是用与 checkbox ，radio）

         3.结构伪类：

                   1.：first-child 匹配属于其父元素中的第一个子元素

                   2.：last-child 匹配属于其父元素中的最后一个子元素

                   3.：empty 匹配不具备子元素的元素（文本内容也算子元素）

                   4.：only-child 匹配属于其父元素中的唯一子元素

4.否定伪类：

                  作用：匹配【非】指定选择器的元素    语法：not（selector）

四.伪元素选择器：

         1.匹配处理的都是文本内容

                  1).：first-letter 首字符

                  2).：first-line  匹配首行

（以上两个选择器，行内元素无效，行内块，块级可以。）

3).：：selsetion  用于匹配用户选择的文本的样式   可以直接使用，只需要在{}中写入样式即可

五.内容生成:通过css提供的属性向html文本片段中追加新的内容

1.伪元素

：before

：after   在匹配的元素之前或之后增加新的内容

         内容生成属性content

                  取值：1.字符串，纯文本

                              2.图像，url

                              3.计数器生成数字，用于排名

         2.计数器：用于动态生成数字

1）.属性 counter-reset 用来定义计数器并声明初始值初始值默认为0   设置初始值  counter-reset：名字数值

                   注意：如果想让整个都能使用，需要将计数器定义在body选择器中

                   2.计数器值得变化（增量）

                            属性：counter-increment

                            注意：哪个元素使用计数器，放在哪个元素中做增量。增量可以为正，也可以为负

                   3.counter()函数

                            p:before{

                                     content:"文本1"counter（计数器名称）

                                     content："第"counter（计数器名称）"章"

                                      }

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*1.声明计数器*/
        body{
            counter-reset: myCounter;
        }
        /*设置计数器的增量*/
        div{
            counter-increment:myCounter1;
        }

        /*使用计数器*/
        div:before{
            content: "第"counter(myCounter)"部";
        }

    </style>
</head>
<body>
<div>西游记</div>
<div>东游记</div>
<div>南游记</div>
<div>北游记</div>
</body>

六．多列：

属性：

                  1.column-count 规范了元素被分成的列数  取值：整数

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 110px;
            border: 1px solid #ccc;
            -webkit-column-count: 3;
        }

    </style>
</head>
<body>
    <div>
        《精灵宝可梦XY》（ポケットモンスター XY）是精灵宝可梦系列动画的第五部，其蓝本是第六世代游戏《口袋妖怪XY》，主题是“美丽”“羁绊”“进化”，伴随而来的...
    </div>

2.column-gap 规范了元素列与列之间的间隔

        取值：以像素为单位 -webkit-column-gap: 40px;

         3.column-rule:列规则  设置样式等相关内容类似于border  取值：width  style color；

-webkit-column-rule: 5px solid red;

七：CSS Hack 通过CSS的属性来解决浏览器的兼容性问题DTD

         分为：标准模式，混杂模式，准标准模式

不同模式下，浏览器对css尤其是盒模型和js解析效果会产生不同

会根据doctype自动进行模式选择

触发标准模式 -<!DOCTYPEhtml>   strict.dtd

出现的几个问题，以及解决方案：

1.上边距：IE6中上边距要比其他浏览器大

         解决方案：

body{
    margin: 0px;
    padding: 0px;
}

2.居中布局：

         IE低版本中text-align可以通过所有的元素水平对齐方式（文本行内块级），其他版本不行

         解决方案:外层元素  text-align

                        内层元素添加 margin：auto

3.元素高度问题：如果内容超出了元素定义的高度，所产生的问题

         解决方案：1.统一设置元素高度和内容高度一致

                         2.overflow：hidden

4.上边距（一）：在父子元素中，在子元素里设置上边距所产生的问题。

问题：子元素的外边距会适应到父元素的外边距上

         解决方案：1.通过父元素的padding-top来替代

                            2.设置父元素的边框（可以为透明度）

border: 1px solid transparent;

CSS类内部Hack

         属性前缀：在css样式属性名前面加上一些只有特定浏览器才能识别的hack前缀：* + - # \0 \9\0 !important

技术分享

选择器Hack

         选择器前缀@mediascreen\9{....}只对IE6/7生效

HTML头部引用Hack：即IE条件注释：IE根据if条件来判断是否解析条件注释里的内容

         gt大于  lt小于  gte大于等于  lte小于等于  !

条件注释