H5学习之16 CSS

最新推荐文章于 2022-06-26 16:26:24 发布

GOGOGOAAAA

最新推荐文章于 2022-06-26 16:26:24 发布

阅读量382

点赞数

分类专栏： h5 文章标签： html5 div布局 css

本文链接：https://blog.csdn.net/qq_29469941/article/details/52089782

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css.css" rel="stylesheet" type="text/css"/>
    <!--文件的引入-->

</head>
<body>

直接规定标签样式 body<!--直接规定系统标签里的样式,
一个所有选择通用的准则：
物理位置上的外侧的设置样式之后，如果内侧还有单独设置样式，则以内部为准。内部覆盖外部
存在物理上的包含关系时，内涵方面的上下级就不再看了。并列的话就看。
还有一种情况，如果二者不存在物理上的包并关系，他们是并列的。
也就是从内涵方面来看. 我规定了 div标签的样式 ，
然后我又设置 div标签 class为div1 的样式，这样，后者就会覆盖前者，即使没有存在物理上的包含关系.

比如，<div
-->
<h1>
    直接规定标签样式 h1<!--直接规定系统标签里的样式-->
</h1>

<ol>
    <li><strong>派生选择器</strong></li>
    <li>没被选择到，所以不是斜的</li>
    <li>我也是</li>
    <!--只有li 内的 strong 会被改变-->
</ol>

<hr/>

<div id="div1">
    id选择器
    <p>id选择器的派生选择</p>
</div>
<!--通过ID改变样式，需要注意，id值不可以重复，class却可以重复-->

<hr/>

<div class="red">
    类选择器
    <p class="blue">选择某标签中的类</p>
    <!--
    也就是说先规定是 某一个标签，
    然后所有的这个标签中的一些标签设定了类，需要找出他们，这种情况也就是说应用于 有其他标签也用了这个名字,如下
    -->
    <h2 class="blue">类名也是blue，但是没有应用到上边的样式，是因为上边是 p.blue 才可以使用</h2>

    <h3>类选择器的派生选择，同ID选择器一样</h3>

    <p>aa</p>
    <!--在这直接写了个P标签，写一个P标签CSS样式，那么会直接将 p class=blue 标签的样式也覆盖，
    误以为 .类名 标签 优先级大于 标签.类名，前者覆盖后者效果。其实不是。
    因为如果更改一下CSS里 p.blue{} 的位置，放到.red p{} 后边，就会显示蓝色了，就不会出现覆盖了。
    说明存在一个渲染前后的问题，在下边的时候看出来的。
    按现在，找到一个p.blue渲染成蓝色，然后找.red p进行渲染，会把两个p标签都找到，然后再渲染成红色。就都成红色了。
    把p.blue css放到.red p css下边，先把两个p标签都找到，渲染成红色，然后找到p.blue渲染成蓝色，就正常了。
     是因为选择器在选择的时候出现的问题。选择出现了重复。就会有这样的效果出现。
    在写CSS的时候尽量规避出现这样的 选择某一标签不精确，连带着选择了其他的一些标签。

    去做的 两个并列 div的实验来看(一个div,另外一个 div class="d2")，又没了这样的渲染顺序一说。
    我猜测，系统规定了比如 div 和div class="xx" 的这样的渲染顺序，无论CSS里先后顺序，都会先渲染所有的div 再渲染那些 有class的div

    其余的一些情况，两个选择器选择的标签有重复的时候（不管是其中一者完全属于另一者，（下边的例子，从结构，内涵上都是这样）
    还是两者互相包容，(这个例子的结构，就是一者完全属于另一者，但是从内涵来说 .类名 标签 和 标签.类名 可以互相包容，但是又有不一样的部分，互相独立)
    都有可能出现，只要有相交的部分，就会出现）。系统分不清渲染前后顺序的时候，就会按CSS里的先后渲染，
   -->
</div>
<hr/>

