CSS | css核心基础
css基础
1.css样式规则
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：
p{font-family:"Times New Roman";}
在css代码中空格是不被解析的，花括号以及分号前后的空格可有可无。所以，可以使用空格键、Tab键、回车键等对样式代码进行排版，提高代码可读性。例如：
h1{font-size:20px;color:red;}
属性的值和单位之间不允许出现空格。
2.引入css样式表
使用css修饰网页元素时，首先需要引入css样式表，常用的引入方式有3种。
（1）行内式：行内式是通过标记的style属性来设置元素的样式，其基本语法格式如下：
<标记名 style="属性1:属性值1；属性2:属性值2;属性3:属性值3;">内容</标记名>
该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式，其中属性和值的书写规范与CSS样式规则相同。行内式只对其所在的标记及嵌套在其中的子标记起作用。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS行内式</title>
</head>
<body>
<p style="font-size:14px; color:red">字体、颜色 、背景的控制及整体排版等。<p>
<p style="font-size:16px; color:blue;">通过更改CSS样式，可以轻松控制网页的表现样式。</p>
</body>
</html>
通过上面的代码可以看出来，行内式也是通过标记的style属性来控制样式的，并没有做到结构与表现的分离，所以一般很少使用。通常，只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。
`表现与结构分离`(单独表现在前后加"`")
表现:css
结构:html
（2）内嵌式：内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且使用<style>标记定义，其基本语法格式如下：
<head>
<style type="text/css">
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>
在这个语法中，<style>标记一般位于<head>标记中的<title>标记之后，也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的，把CSS代码放在头部便于提前被下载和解析，以避免网页内容下载后没有样式修饰，同时必须设置type的属性值为“text/css”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS内嵌式</title>
<style type="text/css">
h2{ text-align:center;color:red;}
p{font-family:"微软雅黑";font-size:16px;}
</head>
<body>
<h2>滕王阁序</h2>
<p>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。</p>
</body>
</html>
内嵌式CSS样式只对其所在的HTML页面生效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。
（3）链入式：链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中，基本格式语法如下：
<head> <link href="CSS文件路径" type="text/css" rel="stylesheet" /> </head>
该语法中，<link />标记需要放在<head>头部标记中，并且必须指定<link />标记的三个属性，这三个属性介绍如下：
- href：定义所链接外部样式表文件里的URL
- type：定义所链接文档的类型，在这里需要指定为“text/css”,表示链接的外部条件为CSS样式表。
- rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
