这是我参与「第四届青训营 」笔记创作活动的的第2天
初识css
CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
引入CSS样式表
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下： <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外链式
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<!-- link是单标签 -->
<link href="CSS文件的路径" rel="stylesheet" />
</head>
CSS基础选择器
标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语
法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。 例:
<div class="mark">
<a href="#">mark</a>
</div>
<div class="jerry">
<span>jerry</span>
</div>
<style>
.mark a,
.jerry span{
color: yellow;
text-decoration: none;
}
</style>
id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例:
<body>
<!-- id选择器是唯一的,一个标签只可以有一个,一个页面中不能出现相同的id属性值 -->
<div id="div">div</div>
</body>
<style>
#div {
color: rebeccapurple;
}
</style>
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
color:red;
}
CSS字体样式属性
font-size:字体大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px
font-family:字体
font family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，样式代码如下：
<style>
div {
font-family: 微软雅黑, 宋体, 黑体, 华文彩云,sans-serif;
}
</style>
font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。 font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。 数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。 代码如下:
<style>
span {
/* blod == 700 加粗 */
font-weight: 700;
}
strong {
/* normal == 400 正常 */
font-weight: 400;
}
div {
font-weight: 700;
font-size: 32px;
}
</style>
font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，其可用属性值如下：
- normal：默认值，浏览器会显示标准的字体样式。
- italic：浏览器会显示斜体的字体样式。
- oblique：浏览器会显示倾斜的字体样式。
font:综合设置字体样式
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
注意:使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
