[CSS一] css基础和选择器

﹏ヽ暗。殇╰゛Y 2022-11-26 05:00 203阅读 0赞

## 一、css基础 ##

### 1. css 的定义 ###

> css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

**没有使用css的效果图**

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

**使用css的效果图**

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

### 2. css 的作用 ###

1.  美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。
2.  控制页面布局, 比如: 设置浮动、定位等样式。

### 3. css 的基本语法 ###

选择器\{

样式规则

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

…

选择器:**是用来选择标签的，选出来以后给标签加样式。**

**代码示例:**

div{ 
        width:100px; 
        height:100px; 
        background:gold; 
    }

**说明**

css 是由两个主要的部分构成：**选择器和一条或多条样式规则**，注意:**样式规则需要放到大括号里面。**

## 二、css引入方式 ##

**css的三种引入方式**

1.  行内式
2.  内嵌式（内部样式）
3.  外链式

### 1. 行内式 ###

> 直接在标签的 style 属性中添加 css 样式

**示例代码:**

<div style="width:100px; height:100px; background:red ">hello</div>

优点：方便、直观。 缺点：缺乏可重用性。

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

> 在`<head>`标签内加入`<style>`标签，在`<style>`标签中编写css代码。

**示例代码:**

<head>
       <style type="text/css"> h3{ color:red; } </style>
    </head>

优点：在同一个页面内部便于复用和维护。 缺点：在多个页面之间的可重用性不够高。

### 3. 外链式 ###

> 将css代码写在一个单独的.css文件中，在`<head>`标签中使用`<link>`标签直接引入该文件到页面中。

**示例代码:**

优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

## 三、css选择器 ##

### 1. css 选择器的定义 ###

css 选择器是用来选择标签的，选出来以后给标签加样式。

### 2. css 选择器的种类 ###

1.  标签选择器
2.  类选择器
3.  层级选择器(后代选择器)
4.  id选择器
5.  组选择器
6.  伪类选择器

### 3. 标签选择器 ###

根据标签来选择标签，**以标签开头**，此种选择器影响范围大，一般用来做一些通用设置。

**示例代码**

### 4. 类选择器 ###

根据类名来选择标签，**以 . 开头**, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

**示例代码**

### 5. 层级选择器(后代选择器) ###

根据层级关系选择后代标签，**以选择器1 选择器2开头**，主要应用在标签嵌套的结构中，减少命名。

**示例代码**

**注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器**

### 6. id选择器 ###

根据id选择标签，以\#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

**示例代码**

**注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。**

### 7. 组选择器 ###

根据组合的选择器选择不同的标签，**以 , 分割开**, 如果有公共的样式设置，可以使用组选择器。

**示例代码**

### 8. 伪类选择器 ###

用于向选择器添加特殊的效果, **以 : 分割开**, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

**示例代码**

[20200810163832604.png]: /images/20221124/00bf640101874deaa677f5c5a6ea9ae8.png
[20200810163849563.png]: /images/20221124/b54f23da7b6e4ca3932668892b4a8adc.png

[CSS一] css基础和选择器

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS3基础：样式和选择器

相关 css选择器_CSS选择器

相关 css 属性选择器_CSS选择器：属性选择器

相关 [CSS一] css基础和选择器

相关 CSS基础知识一（CSS的应用方式、CSS选择器、选择器的声明、文字CSS效果、）

相关 CSS各种选择器【一】

相关 css选择器以及基础

相关 css选择器以及基础

相关 CSS基础选择器

相关 css基础之选择器