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. VC获取当前程序运行路径
			
    /***************************************************/ /* 函数: 获取当前程序运行的路径 /* 返回: 当前程序运行路径 C:\AAA\BBB\ ...
    
			
    2. 
						
  2. C# winform 窗体弹出选择目录或文件 的对话框
			
    //弹出一个选择目录的对话框 privatevoid btnSelectPath_Click(object sender, EventArgs e) //弹出一个选择目录的对话框 { FolderBr ...
    
			
    3. 
						
  3. 清除大文本中的html标签
			
    public String clearHtmlText(String inputString) { if (StringUtils.isBlank(inputString)) { return &qu ...
    
			
    4. 
						
  4. 微信分享jssdk config:invalid signature 签名错误
			
    使用微信分享时,按照官方给的demo,使用时一直提示签名错误. 根据微信开发文档(http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd ...
    
			
    5. 
						
  5. JS判断访问设备、客户端操作系统类型
			
    先给出一个实例:判断windows.linux.android 复制以下代码另存为html文件即可. <html> <head> <title>判断操作系统< ...
    
			
    6. 
						
  6. Codeforces 358D Dima and Hares
			
    http://codeforces.com/contest/358/problem/D 题意:给出n个数,每个数取走的贡献与相邻的数有关,如果取这个数的时候,左右的数都还没被取,那么权值为a,如果左右 ...
    
			
    7. 
						
  7. LeetCode_Search a 2D Matrix
			
    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
    
			
    8. 
						
  8. unix c 10
			
    网络常识:    OSI 7层模型  TCP模型    IP和端口    IP是用来定位网络中的计算机,端口用来代表 计算机中的某个进程.    IP 有点分十进制 和 十六进制的两种表示方式,底层  ...
    
			
    9. 
						
  9. Smallest Rectangle Enclosing Black Pixels 解答
			
    Question An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel.  ...
    
			
    10. 
						
  10. 利用智能手机(Android)追踪一块磁铁（二）
			
    在上一篇博客中提到了利用磁场强度推算传感器位置坐标的公式,下面就介绍怎么利用智能手机完成磁铁的追踪(任何具有磁感应器的装置均可以),这里主要是利用Android手机. 1:程序步骤: 首先将磁铁放置在 ...
    
			
    11.