您的位置：首页 > Web前端 > CSS

H5学习之16 CSS

2016-08-01 22:33 387 查看

<!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文件内代码的先后顺序问题。涉及到一个渲染的先后问题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 div布局 css

相关文章推荐

新的分享

章节导航