CSS基础——CSS样式的引入和规则【学习笔记】

客官°小女子只卖身不卖艺 2022-12-22 09:13 114阅读 0赞

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

*  行内式（内联样式）
 *  内部样式表（内嵌样式表）
 *  外部样式表（外链式）

## （1）行内式（内联样式） ##

**概念：**

称行内样式、行间样式.

是通过标签的style属性来设置元素的样式

**其基本语法格式如下：**

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。

**案例：**

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

注意：

*  style其实就是标签的属性
 *  样式属性和值中间是`:`
 *  多组属性值之间用`;`隔开。
 *  只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
 *  缺点： 没有实现样式和结构相分离

## （2） 内部样式表（内嵌样式表） ##

**概念：**

称内嵌式

是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

**其基本语法格式如下：**

<head>
    <style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style>
    </head>

**注意：**

*  style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
 *  type=“text/css” 在html5中可以省略。
 *  只能控制当前的页面
 *  缺点： 没有彻底分离

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

**概念：**

称链入式:是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

**其基本语法格式如下：**

*  注意：
    
     *  link 是个单标签
     *  link标签需要放在head头部标签中，并且指定link标签的三个属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>rel</td> 
   <td align="left">定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td align="left">定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td align="left">定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][20201117205258972.png_pic_center]

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

<table> 
 <thead> 
  <tr> 
   <th>样式表</th> 
   <th>优点</th> 
   <th>缺点</th> 
   <th>使用情况</th> 
   <th>控制范围</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>行内样式表</td> 
   <td>书写方便，权重高</td> 
   <td>没有实现样式和结构相分离</td> 
   <td>较少</td> 
   <td>控制一个标签（少）</td> 
  </tr> 
  <tr> 
   <td>内部样式表</td> 
   <td>部分结构和样式相分离</td> 
   <td>没有彻底分离</td> 
   <td>较多</td> 
   <td>控制一个页面（中）</td> 
  </tr> 
  <tr> 
   <td>外部样式表</td> 
   <td>完全实现结构和样式相分离</td> 
   <td>需要引入</td> 
   <td>最多，强烈推荐</td> 
   <td>控制整个站点（多）</td> 
  </tr> 
 </tbody> 
</table>

###  ###

# 2.CSS样式规则 #

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

具体格式如下：  
![在这里插入图片描述][20201117205617652.png_pic_center]

1.  选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
2.  属性和属性值以“键值对”的形式出现。
3.  属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.  属性和属性值之间用英文“:”连接。
5.  多个“键值对”之间用英文“;”进行区分。

[20201117205258972.png_pic_center]: /images/20221120/6693a88550f948679a5db116f3c93ff0.png
[20201117205617652.png_pic_center]: https://img-blog.csdnimg.cn/20201117205617652.png#pic_center