14.CSS入门
第十二章 CSS入门
一、使用CSS
二、三种方式
1、元素内嵌样式： // <p style="color:red;font-size:50px;">这是一段文本</p>
2、文档内嵌样式：在<head>元素之间创建<style>元素，通过选择器的方式调用指定的元素并设置相关的CSS。
例：<head>
<meta charset="utf-8">
<title>CSS入门</title>
<style type="text/css">
p{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>这是一段文本</p>
</body>
3、外部引入样式：如果有多个CSS文件，可以使用@import导入方式引入。css文件，只不过，性能不如多个<link>链接
例：
（1）第一个文档为 index.html
<head>
<meta charset="utf-8">
<title>CSS入门</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css"></style>
</head>
<body>
<p>这是一段文本</p>
</body>
（2）需要在创建一个文档，为 style。css
@charset "utf-8"; //如果不写utf-8则默认、
//@import "text.css";
p{
color: red;
font-size: 30px;
}
（3）第三个文档需要让第一个文档中的“文本倾斜” text.css
@charset "utf-8";
b{
font-style:italic;
}
三、层叠和继承 // <p>这是一段<b>文本</b><bp>
（1）样式表层叠：指同一个元素通过不同方式设置样式表产生的样式叠加。
（2）样式表继承：指的是某个被嵌套的元素得到他的父元素样式。
1、浏览器样式：
例、<b>b元素本身隐含加粗效果</b>
<b style="font-weight:normal;">去除b元素的加粗效果</b>
<span style="font-weight:bold;">span没有隐含，但可以设置加粗效果</span>
2、样式表层叠：如果某一低级想替换高级，并且不删除高级，则在低级后面加上“！important；” //color:red !important;
以下优先级是从低到高：
（1）、浏览器样式（元素自身携带的样式）
（2）、外部引入样式（使用<link>引入的样式）
（3）、文档内嵌样式（使用<style>元素设置）
（4）、元素内嵌样式（使用style属性设置）
3、样式的继承：样式的继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则不会被继承，
如果想继承样式，则必须使用强制继承：inherit
例： <head>
<meta charset="utf-8">
<title>CSS入门</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
p{
color:green;
border:1px solid blue;
}
b{
border:inherit;</style>
</head>
<body>
<p>这是一段<b>文本</b></p>
</body>
