HTML详解连载（4）

喜欢ヅ旅行 2023-10-14 18:48 20阅读 0赞

#### HTML详解连载（4） ####

*  专栏链接 \[link\](http://t.csdn.cn/xF0H3)
 *   *  下面进行专栏介绍
 *  开始喽
 *   *  CSS定义
     *   *  书写位置
         *  示例
         *  注意
     *  CSS引入方式
     *   *  内部样式表：学习使用
     *  外部演示表：开发使用
     *   *  代码示例
         *  行内样式
         *  代码示例
     *  选择器
     *   *  作用
         *  基础选择器
         *  标签选择器
         *   *  举例
             *  特点
         *  类选择器
         *   *  作用
             *  步骤
             *  强调
             *  注意
             *  开发习惯
         *  id选择器
         *   *  作用
             *  场景
             *  步骤
             *  规则
         *  通配符选择器
         *   *  作用
             *  范例
     *  新属性
     *  字体大小
     *   *  属性名
         *  属性值
         *  示例
     *  字体粗细
     *   *  属性名
         *  属性值
         *  关键字
     *  字体样式（是否倾斜）
     *   *  作用
         *  属性名
         *  属性值

## 专栏链接 [link][] ##

### 下面进行专栏介绍 ###

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记  
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

## 开始喽 ##

![在这里插入图片描述][ac3db430eb26450fa0c088cd8dcee9d4.png]

### CSS定义 ###

层叠样式表，是一种样式表语言，用来描述HTLML文档的呈现（美化内容）。

#### 书写位置 ####

title标签下方添加style双标签，style标签里书写CSS代码。

#### 示例 ####

<title>CSS初体验</title>
    <style>
    /*选择器{}*/
    p{
          
    /*CSS属性*/
       color：red;
    }
    </style>

#### 注意 ####

属性名和属性值成对出现->键值对

### CSS引入方式 ###

#### 内部样式表：学习使用 ####

CSS代码写在style标签里面

### 外部演示表：开发使用 ###

CSS代码写在单独的CSS文件中（.css）  
在HTML使用link标签引入

#### 代码示例 ####

#### 行内样式 ####

配合javaScript使用  
CSS写在标签的style属性值里

#### 代码示例 ####

<div style=”color=red;font-size:20px;”>这是div标签</div>

### 选择器 ###

#### 作用 ####

查找标签，设置样式

#### 基础选择器 ####

标签选择器  
类选择器  
id选择器  
通配符选择器

#### 标签选择器 ####

使用标签名作为选择器->选中同名标签设置相同的样式。

##### 举例 #####

p,h1,div,a,img…

##### 特点 #####

选中同名标签设置相同的样式，无法差异化同名标签的样式

#### 类选择器 ####

##### 作用 #####

查找标签，差异化设置标签的显示效果

##### 步骤 #####

定义类选择器-> .类名  
使用类选择器->标签添加class=”类名”

##### 强调 #####

一个类选择器可以给多个标签使用  
一个标签可以有多个类名，class属性值写多个类名，类名间用空格隔开  
![在这里插入图片描述][69ee19c5dbfa4a72a30df7416d6a4d5c.png]

##### 注意 #####

类名自定义，不能纯数字或中文，尽量用英文命名

##### 开发习惯 #####

类名见名知意，多个单侧可以用-连接，例如news-hd

#### id选择器 ####

##### 作用 #####

查找标签，差异化设置标签的显示效果

##### 场景 #####

id选择器一般配合JavaScript使用，很少用来设置CSS格式

##### 步骤 #####

定义id选择器->\#id名  
使用id选择器->标签添加id=”id名”

##### 规则 #####

同一个id选择器再一个页面只能使用一次

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

##### 作用 #####

查找页面所有标签，设置相同样式

：  * ，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

##### 范例 #####

*{
    color：red;
    }

### 新属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>高度</td> 
  </tr> 
  <tr> 
   <td>background-color</td> 
   <td>背景色</td> 
  </tr> 
 </tbody> 
</table>

### 字体大小 ###

#### 属性名 ####

font-size

#### 属性值 ####

文字尺寸，PC端网页最常用的单位px

#### 示例 ####

p{
    	font-size:30px;
    }

![在这里插入图片描述][f60f2cc469b54c569e081bf9811ffe58.png]

### 字体粗细 ###

#### 属性名 ####

font-weight

#### 属性值 ####

数字（开发使用）  
正常400 加粗700

#### 关键字 ####

正常normal 加粗 bold

### 字体样式（是否倾斜） ###

#### 作用 ####

清楚文字默认的倾斜效果

#### 属性名 ####

font-style

#### 属性值 ####

正常（不倾斜）：normal  
倾斜：italic

![在这里插入图片描述][884a6101b0a34541b3b709ad14a19e87.png]

[link]: http://t.csdn.cn/xF0H3
[ac3db430eb26450fa0c088cd8dcee9d4.png]: https://img-blog.csdnimg.cn/ac3db430eb26450fa0c088cd8dcee9d4.png
[69ee19c5dbfa4a72a30df7416d6a4d5c.png]: https://img-blog.csdnimg.cn/69ee19c5dbfa4a72a30df7416d6a4d5c.png
[f60f2cc469b54c569e081bf9811ffe58.png]: https://img-blog.csdnimg.cn/f60f2cc469b54c569e081bf9811ffe58.png
[884a6101b0a34541b3b709ad14a19e87.png]: https://img-blog.csdnimg.cn/884a6101b0a34541b3b709ad14a19e87.png