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）元素的高度，宽度，行高以及顶和底部边距都可设置。
												


											
html进阶css（3）的更多相关文章
	

    
						
  1. html进阶css(5)
		
    css定位机制 css有三种基本的定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在html中的位置决定. 块级框从上到下一个接一个的 ...
    
		
    2. 
						
  2. html进阶css（４）
		
    盒子模型-边框 首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> ...
    
		
    3. 
								
  3. html进阶css（2）
		
    选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
    
		
    4. 
						
  4. html进阶css（1）
		
    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...
    
		
    5. 
						
  5. HTML5总结整理
		
    (仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...
    
		
    6. 
						
  6. Matplotlib数据可视化（3）：文本与轴
		
      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
    
		
    7. 
						
  7. 【CSS进阶】试试酷炫的 3D 视角
		
    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...
    
		
    8. 
						
  8. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
		
    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
    
		
    9. 
						
  9. 2. web前端开发分享-css,js进阶篇
		
    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. http断点续传原理
			
    断点续传一是断点,一续传. 断点是在下载时,将下载文件分多片,同时进行多片一起下载,如果任务被暂停,暂停的位置就是断点. 续传就是未完成的下载再次开始时,会从上次的断点继续传送. 在下载(或上传)过程 ...
    
			
    2. 
						
  2. java socket报文通信（二）报文的封装
			
    昨天我们谈了怎么建立socket通信的服务端和客户端,今天我们就来谈一谈怎么封装报文. 什么是报文这里我就不在阐述了,不清楚的朋友可以自己去查资料.我们今天要谈的报文主要友以下几个部分组成: 3位同步 ...
    
			
    3. 
						
  3. iOS_SN_深浅拷贝( 百度的)_转载
			
    文章原地址:http://www.cnblogs.com/5ishare/p/4362459.html 深浅拷贝前提是:是实现NSCopying或者NSMutableCopying协议. 浅拷贝只是复 ...
    
			
    4. 
						
  4. C#计算当前日期为一年中的第几周
			
    方法一: private   int   WeekOfYear(string   date) { DateTime   curDay   =   Convert.ToDateTime(date); i ...
    
			
    5. 
						
  5. nyoj  最少步数
			
    算法:搜索(深度优先搜索) 描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 1,0,0,1,1,0,0,0,1 1,0,1,0,1, ...
    
			
    6. 
						
  6. Ruby和Rails开发环境安装
			
    更新包管理 sudo apt-get update 安装curl sudo apt-get install curl *安装rvm via curl \curl -L https://get.rvm. ...
    
			
    7. 
						
  7. 小安，今天学会了MySQL中查询时间的方法哦
			
    
			
    8. 
						
  8. a标签href不跳转 禁止跳转
			
    a标签href不跳转 禁止跳转 当页面中a标签不需要任何跳转时,从原理上来讲,可分如下两种方法: 标签属性href,使其指向空或不返回任何内容.如: <a href="javascri ...
    
			
    9. 
						
  9. 【iOS开发】添加子控件方式(懒加载，GCC)
			
    // // ViewController.m // GCC // // Created by admin on 15/10/7. // Copyright © 2015年 admin. All rig ...
    
			
    10. 
						
  10. nodejs+express Mvc站点
			
    nodejs+express Mvc站点 像asp.net Mvc一样开发nodejs+express Mvc站点 首先,我是个c#码农.从事Mvc开发已然4个年头了,这两年前端MVC的兴起,我也跟风 ...
    
			
    11.