前端入门CSS基础

「爱情、让人受尽委屈。」 2023-09-28 15:17 71阅读 0赞

#### 文章目录 ####

*   *  一、CSS 简介
     *   *   *  1.语法规范
             *  2.代码风格
     *  二、基础选择器
     *   *   *  1.标签选择器
             *  2.类选择器
             *  3.id选择器
             *  4.通配符选择器
     *  三、字体属性
     *   *   *  1.字体系列
             *  2.字体大小
             *  3.字体粗细
             *  4.字体样式
             *  5.字体复合属性
     *  四、文本属性
     *   *   *  1.文本颜色
             *  2.文本透明度
             *  3.对齐文本
             *  4.装饰文本
             *  5.文本缩进
             *  6.行间距
     *  五、引入方式
     *   *   *  1.行内式
             *  2.内嵌式
             *  3.链入式
     *  六、Chrome 调试工具

### 一、CSS 简介 ###

CSS是层叠样式表的简称，同时也是一种标记语言，主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。

##### 1.语法规范 #####

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。  
  
  
![在这里插入图片描述][f0993d82701e4e5695b8032c4488eec2.png_pic_center]

`选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式，属性和属性值之间以“键值对”的形式出现，冒号分隔，分号结尾。`

##### 2.代码风格 #####

以下代码书写风格不是强制性规范，而是符合实际开发的代码书写方式。

**① 样式格式书写**  
不要把代码都挤在一块，尽量用展开格式去书写CSS代码，一个属性占一行，使代码更加直观且美观。像下面这样：

h3{
        
    color:red;
    font-size:13px;
    }

**② 样式大小写**  
一般情况下，样式选择器、属性名、属性值、关键字均采用小写字母来书写，特殊情况除外。

**③ 空格规范**  
属性值和冒号之间保留一个空格，选择器和大括号中间也保留一个空格。

`记住这些规范，虽然不影响代码的正确性，但至少让别人看起来你还算专业的！`

### 二、基础选择器 ###

选择器的作用就是，根据不同的需求把不同的标签选出来。  
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器。

##### 1.标签选择器 #####

标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

p {
        
    color: red;
    }

##### 2.类选择器 #####

如果想要单独选一个或某几个标签，则可以使用类选择器。  
定义类选择器：

.aini {
        
    color: red;
    }

`利用 class 属性来调用类选择器`

> 选择器命名一定要有意义，让别人一眼能看出你的代码写的是什么意思！下面我总结了一些前端常用的 class 命名规范。>\_<

头部：header
    栏目标题：title
    内容：content、container
    版权：copyright
    搜索：search
    标签页：tab
    文章列表：list
    提示信息：msg
    小技巧：tips
    导航：nav
    子导航：subnav
    菜单：menu
    子菜单：submenu
    滚动：scroll
    友情链接：friendlink
    侧栏：sidebar
    栏目：column
    页面外围控制整体宽度：wrapper
    左右中：left、right、center
    功能区：shop
    按钮：btn
    当前的：current
    图标：icon
    注释：note
    加入：joinus
    指南：guild
    服务：service
    注册：regsiter
    状态：status
    投票：vote
    合作伙伴：partner
    登录：login
    登陆条：loginbar
    标志：logo
    广告：banner
    页面主体：main
    热点：hot
    新闻：new
    下载：download
    尾部/页脚：footer

##### 3.id选择器 #####

id选择器可以为标有特定 id 的 HTML 元素指定特定的样式。  
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “\#”来定义。

#nav {
        
    color: blue;
    }

`利用 id 属性调用 id 选择器`

> 那么类选择器和 id 选择器的区别在哪呢？  
> id 选择器是唯一的，只能在 HTML 文档中出现一次，而类选择器可以被多次使用。

##### 4.通配符选择器 #####

在 CSS 中，通配符选择器使用 “\*” 定义，它可以选取页面中的所有的元素（标签）并为它们更改样式。

* {
        
    属性: 属性值;
    }

### 三、字体属性 ###

##### 1.字体系列 #####

h {
        
    font-family: 'FangSong';
    }

以下总结了一些 CSS 的常用字体合集！ >\_<

windows常见内置中文字体:
    
    宋体 SimSun
    
    黑体 SimHei
    
    微软雅黑 Microsoft YaHei
    
    微软正黑体 Microsoft JhengHei
    
    新宋体 NSimSun
    
    新细明体 PMingLiU
    
    细明体 MingLiU
    
    标楷体 DFKai-SB
    
    仿宋 FangSong
    
    楷体 KaiTi
    
    仿宋 FangSong_GB2312
    
    楷体 KaiTi_GB2312

> 可以同时设置多个字体，字体之间用逗号分隔！当一个字体是由多个单词组成时，可以用单引号将该字体括起来！ >\_<

