前端笔记（3）css，选择器，文字文本属性，外观属性

╰半夏微凉° 2022-10-23 08:28 192阅读 0赞

### CSS样式表（1） ###

*  （1）css概念
 *   *  引入css的三种方法
     *   *  行内式（内联样式）
         *  内部样式表（内嵌样式表）
         *  外部样式表（外链式）
 *  （2）css选择器
 *   *  css基础选择器
     *   *  标签选择器
         *  类选择器
         *  id选择器
         *  通配符选择器
 *  （3）css文字文本样式
 *   *  font字体
     *   *  字体风格
         *  字体粗细
         *  字号大小
         *  字体
 *  （4）css外观属性
 *   *  文本颜色
     *  文本水平对齐方式
     *  行间距
     *  首行缩进
     *  文本修饰

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]

# （1）css概念 #

`CSS（Cascading Style Sheet）`，CSS样式表或层叠样式表（级联样式表）

**作用**

*  设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
 *  css以html为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式

## 引入css的三种方法 ##

--------------------

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

**概念**

*  行内样式、行间样式
 *  通过标签的style属性来设置元素的样式

**基本语法**

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

多组属性值之间使用"`;`"隔开

--------------------

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

**概念**

*  内嵌式
 *  将CSS代码集中写在HTML文档的head头部标签中，并用style标签定义

**基本语法**

只能控制当前页面

--------------------

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

**概念**

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

**基本语法**

*  单标签
 *  `link标签`放在`head头部标签`中，并指定link标签的三个属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>rel</code></td> 
   <td>定义当前文档与被链接文档之间的关系，<code>"stylesheet"</code>表示一个样式表文件</td> 
  </tr> 
  <tr> 
   <td><code>type</code></td> 
   <td>定义所链接文档的类型，<code>"text/css"</code>表示css样式表</td> 
  </tr> 
  <tr> 
   <td><code>href</code></td> 
   <td>定义所链接外部样式表文件的<code>URL</code></td> 
  </tr> 
 </tbody> 
</table>

# （2）css选择器 #

**作用**  
找到特定HTML页面元素

--------------------

## css基础选择器 ##

### 标签选择器 ###

**概念**  
`HTML标签名`称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

**语法**

标签名 { 属性1:属性值1; }

**作用**  
把某一类标签全部选择出来

--------------------

### 类选择器 ###

使用"`.`"（`英文点号`）进行标识，后面紧跟类名

• 类名选择器

.类名 { 
        属性1:属性值1;
    }

• 标签

**多类名选择**（一个标签内部只能有一个`class`）

.font100 { 
        font-size: 100px;
    }
    .G { 
      color: blue;
    }
    .two_o { 
      color: red;
    }
    .three_o { 
      color: orange;
    }
    .l { 
      color: green;
    }

--------------------

### id选择器 ###

使用`#`进行标识，后面紧跟`id名`  
• id选择器

#id名 { 属性1:属性值1;}

• 标签

元素的id值是唯一的

--------------------

### 通配符选择器 ###

用\*号标识  
**基本语法**

* { 属性1:属性值1;}

会匹配页面所有的元素，降低页面响应速度

*  尽量少用通用选择器`*`
 *  尽量少用`ID选择器`
 *  不使用无具体语义定义的标签选择器`div span`

--------------------

# （3）css文字文本样式 #

## font字体 ##

### 字体风格 ###

