前端的神秘面纱,大家一步一步的揭开,是不是心情很激动啊~

话不多说,开始啦

css的继承

从父元素那集成部分CSS属性。也就是说,我只要给父元素设置样式,子元素可以集成部分属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之css继承,层叠,优先级</title>
<style type="text/css">
      /*p{color:#6F00D2;}*/
      /*div{font-size: 30px;border: 1px solid #82D900; }*/
      /*body{color:#6A6AFF;} */
      body{font-size: 5px;}

    </style>
</head>
<body>
<div>
<p>诸葛亮<br/>
<span>出师表</span>
</p>
<div><br/>
<p>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。</p><br/>
            <p>先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。</p>
            <table border="5px">
             <tr>
             <td>
             遂许先帝以驱驰
             </td>
             <td>
             三顾臣于草庐之中
             </td>
             </tr>
            </table>
   </div>
    </div>
    <h1>漫步白月光</h1>


</body>
</html>

下来我跟大家聊一下上面的代码,大家可以逐一自己测试一番先。

首先第一行代码

p{color:#6F00D2;}

当我们用这个样式的时候,我们会发现所有的P标签都边颜色了,并且P标签下的span标签也改变为同一颜色了,这就说明,父元素的颜色定义被子元素继承了

div{font-size: 30px;border: 1px solid #82D900; }

当我们用这个div标签样式的时候,我们会发现字体颜色大小的属性p标签是可以继承的,但是边框以及边框颜色的属性子标签是不能继承的

body{color:#6A6AFF;}

当我们用这个body样式的时候,估计只有很老的机器才可以看出来区别吧,因为只有IE6或者IE6以下的浏览本版本table无法集成body的属性,现在这个问题几乎可以忽略了。(如果万一有,大家用群组的方式来定义样式即可)

body{font-size: 5px;}                              h1{font-size:2em; margin:.68em0}这是h1的默认样式

子元素在集成上级元素的时候,他的继承权是比较小的,通过这段body代码我们可以得到,当h1自带样式跟body样式冲突的时候,h1依旧保持自己的样式,即为标准字体的两倍大小,即是上面代码的h1字体大小为10px

下面我为大家列出html的默认样式

head{ display: none }
body{ margin: 8px;line-height: 1.12 }      
button, textarea,input, object,select  { display:inline-block;}
ol, ul, dir,menu, dd{ margin-left: 40px }
i, cite, em,var, address{ font-style: italic }

块级元素
html, body,  div,ol, p, ul,  h1, h2,h3,h4,h5, h6, 
address,blockquote, form,
dd,dl, dt, fieldset, frame, frameset,noframes,center, dir, hr, menu, pre   
{ display: block }

列表元素
li{ display:list-item }
ol{list-style-type: decimal }
ol ul, ul ol,ul ul, ol ol  { margin-top: 0; margin-bottom: 0 }

标题 
h1{ font-size:2em; margin: .67em 0 }
h2{ font-size:1.5em; margin: .75em 0 }
h3{ font-size:1.17em; margin: .83em 0 }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0}
h5 { font-size:.83em; margin: 1.5em 0 }
h6{ font-size:.75em; margin: 1.67em 0 }
h1, h2, h3, h4,h5, h6, b,strong  { font-weight: bolder }

伪类br:before{ content: ”A” }
:before, :after{ white-space: pre-line }
:link, :visited { text-decoration: underline }
:focus{ outline: thin dotted invert }

表格
table{ display: table }
tr{ display:table-row }
thead{ display:table-header-group }
tbody{ display:table-row-group }
tfoot{ display:table-footer-group }
col{ display:table-column }
colgroup{ display:table-column-group }
td, th{ display: table-cell;}
caption{ display: table-caption }
th{font-weight: bolder; text-align: center }
caption{ text-align: center }
table{ border-spacing: 2px;}
thead, tbody,tfoot { vertical-align:middle }
td, th { vertical-align:inherit }

其它元素
blockquote{ margin-left: 40px;margin-right: 40px }
pre, tt, code,kbd, samp  { font-family: monospace }
pre{ white-space: pre}
big{ font-size:1.17em }
small, sub, sup{ font-size: .83em }
sub{ vertical-align:sub }
sup{ vertical-align:super }
s, strike, del{ text-decoration: line-through }
hr{ border: 1px inset }
u, ins{ text-decoration:underline }
center{ text-align: center }
abbr, acronym{ font-variant: small-caps; letter-spacing:0.1em }

 BDO[DIR="ltr"]  { direction: ltr; unicode-bidi:bidi-override }
 BDO[DIR="rtl"]  { direction: rtl; unicode-bidi:bidi-override } 
/*定义BDO元素当其属性为DIR="ltr/rtl"时的默认文本读写显示顺序*/
 *[DIR="ltr"]{ direction: ltr;unicode-bidi: embed }
 *[DIR="rtl"] { direction: rtl;unicode-bidi: embed } 
/*定义任何元素当其属性为DIR="rtl/rtl"时的默认文本读写显示顺序*/
 @media print { 
       h1{page-break-before: always }
       h1, h2, h3,h4, h5, h6    { page-break-after: avoid }
       ul, ol, dl{ page-break-before: avoid }
  } /*定义标题和列表默认的打印样式*/

浏览器默认样式


页边距

IE默认为10px,通过body的margin属性设置

FF默认为8px,通过body的padding属性设置

要清除页边距一定要清除这两个属性值

body {

margin:0;

padding:0;

}


段间距

IE默认为19px,通过p的margin-top属性设置

FF默认为1.12em,通过p的margin-bottom属性设

p默认为块状显示,要清除段间距,一般可以设置

p {

margin-top:0;

margin-bottom:0;

}


标题样式

h1~h6默认加粗显示:font-weight:bold;。

默认大小请参上表

还有是这样的写的

h1 {font-size:xx-large;}

h2 {font-size:x-large;}

h3 {font-size:large;}

h4 {font-size:medium;}

h5 {font-size:small;}

h6 {font-size:x-small;}

个大浏览器默认字体大小为16px,即等于medium,h1~h6元素默认以块状显示字体显示为粗体,

要清除标题样式,一般可以设置

hx {

font-weight:normal;

font-size:value;

}


列表样式

IE默认为40px,通过ul、ol的margin属性设置

FF默认为40px,通过ul、ol的padding属性设置

dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。

要清除列表样式,一般可以设置

ul, ol, dd {

list-style-type:none;

margin-left:0;

padding-left:0;

}


元素居中

IE默认为text-align:center;

FF默认为margin-left:auto;margin-right:auto;


超链接样式

a 样式默认带有下划线,显示颜色为蓝色,被访问过的超链接变紫色,要清除链接样式,一般可以设置

a {

text-decoration:none;

color:#colorname;

}


鼠标样式

IE默认为cursor:hand;

FF默认为cursor:pointer;该声明在IE中也有效


图片链接样式

IE默认为紫色2px的边框线

FF默认为蓝色2px的边框线

要清除图片链接样式,一般可以设置

img {

border:0;

}

CSS层叠

同一个标签可以定义多个样式,不冲突时多个样式可以层叠为一个,冲突时,按照不同样式规则的优先级来应用样式

h1{color: red;}
h1{color: blue;}
h1{font-size: 40px;}
...
<h1>漫步白月光</h1>

大家可以通过这个例子来学习一下css层叠,最终效果应该是漫步白月光为蓝色40px大小。

CSS优先级

行内样式>内部样式>外部样式

1.链入外部样式与内部样式表之间的优先级取决于所处位置的先后

2.最后定义的优先级最高(就近原则)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之CSS优先级</title>
<style type="text/css">
      div{color: red;}
      #cc{color: blue;}
      .ava{color: green;}
      .zise{color: purple;}
      div{color: #FF77FF;}
    </style>
</head>
<body>
<p>出师表</p>
<div>出师表诸葛亮</div>
<div id="cc">司马懿</div>
<div>吴秀波最帅</div>
<!-- ID选择器优先级大于标签选择器 -->
<!-- class选择器优先级大于标签选择器 -->
<div  id="cc">臣本布衣</div>
<div  class="ava" id="cc" >臣本布衣</div>
<!-- 我们可以发现ID选择器优先级大于class选择器 -->
<div class="ava zise">臣本布衣</div>
<div class="zise ava" >臣本布衣</div>
<!-- 我们可以发现class有两个样式,优先级取决于就近原则  -->
<div>今天是2017年最后一天,你们都不想说点什么吗?这是人类历史上唯一的一次2017年最后一天</div>
<!-- 我们可以发现同类样式引用多次,样式优先级依旧取决于就近原则 -->

</body>
</html>

CSS优先级规则

  1. 权值相同,则根据就近原则判断

  2. 权值不同,根据权值来判断,哪种css样式权值高,就使用哪种样式

CSS选择器权值
通配符选择器0
标签选择器1
类选择器和伪类10
ID选择器100
行内选择器1000

计算方法:

统计不同选择器的个数,每类选择器的个数乘以相应的权值,把所有的值相加得出选择器的权值

#cc .ava .zise div h div{color: red;}

观察上面的代码我们不难算出,上面代码包含3个标签,2个class,1个id,那么这个样式的权值就是如下

3*1+2*10+1*100=123,所以这段样式的权值是123

下面我们通过一个小例子来说明一下

	<div>
		<h2>出师表</h2>
		<p>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。</p><br/>
        <p> <b>先帝不以臣<span>卑鄙</span></b>,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。</p><br/>
        <p>后值倾覆,受任于败军之际,<b>奉命于危难之间</b>,尔来二十有一年矣。</p><br/>
	</div>

大家看上面这段话,我们如何实现给p标签下的b标签下的span标签变成蓝色呢?如果我们按照如下格式

b{color: #BE77FF;}

那么所有的b标签内的内容都变成了紫色,那么我们通过下来的方法观察一下(颠倒顺序也是根据权值来应用样式。)

	       b{color: #BE77FF;}/*1*/
	       p b{color: red;}/*2*/
	       p b span{color: blue;}/*3*/

那么现在我们实现了给span标签变成蓝色的样式,当然我们给span标签定义蓝色的样式方法有很多,不过这里是为了说明css标签选择器的权值。

我们来测试验证一番

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之CSS优先级</title>
<style type="text/css">
          /*div{color: red;}
      #cc{color: blue;}
      .ava{color: green;}
      .zise{color: purple;}
      div{color: #FF77FF;}
      h1{color: #FF00FF;}*/
       /* b{color: #BE77FF;}1*/
       /* p b{color: red;}2*/
       /*  p b span{color: blue;}3*/
      .ccava{color: #A8FF24 !important;}10 /*空格!important 优先级最高*/
      /*/*div p .ccava{color: yellow;}12*/
      #cc p span {color: red;} /*102*/
      div #ava span {color: blue;}/*102*/
      #cc p span {color: purple;}/*102*/
      div #ava span {color: blue;}/*102*/
      *{color: #FF5151;}
    </style>
</head>
<body>
<div id="cc">
<h2>出师表</h2>
<p>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。</p><br/>
        <p id="ava"> <b>先帝不以臣<span style="color: #408080">卑鄙</span></b>,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。</p><br/>
        <div>后值倾覆,受任于败军之际,<b>奉命于危难之间</b>,尔来二十有一年矣。</div><br/>
</div>
<p>出师表</p>
<div>出师表诸葛亮</div>
<div id="cc">司马懿</div>
<div>吴秀波最帅</div>
<!-- ID选择器优先级大于标签选择器 -->
<!-- class选择器优先级大于标签选择器 -->
<div  id="cc">臣本布衣</div>
<div  class="ava" id="cc" >臣本布衣</div>
我们可以发现ID选择器优先级大于class选择器
<div class="ava zise">臣本布衣</div>
<div class="zise ava" >臣本布衣</div>
<!-- 我们可以发现class有两个样式,优先级取决于就近原则  -->
<div>今天是2017年最后一天,你们都不想说点什么吗?这是人类历史上唯一的一次2017年最后一天</div>
<!-- 我们可以发现同类样式引用多次,样式优先级依旧取决于就近原则 -->
<h1>漫步白月光</h1>

</body>
</html>


大家一定要多练习啊,今天练习学习的时候我遇到一个神奇的问题,刚开始样式定义是紫色,然后做了一个权值相同的优先级蓝色,可是它们竟然不根据就近原则改变颜色,然后我重新写了一下,问题消失了,我是英文输入的,原因未知。。。