谢罪：今天起晚了= =！
文章目录
- 什么CSS？
- css样式规则
- CSS核心基础
- 行内式也称为内联样式
- 内嵌式
- 链入式
- 导入式
- 选择器
- 标记选择器
- 类选择器
- id选择器
- 通配符选择器
什么CSS？
CSS为层叠样式表 是修饰HTML用的。
当使用HTML制作网页时，可以使用标记的属性对网页进行修饰，但是存在很大的不足。如果希望网页美观大方，并且升级轻松，维护方便，就需要使用CSS，实现结构与表现得分离。
css样式规则
选择器{属性：属性值；}（是键值对之间得关系）
p{font-size:18px;color:red;} CSS核心基础
要想使用CSS修饰网页，就需要在HTML文档引入CSS样式表。CSS提供了四种引入方式。
行内式也称为内联样式
是通过标记的style属性来设置元素的格式。
<标记名 style = “属性1：属性值；”>内容</标记名>
该语法中style是标记的属性， 实际上任何HTML标记都拥有style属性，用来设置行内式。
其中属性和值的书写规范与CSS样式规则相同， 行内式只对其所在的标记及嵌套在其中的子标记起作用。
一般是在临时修改某个变量时起作用。
内嵌式
ps:
内嵌式只对其所在的HTML有效。
浏览器时从上到下解析代码的，把CSS代码放在头部便于提前被下载和解析。
同时内嵌式适于单个页面使用，如果是多个页面的话内嵌式不适用于重用形式
<head>
<style type = "text/css">
选择器{属性:属性值1;}
</style>
</head> 内嵌式
实例
<h>
<t>sdfsf</t>
<s>
p{}
h1{}
</s>
</h> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS内嵌式</title>
<style type = "text/css">
h2{text = align:center;}
p{font-size:16px; color :red; text-decoration:underline;}
</style>
</head>
<body>
<h2>内嵌式css样式</h2>
<p>使用style标记可定义内嵌式css样式表， style标记一般位于head头部标记中，title标记之后。</p>
<p>青岛农业大学</p>
</body>
</html> 链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中， 通过标记将外部样式表文件链接到HTML文档中。
<head>
<link href = "CSS文件的路径" type = "text/css" rel = "stylesheet" />
</head> PS：一定要指定link标记的三个属性！！！
href：
定义外部链接的url 可以是相对路径，也可以是绝对路径。
type:
定义链接文档的类型，在这里要指定为**“text/css”**表示链接的外部问件为CSS样式表。
牢记：：type = “text/css”
rel：
定义当前文档和被链接文档之间的关系。
表示被链接的文档是一个样式表文件。
案例演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链入式演示</title>
<link href="css/lianrush.css" type = "text/css" rel="stylesheet"/>
</head>
<body>
<h1>链入式22222</h1>
<p>Textssssss</p>
</body>
</html> h1{text-align:center;}
p{font-size:16px;color:red;} 导入式
导入式跟链入式基本相同，但两者的加载时间和顺序不同。
当一个页面被加载时，
<link/>
标记引用的样式表将同时加载，而@import引用的css样式表会等到页面全部下载完后而被加载。
这样的话，当用户的网速比较慢时，会先显示没有CSS修饰的页面。这样用户体验会变差，顾大多数选择链入式。
选择器
标记选择器
语法格式
优点：能快速为页面中同类型的标记统一样式。
缺点：不能设置差异化样式= = 。
类选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类选择器</title>
<style type="text/css">
.red{color:red}
.green{color:green}
.font22{font-size:22px}
p{text-decoration:underline;font-family:"微软雅黑";}
</style>
</head>
<body>
<h2 class = "red">标题文本</h2>
<p class = "green font22">段落一文本内容</p>
<p class = "red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>
</html> id选择器
id选择器使用“#”进行标识， 后面紧跟id名。
其实跟class的作用差不多.只是要变成#,并且
id=“font-24”.
但要注意id选择器只能同时定义一个效果。
同一个id不能多次使用，但浏览器不报错，意义呢？
通配符选择器
通配符选择器用*号表示，它是所有选择器中作用最广的，能匹配所有的元素。
*{ }