html进阶css（3）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

css的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许格式不仅应用于某个特定html标签元素，而且应用于其后代。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承者们</title>
<style type="text/css">
P{color:red;}
p{border:1px solid red;}
h1{color:red;}
.shige{color:green;}
</style>
</head>
<body>
<p class="first">东边日出<span>西边雨</span></p>
<P id="second">倒是无情却有情</p>
<h1 class="shige">鹅鹅鹅，
<span>曲项向天歌</span></h1>
<h1>白毛浮绿水</h1>
<h1>红掌拨清波</h1>
</body>
</html>

某种颜色应用于p标签，这个颜色设置不仅应用于p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。但还有一些css样式不具有继承性的如”border:1px solid red;“在这个例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span没起作用的。

h1{color:red;} .shige{color:green;}
有时候我们为同一个元素设置了不同的css样式代码，那么元素会启用那个css呢
h1和.shige都匹配到这个h1标签上，那么会显示那种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用那种css样式的，那种权值高的就使用那种css样式。
标签的权值为1，类选择符权值为10，id选择符权值最高位100。
"p{color:red;}/*权值为1*/"
"P span{color:green;}/*权值为1+1=2*/"
".warning{color:white;}/*权值为10*/"
"p span.warning{color:purple;}/*权值为1+1+10=12*/"
"#footer .note p{color:yellow;}/*权值为100+10+1=111*/"

层叠

|如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css具有相同权重值怎么办？|
|层叠就是在html中对于同一个元素可以有多个css样式存在当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层叠</title>
<style type="text/css">
p{color:red;}
P{color:green;}
</style>
</head>
<body>
<p class="first>从前有座山，山上有座庙，庙里有个<span>老和尚</span></p>
<P>有一天庙里来了个小和尚，小和尚对老和尚说你给我讲个故事听吧</p>
</body>
<html>

最后P中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了：内联样式表>嵌入样式表>外部样式表

重要性

我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用！important来解决

p{color：red!important；}

这时段落中的文本会显示为红色，注意：(!important）要写在分号；内。

当网页制作者不设置css样式时，浏览器会按照自己的一个套式格式来显示网页，并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。样式优先级为：浏览器默认的样式<网页制作作者样式<用户自己设置的样式，但是!important优先级样式是个例外，权值最高，高于用户自己设置的样式。

文字字体
我们可以使用css样式为网页中的文字设置字号、字号、颜色等样式属性。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css文字字体字号字颜色修改</title>
<style type="text/css">
body{font-family:"微软雅黑";}
body{font-family:"microsoft yahei";}/*字体类型*/
body{font-size:12px;color:#666;}/*字体大小与字体颜色*/
p span{font-weigh:bold;}/*字体粗体线*/
h2 a{font-style:italic;}/*字体斜体*/
h2 span{text-decoration:underline;}/*字体下划线*/
.oldprice{text-decoration:line-through;}/*删除线*/
h4{text-indent:2em;}/*字体的缩进*/
h5{line-height:2em;}/*字体的行间距，字体的行高*/
h6{letter-spacing:20px}/*文字与字母的间隔、*/
div{text-align:center;}/*对齐(center是居中，left居左，right居右*/
</style>
</head>
<body>
<P>在body中的字体会被<span>修改</span>。</p>
<p>第二种比第一种兼容性更好一点</p>
<h2>字体，字体大小，字体颜色，字体粗细.<a>字体斜杠</a><span>字体下划线</span></h2>
<h3>原件：<span class="oldprice">199</span>元现价：79元</h3>
<h4>字体的缩进，指的是一篇文章的第一行中前面会空两行空格一样</h4>
<h5>她是个既安静又开朗的姑娘，言语恰到好处，有她在，既不会觉得聒噪，也不会感到冷场。她周到地照顾着每个人的情绪，也能委婉地表达自己的观点。她散发着温和的光彩，从不灼痛别人的世界。</h5>
<h6>hello world!你好！</h6>
<div><img src="图片地址.jpg"></div>
</body>
</html>

元素分类在css中，HTML中的标签元素大体可以分成三成不同的类型：

块级元素、内联元素（也可以称为行内元素）、内联块级元素。常用的块级元素有：

"<div>/<p>/<h1>-<h6>/<ol>/<ul>/<dl>/<table>/<address>/<blockquote>/<form>"
常用的内联元素有：
"<a>/<span>/<br>/<i>/<em>/<strong>/<label>/<q>/<var>/<cite>/<code>"
常用的内联块状元素有
"<img>/<input>"

块级元素设置display:block就是将元素显示为块级元素，内联元素a转换为块状元素，从而使a元素具有块状元素a{display:block；}块级元素的特点：

1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2）元素的高度、宽度、行高以及和底边距都可设置。

3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素设置display:inline将元素设置为内联元素，方法跟上面一样。内联元素的特点：

1）和其他元素都能在一行上；

2）元素的高度、和宽度及顶部和底部边距都不可设置！

3）元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块级元素如名一样，内联块级元素就是同时具备内联，块级元素的特点。display:inline-block。转换内联块级元素的特点：

1）和其他元素都在一行上；

2）元素的高度，宽度，行高以及顶和底部边距都可设置。