css入门

 

 

<!-- 重点

  　　在css里面可以导入另一个css样式 ,如下代码, 可以先写个p标签的css,然后在里面嵌套一个b的css: 用第一行(@ import"test.css ) ,第二行下b{....},其实第二个css直接就可以嵌套在代码页,写两个link,一般写多个好-->
　　　　　　 <p><b>加粗</b></p>

层叠和继承

所谓的样式表层叠:指的是同一个元素通过不同方式设置样式表产生的样式重叠。样式 表继承:指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式,是这 个元素在这个浏览器运行时默认附加的样式。  可以是相同的冲突,也可以是不同的重叠.

 

1浏览器样式 对比

<span style="font-weight:bold;">span元素没有隐含，但可以设置它加粗因为加了style</span>
<b>加粗了</b>
<b style="font-weight:normal;">去除b元素的隐含样式,这是用的冲突的方法,normal是正常的意思</b>

三个css的比较, 优先级不同,相同的字体和颜色被冲突掉了,而加粗(font-weight: bold)和斜体(font-style: italic)被被叠加了

2在外部引入样式  css中,
p {
color: red !important;
font-size: 20px !important;
font-weight: bold;
}
3在style中,文档内嵌样式
p {

color: green;
font-size: 30px;
font-style: italic;

}
4在行中,元素内嵌样式
<p style="font-size:50px;color:orange;">我要叠加三种定义样式的方式</p>

 

重点

   link和style的优先级是一样的,但跟位置有关, 如果link在style的上面,则优先级会高点.

强制优先级

   希望外部引入的优先级高,可用 !important (强制优先级)

      p{

          color:red !important;   // 在  ;语句   前加入 !important 

      　　font-size: 20px;

 　　　　font-weight:bold;

           

      }

 继承   

      以下结果是  这是  和 HTML5都变红了, b 继承了p的属性.     

     但是不继承框架,如p中加了"border: 1px solid orange;" 显示结果如图;但是b没有继承上

所以b要么重新写,或者强制继承   "border: inherit" 但是 inherit 只能继承上一级,如果 加入<p><span><b>有边框么</b></span></p>,则不会继承.

       b{border: inherit}

 

 

 css: 

p {
color: red;

}

body:

<p>这是<b>HTML5</b></p>