🔶跟着我后端也可以零基础入门CSS1️⃣🔶
前言
本文需要一点HTML的基础，没有基础的小伙伴可以看我的这篇文章：前端HTML万字血书大总结，来看看你入门了吗？
一、初识CSS
1.1、HTML的缺点
说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义， 比如<h1>表明这是一个大标题，用<p> 表明这是一个段落，用<img> 表明这儿有一个图片， 用<a> 表示此处有链接。很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点： 丑。我们来看看早期的Google。总结来说HTML的缺点：
-
HTML满足不了设计者的需求
-
操作html属性不方便
-
HTML里面添加样式带来的是无尽的臃肿和繁琐
1.2、CSS初识
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表），他主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
- 选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
- 属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
- 属性和属性值之间用英文“:”连接。
- 多个“键值对”之间用英文“;”进行区分。
1.3、引入CSS
上面我们说了CSS的那么多好处，那么我们应该如何引入CSS呢？我们引入CSS的方式有三种：
- 行内式（内联样式）
- 内部样式表（内嵌样式表）
- 外部样式表（外链式）
1.3.1、 行内式（内联样式）
称行内样式、行间样式，是通过标签的style属性来设置元素的样式，也就是说直接写在标签，他只适用于学习或者是小型的项目，一般不推荐使用。任何HTML标签都拥有style属性，用来设置行内式，他的语法格式：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<!--示范-->
<div style="color: red; font-size: 12px;">XiaoLin</div>
总结来说：
- style其实就是标签的属性。
- 样式属性和值中间是
:。 - 多组属性值之间用
;隔开。 - 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
- 没有实现样式和结构相分离（致命的缺点）。
1.3.2、内部样式表（内嵌样式表）
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，这种也**只适用于学习或者是小型的项目，一般不推荐使用。**不过对比于行内式的好处是他将样式和标签进行了分离，耦合度相对来说没那么高。他的基本语法如下：
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
比如我们可以这样写：
<style>
div {
color: red;
font-size: 12px;
}
</style>
总结来说：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面。
- 缺点是没有彻底分离。
1.3.3、外部样式表（外链式）
外链式是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，基本用法：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
他的常见属性和作用大概有三个。
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
需要注意的点：
- link 是个单标签。
- link标签需要放在head头部标签中，并且指定link标签的三个属性。
1.3.4、三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
1.4、CSS 三大特性
1.4.1、CSS层叠性
层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。他有两个原则，有点像长江后浪推前浪，前浪死在沙滩上。
-
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
-
样式不冲突，不会层叠
1.4.2、CSS继承性
CSS的继承性指的是子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
-
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
-
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
1.4.3、CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时分为选择相同和不同的时候：
- 选择器相同，则执行层叠性。
- 选择器不同，就会出现优先级的问题。
1.5、CSS注释
CSS的注释如下：
p {
/* 所有的字体是14像素大小*/
font-size: 14px;
}
- 点赞
- 收藏
- 关注作者
评论（0）