1.1 CSS简介与基础选择器

野性酷女 2022-11-18 04:57 163阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

## 1.CSS简介 ##

*美化网页，布局页面，是层叠样式表的简称*

### 1.1 HTML的局限性 ###

只关心内容的语义，没有任何装饰，虽然可以做简单的装饰，但是带来是无尽的臃肿和繁琐

总结：HTML主要做结构，显示元素内容

### 1.2 CSS-网页的美容师 ###

CSS也是一种标记语言

CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图形的外观（宽高、边框样式、边距等）以及版面的布局和外观显示样式

CSS可以美化HTML，让HTML更漂亮，让页面布局更简单

**重点：CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。**

### 1.3 CSS语法规范 ###

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TdIvnYSB-1618224426453)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210411154104943.png)\]][img-TdIvnYSB-1618224426453_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210411154104943.png]

*  选择器是主要用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
 *  属性和属性值以键值对的形式出现（冒号分隔，分号结尾）
 *  属性是对指定的对象设置的样式属性，例如字体大小、文字颜色等

### 1.4 CSS代码风格 ###

*  样式格式风格（展开格式，更加直观）
 *  样式大小写
    
    强烈推荐样式选择器，属性名、属性值关键字全部使用小写字母，特殊情况除外；
 *  空格规范
    
     *  属性值前面，冒号后面，保留一个空格；
     *  选择器（标签）和大括号中间保留一个空格；

h3 {
        
        color: pink;
        font-size: 20px;
    }

## 2.CSS选择器 ##

### 2.1 CSS选择器的作用 ###

选择器（选择符）就是根据不同需求把不同的标签选出来，简单来说，就是选择标签用的。

### 2.2 选择器的分类 ###

*选择器分为基础选择器和复合选择器两个大类*

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

基础选择器是由单个选择器所组成，基础选择器又包括：**标签选择器**、**类选择器**、**id选择器**和**通配符选择器**。

*  **标签选择器**\*：是指用HTML标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式；
    
        标签名 {
              
            属性1： 属性值；
            属性2： 属性值；
        }
    
    优点：可以把某一类标签全部选出来，并快速为页面中同类型的标签设置统一样式。
    
    缺点：不能设置差异化样式，只能选择全部的当前标签。
 *  **类选择器**：如果想要差异化选择不同的对象，单独选择一个或者几个标签，可以使用类选择器。
    
        .类名1 {
                                     //口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用
        	属性1： 属性值1；
        }
        .red {
              
        	color： red;
        }
        
        <div class='red'> 变红色 </div>   
    
    1.类选择器使用 “.” 进行标识，后面紧跟类名（自定义，不要使用纯数字、中文等命名，尽量使用英文字母来表示）
    
    2.长名称或者词组可以使用中横线来为选择器命名。
    
     *  **类选择器：多类名**
        
        可以给一个标签指定多个类名，从而达到更多的选择目的，例如：
        
            <div class='red font20'> 变红色，字体20 </div>   //在标签class属性中写多个类名，多个类名中间用空格分开
     *  **多类名开发中使用场景（提高代码复用性）**
        
        （1）可以把一些标签元素相同的样式放到一个类里面，从而节省代码，方便统一修改
        
        （2）这些标签都可以调用这个公共的类，然后再调用自己独有的类
 *  **id 选择器**：id选择器可以为标有特定id的HTML元素指定特定的样式
    
    HTML元素以id属性来设置id选择器，CSS中id选择器以“\#”来定义
    
        #id名 {
              
        	属性1： 属性值1；
        }
        #orange {
              
        	color: orange;
        }
        <div id="orange"> 林彦俊 </div>
    
    id选择器：样式\#定义，结构id调用，只能调用一次，别人切勿使用
 *  **类选择器和id选择器的区别**
    
     *  类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
     *  id选择器好比人的身份证号，全中国是唯一的，不能有重复
     *  id选择器和类选择器的最大区别在于使用次数上
     *  类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用
 *  **通配符选择器**
    
    在CSS中，通配符选择器使用“\*“定义，它表示选取页面中的**所有元素（标签）**
    
        * {
              
            属性1： 属性值；
        }
    
     *  通配符选择器不需要调用，自动就给所有的元素使用样式
     *  特殊情况才使用

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[img-TdIvnYSB-1618224426453_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210411154104943.png]: /images/20221022/919539d6918044e8ac570d310185ed4c.png