CSS简介，基础选择器，文本属性，引入方式

一.CSS简介

CSS的主要使用场景就是美化网页，布局页面的.

1. HTML的局限性

1.1 说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。

1.2 很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。

1.3 虽然HTML可以做简单的样式，但是带来的是无尽的臃肿和繁琐…..

2. CSS-网页的美容师

2.1 CSS是层叠样式表(Cascading StyleSheets)的简称.有时我们也会称之为CSS样式表或级联样式表。

2.2 CSS 是也是一种标记语言 HTML CSS.

CSS主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

2.3 CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更

3.CSS语法规范

3.1 使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则。

3.2 CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

•选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

•属性和属性值以“键值对”的形式出现

•属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

•属性和属性值之间用英文“：”分开

•多个“键值对”之间用英文“；”进行区分

4.CSS 代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式.

4.1样式格式书写

a.紧凑格式

h3f color: deeppink; font-size: 20px;
b.展开格式

1. h3 {
2. color: pink;
3. font-size: 20px;
4. }

强烈推荐第二种格式，因为更直观。

4.2样式大小写

1. h3 {
2. color: pink;
3. }
5. H3 {
6. COLOR: PINK;
7. }

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

5.空格规范

1. h31 {
2. color:pink
3. }

（1）属性值前面，冒号后面，保留一个空格
（2）选择器（标签）和大括号中间保留空格

6.CSS 选择器的作用

选择器(选择符)就是根据不同需求把不同的标签送出来这就是选择器的作用。
简单来说，就是选择标签用的作用。

以上CSS做了两件事：

（1）找到所有的h1标签。选择器(选对人)。

（2）设置这些标签的样式，比如颜色为红色(做对

7.选择器分类

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。

•基础选择器是由单个选择器组成的
•基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

二.CSS基础选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选择所有的标签，比如p	不能差异化选择	较多	p{color:red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav{color:red;}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次		#nav{color:red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况适用	*{color:red;}

1.字体系列

CSS使用font-family属性定义文本的字体系列。

p i font-family:"微软雅黑”；

div (font-family:Arial,"Microsoft Yahei"，"微软雅黑”；

•各种字体之间必须使用英文状态下的逗号隔开

•一般情况下，如果有空格隔开的多个单词组成的字体加引号.

•尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

•最常见的几个字体：body{font-family.‘MicrosoftYaHei’,tahoma,arial,‘Hiragino Sans GB;’}

2.字体粗细

CSS使用font-weight属性设置文本字体的粗细。

1. p {
2. font-weight:bold
3. }

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold 注意这个数字后面不跟单位

•学会让加粗标签(比如h和strong等)不加粗，或者其他标签加粗

•实际开发时，我们更喜欢用数字表示粗细

 3.文字样式

CSS使用font-style属性设置文本的风格。

属性值	作用
normal	默认值，浏览器会显示标准的字体样式font-style:normal;
italic	浏览器会显示斜体的字体样式。

注意：平时我们很少给文字加斜体，反而要给斜体标签(em，i)改为不倾斜字体。

三.文本属性

属性	表示	注意点
color	文本颜色	我们通常用十六进制 比如而且是简写形式#fff
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线underline 取消下划线none
line-height	行高	控制行与行之间的距

四.CSS引入方式

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	完全实现结构和样式相分离	需要引入	最多，吐血推荐 控制多个页面