.line_2 { 
            font-style: italic;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>normal</code></td> 
   <td>默认值，浏览器会显示标准的字体样式 font-style: normal;</td> 
  </tr> 
  <tr> 
   <td><code>Italic</code></td> 
   <td>浏览器会显示斜体的字体样式</td> 
  </tr> 
 </tbody> 
</table>

### 字体粗细 ###

.line_2 { 
        font-weight: 700;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>normal</code></td> 
   <td>默认值（不加粗的）400</td> 
  </tr> 
  <tr> 
   <td><code>bold</code></td> 
   <td>定义粗体（加粗的）700</td> 
  </tr> 
  <tr> 
   <td><code>100~900</code></td> 
   <td>400 等同于 normal，而 700 等同于 bold</td> 
  </tr> 
 </tbody> 
</table>

### 字号大小 ###

body { 
            font-size: 16px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]

### 字体 ###

.line_1 { 
        font-family: "宋体";
    }

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体

p { 
        font-family: Arial,"Microsoft Yahei","微软雅黑";
    }

中文字体需要加英文状态下的引号，**英文字体一般不需要加引号**  
当需要设置英文字体时，英文字体名必须位于中文字体名之前  
若字体名中包含`空格`、`#`、`$`等符号，则该字体必须**加**英文状态下的**单引号**或**双引号**

**Unicode字体**

*  文件编码(GB2312、UTF-8）不匹配会产生乱码
 *  xp系统不支持 类似微软雅黑的中文

解决  
（1）使用英文代替 `font-family:"Microsoft Yahei"`  
（2）使用Unicode编码代替 `font-family:"\5FAE\8F6F\96C5\9ED1"`

<table> 
 <thead> 
  <tr> 
   <th>字体名称</th> 
   <th>英文名称</th> 
   <th>Unicode 编码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>宋体</td> 
   <td>SimSun</td> 
   <td>\5B8B\4F53</td> 
  </tr> 
  <tr> 
   <td>新宋体</td> 
   <td>NSimSun</td> 
   <td>\65B0\5B8B\4F53</td> 
  </tr> 
  <tr> 
   <td>黑体</td> 
   <td>SimHei</td> 
   <td>\9ED1\4F53</td> 
  </tr> 
  <tr> 
   <td><strong>微软雅黑</strong></td> 
   <td><code>Microsoft YaHei</code></td> 
   <td><code>\5FAE\8F6F\96C5\9ED1</code></td> 
  </tr> 
  <tr> 
   <td>楷体_GB2312</td> 
   <td>KaiTi_GB2312</td> 
   <td>\6977\4F53_GB2312</td> 
  </tr> 
  <tr> 
   <td>隶书</td> 
   <td>LiSu</td> 
   <td>\96B6\4E66</td> 
  </tr> 
  <tr> 
   <td>幼园</td> 
   <td>YouYuan</td> 
   <td>\5E7C\5706</td> 
  </tr> 
  <tr> 
   <td>华文细黑</td> 
   <td>STXihei</td> 
   <td>\534E\6587\7EC6\9ED1</td> 
  </tr> 
  <tr> 
   <td>细明体</td> 
   <td>MingLiU</td> 
   <td>\7EC6\660E\4F53</td> 
  </tr> 
  <tr> 
   <td>新细明体</td> 
   <td>PMingLiU</td> 
   <td>\65B0\7EC6\660E\4F53</td> 
  </tr> 
 </tbody> 
</table>

**基本语法**

选择器 {  font: font-style  font-weight  font-size/line-height  font-family;}

.p { 
        font: italic 700 20px "微软雅黑";
    }

**注意**  
• 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开  
• 其中不需要设置的属性可以省略（取默认值），但必须保留`font-size`和`font-family`属性，否则font属性将不起作用

--------------------

# （4）css外观属性 #

--------------------

## 文本颜色 ##

**作用**  
`color`属性用于定义文本的颜色

<table> 
 <thead> 
  <tr> 
   <th>表示</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>预定义的颜色值</td> 
   <td>red，green，blue，还有我们的御用色 pink</td> 
  </tr> 
  <tr> 
   <td>十六进制</td> 
   <td>#FF0000，#FF6600，#29D794</td> 
  </tr> 
  <tr> 
   <td>RGB代码</td> 
   <td>rgb(255,0,0)或rgb(100%,0%,0%)</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 文本水平对齐方式 ##

**作用**  
`text-align`属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>left</code></td> 
   <td>左对齐（默认值）</td> 
  </tr> 
  <tr> 
   <td><code>right</code></td> 
   <td>右对齐</td> 
  </tr> 
  <tr> 
   <td><code>center</code></td> 
   <td>居中对齐</td> 
  </tr> 
 </tbody> 
</table>

**是让盒子里面的内容水平居中， 而不是让盒子居中对齐**

--------------------

## 行间距 ##

**作用**  
`line-height`属性用于设置行间距（行与行之间的距离）（字符的垂直距离）**行高**

**单位**  
`line-height`常用属性值单位分别为`像素px`，**相对值em**和**百分比%**

**一般情况下，行距比字号大7，8像素**

--------------------

## 首行缩进 ##

**作用**  
`text-indent`属性用于设置首行文本的缩进

**属性值**  
可为不同单位的数量，**em字符宽度的倍数**、或相对于浏览器窗口宽度的百分比%，允许使用负值

`1em`就是一个字的宽度

p { 
        text-indent:2em;
    }

--------------------

## 文本修饰 ##

`text-decoration` 通常我们用于给链接修改装饰效果

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>none</code></td> 
   <td>默认。定义标准的文本。 取消下划线（最常用）</td> 
  </tr> 
  <tr> 
   <td><code>underline</code></td> 
   <td>定义文本下的一条线。下划线 也是我们链接自带的（常用）</td> 
  </tr> 
  <tr> 
   <td><code>overline</code></td> 
   <td>定义文本上的一条线。（不用）</td> 
  </tr> 
  <tr> 
   <td><code>line-through</code></td> 
   <td>定义穿过文本下的一条线。（不常用）</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70]: /images/20221023/ade015216335427e885918f2907b5736.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjY2MTQy_size_16_color_FFFFFF_t_70 1]: /images/20221023/91ba6fc4490648e390fffe01da2a9b33.png