<div>

    <h1 title="属性选择器">属性选择器</h1><!--只要拥有title属性的都会被选择上-->

    <h1 title="shuxing">选择title属性等于某一值的元素</h1><!--只可以是英文值，中文没用-->

    <h1 title="shuxing xuanzeqi">选择title属性值中包含某一部分的元素</h1>
    <!--包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：-->
    <!--包含的一部分 必须跟别的部分用空格分开才有效。
    如果以现在这个代码来说，第二个 h1 跟 第三个 h1 都是黑的。也就是按推断来说 css 中 ~=将=覆盖了，但是！
    将第二个h1的css放到 第三个h1的css的后边，那么就会惊人的发现，~= 没有将 = 覆盖 。第二个变成了白色，第三个是黑色的。

    我大胆猜测一下，是渲染的先后顺序。CSS文件里，前边的先渲染，后边的后渲染。
    如果选择器在选择的时候，只要满足条件，就会选择上。然后进行一下渲染。
    此例子中，按现在这个代码 =shuxing 的先被渲染成白色,第二个h1变白色。
    然后继续寻找 ~=shuxing 的元素，找到了，就渲染成黑色。第二个h1和第三个h1都符合 ~=shuxing,所以再进行一次渲染，就都成黑色了。

    如果调换位置，将第二个h1的css放到第三个h1css的后边，先寻找~=shuxing 的元素，发现两个都符合，都渲染成黑色。
    然后，寻找=shuxing的元素，第二个h1符合，渲染成白色。OK完成。
    -->

    <h1 lang="en">aaa</h1>

    <h1 lang="en-us">bbb</h1>
    <!--带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：-->
    <!--跟上边的一样，也会出现覆盖问题。注意一下就好了-->

    <form name="input" action="" method="get">
        <input type="text" name="Name" value="Bill" size="20" />
        <input type="text" name="Name" value="Gates" size="20" />
        <input type="button" value="点这点这" />
    </form>
    <!--属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：-->
    <!--这个是先选择 标签，然后选择属性。 选择某标签内某属性是某值的元素-->

</div>

</body>
</html>

body{
     color: green;
     font-size: 1em;
     font-weight: bold;
     background-color: rgba(0, 12, 81, 0.85);
 }

h1{
    color: red;

}

li strong{
    font-style: italic;
}

#div1{
    color: darkblue;
    font-size: 2em;
}
#div1 p{
    color: darkmagenta;
    font-size: 1em;
}

.red{
    color: red;
}



p.blue{
    color: blue;
}

.red h3{
    color: darkgrey;
}

.red p{
    color: darkred;
}


[title]{
    color: greenyellow;
}

[title=shuxing]{
    color: beige;
}
[title~=shuxing]{
    color: black;
}

[lang=en]{
    color: darkcyan;
}

[lang|=en]{
    color: blanchedalmond;
}

input[type=text]{
    width: 150px;
    margin-bottom: 1px;
    background-color: bisque;
    font-family: Times;
    display: block;/*让物件在下一行创建*/

}
input[type=button]{
    width: 120px;
    margin-left: 35px;
    display: block;/*不加这一句，按钮也在下一行出现，不知道为啥加*/
    font-family: serif;

}

一个HTML文件一个CSS文件。

下面上具体效果图：

代码解释如下：

4部分，

第一部分就是选择某一具体的标签设置样式

body{
     color: green;
     font-size: 1em;
     font-weight: bold;
     background-color: rgba(0, 12, 81, 0.85);
 }

h1{
    color: red;

}

li strong{
    font-style: italic;
}

第二部分通过ID来选择某些元素设置样式

#div1{
    color: darkblue;
    font-size: 2em;
}
#div1 p{
    color: darkmagenta;
    font-size: 1em;
}

第三部分通过类来选择设置样式

.red{
    color: red;
}



p.blue{
    color: blue;
}

.red h3{
    color: darkgrey;
}

.red p{
    color: darkred;
}

第四部分通过属性进行选择来设计样式

[title]{
    color: greenyellow;
}

[title=shuxing]{
    color: beige;
}
[title~=shuxing]{
    color: black;
}

[lang=en]{
    color: darkcyan;
}

[lang|=en]{
    color: blanchedalmond;
}

input[type=text]{
    width: 150px;
    margin-bottom: 1px;
    background-color: bisque;
    font-family: Times;
    display: block;/*让物件在下一行创建*/

}
input[type=button]{
    width: 120px;
    margin-left: 35px;
    display: block;/*不加这一句，按钮也在下一行出现，不知道为啥加*/
    font-family: serif;

}

一些需要主要的重点都写在了注释里。

再叙述一下。

4种选择器方法来选择某些元素设置样式。

标签名，ID，类，属性。

物理意义上的内外，内优先级大于外。

如果物理上并列，那就看意义上的内外，意义范围小的要优先于范围大的

此外还有就是当选择器出现重复选择某些标签进行设置时，需要考虑一个 CSS文件内代码的先后顺序问题。涉及到一个渲染的先后问题。

GOGOGOAAAA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习之16 CSS

html>lang="en"> charset="UTF-8"> href="css.css" rel="stylesheet" type="text/css"/> 文件的引入-->直接规定标签样式 body直接规定系统标签里的样式,一个所有选择通用的准则：物理位置上的外侧的设置样式之后，如果内侧还有单独设置样式，则以内部为准。内部覆盖外部存在
复制链接

扫一扫

专栏目录