##### 2.字体大小 #####

p {
        
    font-size: 15px;
    }

> 可以给 body 指定整个页面文字的大小，标题标签比较特殊，需要单独指定字体像素大小。

##### 3.字体粗细 #####

语法：font-weight: normal;

> 参数：  
> normal 正常字体，bold 粗体，bolder 特粗体，lighter 细体，number（100~900，数字后不加单位）

实际开发中，我们有时候不想让标题加粗，这时候我们可以将标题的字重设为 normal 。

##### 4.字体样式 #####

语法：font-style: normal;

> 参数：  
> normal 默认标准字体样式，italic 斜体样式

实际开发中，我们很少会使用该属性给文字添加斜体效果，反而经常用来将斜体（em、i）改为正常字体。

##### 5.字体复合属性 #####

字体复合属性将多个文字样式综合来写，使代码更加简洁方便。

body {
        
    font: font-style font-weight font-size/line-height font-family;
    }

各个属性空格隔开，属性顺序不可颠倒，其他属性均可省略，但 font-size 和 font-family 必须有！

### 四、文本属性 ###

##### 1.文本颜色 #####

p {
        
    color: #cc00ff;
    }

下面为大家准备了一张颜色代码表！ >\_<

![在这里插入图片描述][d4141dd76ded4475a13a7c61991108dc.jpeg_pic_center]

##### 2.文本透明度 #####

① 图片背景透明度  
`rgba`(number1, number2, number3, 透明值)  
② 背景连带文本透明度  
`opacity`: 透明值

##### 3.对齐文本 #####

text-align 属性用于设置元素内文本内容的水平对齐方式。

> 参数：  
> left 左对齐，right 右对齐，center 居中对齐

##### 4.装饰文本 #####

text-decoration 属性规定添加到文本的装饰，可以给文本添加下划线、删除线、上划线等。

> 参数：  
> none 默认没有装饰线，underline 下划线，overline 上划线几乎不用，line-through删除线不常用

`实际开发中，我们仅需要掌握如何给文本添加下划线 or 如何删除下划线，其余了解即可！`

##### 5.文本缩进 #####

text-indent 属性指定文本第一行缩进，通常是将段落的首行缩进。

p {
        
    text-indent: 20px;
    }

但是我们写段落时，首行缩进的一般是两个汉字的大小，那么如何控制缩进长度呢？

p {
        
    text-indent: 2em;
    }

> 在这里我们使用 em 作为缩进单位，em 是一个相对单位，1em 就是当前元素（font-size）一个文字大小，则 2em 即是首行缩进两个字的大小。

##### 6.行间距 #####

行间距包括上间距、下间距以及文本高度。

p {
        
    line-height: 20px;
    }

### 五、引入方式 ###

##### 1.行内式 #####

行内式直接把 CSS 代码放到 HTML 标签里面，作为 style 属性的属性值。但是仅适合在样式简单时使用！

##### 2.内嵌式 #####

head 标签内放 style 标签，style 里写 CSS 代码。代码结构清晰，但没有实现结构与样式的完全分离！

<!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
          
    color: red;
    }
    </style>
    <title>内部样式表</title>
    </head>
    <body>
    <div>啦啦啦啦啦</div>
    </body>
    </html>

##### 3.链入式 #####

实际开发使用的都是外部样式表，适合于样式比较多的情况，核心是样式单独写到一个 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用在 head 标签内，同时控制多个页面。

① 首先创建一个 CSS 文件，我们这里命名为 AA.css

p {
        
    color: red;
    }
    h {
        
    font-size: 15px;
    }

② 在 HTML 页面中，使用`<link>`标签引入 CSS 文件

### 六、Chrome 调试工具 ###

**① 打开调试工具**  
打开 Chrome 浏览器，按下 F12 键或右击页面空白处点击检查，选择 Elements！

**② 使用调试工具**

> 小技巧：  
> Ctrl + 滚轮 可以放大开发工具代码大小；  
> 左边是 HTML 元素，右边是 CSS 样式；  
> 右边 CSS 样式可以改动数值和查看颜色（但是调试并非修改代码）；  
> Ctrl + 0 复原浏览器页面大小；  
> 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误；  
> 如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误。

`调试工具只是检查错误，但并不能修改错误！`

[f0993d82701e4e5695b8032c4488eec2.png_pic_center]: https://img-blog.csdnimg.cn/f0993d82701e4e5695b8032c4488eec2.png#pic_center
[d4141dd76ded4475a13a7c61991108dc.jpeg_pic_center]: https://img-blog.csdnimg.cn/d4141dd76ded4475a13a7c61991108dc.jpeg#pic_center