CSS 初识

# CSS的发展历程

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

# CSS 网页的美容师

CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。

CSS的最大贡献就是： 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。 而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！

而且。。。。。 CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师，不信，你看:

ps: 你跟Angelababy只差了一个妆容的距离

有人说， 没有不漂亮的女人，只有不会打扮的女人。

我想说， 没有不好看的网页，只有不会CSS的前端。

# CSS初识

CSS(Cascading Style Sheets)美化样式

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

# 引入CSS样式表（书写位置）

## 内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

选择器

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

## 行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

....html

内容

......html

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

## 外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

```html

```

注意： link 是个单标签哦!!!

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

注意：

标签也是要写在标签里面的。href=""是css的外部链接地址

css外链式写法

##三种样式表总结（位置）

# CSS样式规则

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

在上面的样式规则中:

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

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

4.属性和属性值之间用英文“:”连接。

5.多个“键值对”之间用英文“;”进行区分。

可以用段落 和 表格的对齐的演示。

# CSS基础选择器

##标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

```

标签名 或者

元素名

```

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

标签选择器 可以把某一类标签全部选择出来 div span

## 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

```

.类名

```

标签调用的时候用 class=“类名” 即可。

```

类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器。

##多类名选择器：

我们可以给标签指定多个类名，从而达到更多的选择的目的。

注意：

1-1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。

1-2. 各个类名中间用空格隔开。

.red{}

.font{}

多类名

类名选择器 ： 这个 div 的名字 就是 nav nav 就是 div 这个 div 也是 nav

##id选择器：

1-1:id选择器使用“#”进行标识。后面紧跟id名，其基本语法格式如下：

#id名

1-2：id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

#通配符选择器

3-1：通配符 选择器使用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素；

格式： *

例如：用通配符来清除所有标记的默认边距：

* {

margin:0;

padding:0;

}

注意：

这个通配符选择器，就像我们的电影明星中的梦中情人， 想想它就好了，但是它不会和你过日子。

CSS字体样式属性

4-1：font-size：字号大小，单位 px;

例如：font-size:16px;

font-family:字体

font-family:"微软雅黑";

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

## CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

方案一： 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。

方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

| 字体名称 | 英文名称 | Unicode 编码 |

| --------- | --------------- | -------------------- |

| 宋体 | SimSun | \5B8B\4F53 |

| 新宋体 | NSimSun | \65B0\5B8B\4F53 |

| 黑体 | SimHei | \9ED1\4F53 |

| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |

| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |

| 隶书 | LiSu | \96B6\4E66 |

| 幼园 | YouYuan | \5E7C\5706 |

| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |

| 细明体 | MingLiU | \7EC6\660E\4F53 |

| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

4-2：字体的粗细：

字体加粗除了用 b 和 strong 标签之外，可以使用CSS来实现，但是CSS没有语义；

Html中：

font-weight:"属性值" normal,是表示不加粗bold 是字体加粗

css中：

数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

4-3：字体风格：

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

字体风格

font-style:normal;

normal:让斜体变正常字体;

italic:斜体;

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

4-4:字体综合设置字体样式（重点）

font属性用于对字体样式进行综合设置，其基本语法格式如下：

css

选择器

其中line-height 是行高，如果不设置就不管，

注意：顺序不能变并且font-size和font-family都不能省略

4-5：text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

总结 文本格式化标签样式

1，em 和 i 倾斜

1_1:取消倾斜：font-style=normal;

1-2：添加倾斜：font-style=italic;

2:strong 和 b

2-1:取消加粗：font-weight=normal; 或者400

2-2：添加加粗：font-weight=bold;或者700；

3，u 和 ins:

3-1:删除下划线：text-decoration:none;

3-2:添加下划线：text-decoration:underline;

4，s 和 del:

4-1:删除删除线：text-decoration:none;

4-2:添加删除线：text-decoraiton:line-through;

##后代选择器：

后代选择器又称包含选择器，用来选择元素或者元素组后代，其写法是把外层标签写在前面，内层标签写在后面，中间用空格分隔；

注意：p 一定是 div 的孩子

div p {

color: pink;

}

第二种写法

这样可以准确定位：

*/

.test p {

color: red;

}

##子代选择器：

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间用“；”分隔，

白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

比如： .demo > h3 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

##交集选择器；(用的相对来说比较少，不太建议使用。)

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如：h3.special

**记忆技巧：**

交集选择器 是 并且的意思。 即...又...的意思

比如： p.one 选择的是： 类名为 .one 的 段落标签。

##并集选择器：

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

并集选择器： 用逗号隔开，集体申明，相同样式的时候；（常用）

div,p,span {

color: red;

}

##伪类选择器：

主要是给某些选择器添加特殊效果。

类.one

伪类:link

css

为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}

我们主要学链接伪类选择器：

-:link未访问的链接

-：visited 已经访问的链接

-：hover鼠标移动到链接上

-：active选定的链接

注意：写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 love hate 爱上了讨厌 记忆法 或者 lv 包包 非常 hao

例如：css

a:link{

color: #333;

font-size: 25px;

text-decoration: none;

font-weight: 700;

}

/*鼠标经过时的颜色*/

a:hover{

color: #f10215;

}

html:

秒杀

标签显示模式：（display）

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

每个块级元素通常都会独自占一整行或者多整行，可以对其设置宽度，高度，对齐等属性，常用于网页布局和网页结构的搭建；(block-level)

常见的块元素有~、

、

、

、、

等，其中

标签是最典型的块元素。

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

行内元素（inline-level）

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有

、、、、、、、、、等，其中标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：

1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2. 链接里面不能再放链接。

行内块元素（inline-block）

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

13,标签显示模式转换 display

块转行内：display：inline;

行内转块：display；block；

块，行内元素转换为行内块：display：inline-block;

CSS样式介绍基本就完了。。。。。