前端开发学习笔记–CSS 样式,层叠,继承

发布于 2018-04-09  324 次阅读


CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS 属性和属性值,有三种表达方式

1:元素内嵌样式

例:
<p style="color:red;font-size:50px;">一段文本</p>
析:style 是行内样式属性。color 是颜色属性,red 是颜色属性值;font-size 是字体大小属性,50px 是字体大小属性值。即在当前元素使用 style 属性的声明方式

2:文档内嵌样式

例:
<head>
      <style type="text/css">
      p {
           color: red;
           font-size: 50px;
}
      </style>
</head>
<body>
      <p>一段文本</p>
</body>
析:在<head>元素之间创建<style>元素,通过选择器的方式调用指定的元素并设置相关 CSS。

3:外部引用样式

例:
<link rel="stylesheet" type="text/css" href="style.css">
//html 文档中的代码
@charset "utf-8";
p {
color: green;
font-size: 30px;
}
//css 文档中的代码
CSS 样式保存在一个单独的.css 文件中,通过<link>元素去引入。@charset "utf-8"表明设置 CSS 的字符编码,默认是 utf-8。如果有多个.css 文件,可以使用@import 导入方式引入.css 文件。也可多写个<link>链接引入

样式表层叠:同一个元素通过不同方式设置样式表产生的样式重叠。

通过五种方式进行,如样式相同,则会产生冲突替换,其优先级顺序从低到高引入如下:

(1).浏览器样式(元素自身携带的样式);
(2).外部引入样式(使用<link>引入的样式);
(3).文档内嵌样式(使用<style>元素设置);
(4).元素内嵌样式(使用 style 属性设置)。
//可使用 important 表强制优先最高级,eg:font-style: italic !important;
样式表继承:某一个被嵌套的元素得到它父元素样式。
某一个元素并没有设置父元素相关的样式,则会使用继承机制将父元素的样式继承下来。只适用于元素的外观(文字、颜色、字体等),元素在页面上的布局样式则不会被继承,也可用强制继承:inherit
eg:
<p style="color:red;">这是<b>HTML5</b></p>
 //<b>元素继承了<p>元素的样式

浏览器样式:这个元素在这个浏览器运行时默认附加的样式。