css基础之选择器

骑猪看日落 2021-09-15 01:30 448阅读 0赞

CSS作用：        
                    设置网页结构样式（改变html标签样式），通过CSS给html标签设置属性达到改变标签样式。

CSS书写位置介绍：  
             ☞内嵌式写法  
             ☞外链式写法  
             ☞行内式写法

内嵌： 将css放到html文件中设置

![Image 1][]

语法

选择器 \{属性: 值;  属性: 值;  \}

选择器:  选择标签的过程

◇ 标签选择器  
                   ◇ 类选择器  
               ◇ ID选择器  
                   ◇ 通配符选择器  
  
                   ◇交集选择器（标签指定式）  
                   ◇后代选择器  
                   ◇子代选择器  
                   ◇并集选择器  
  
 text-indet:   设置首行缩进  
  
 直接设置颜色的名称 red,green,pink....  
             ☞ 使用十六进制表示   \#0-f  
                     
             ☞使用三原色表示  
                   rgb()  
                   r:  red      (0-255)  
                      g: green   （0-255）  
                   b:  blue    （0-255）  
               
             ☞ 半透明  
                   rgba()     a  0-1  
  
.自定义类名  \{属性: 值; \}  
  
             使用：  
                         ☞ 通过.自定义类名 定义一个类样式  
                              .p\_red \{\}  
                         ☞ 标签通过class属性调用类样式  
                              <p  class=“p\_red”></p>

### １.1 类选择器特点 ###

一个类样式可以被多个标签同时调用  
![Image 1][]

### １.1 类选择器命名规范 ###

![Image 1][]  
合法类名  
                         ◇ 不能使用纯数字或者数字开头

◇ 不推荐使用汉字定义类名

不能使用特殊字符或者以特殊字符开头定义类名

Id选择器

语法：  
            \#自定名称 \{属性: 值; \}  
  
     使用：  
             ☞首先通过\#自定义名称 定义一个id选择器样式  
               \#p\_color \{ color: red;\}  
             ☞标签通过id属性调用id样式  
                    <p id=”p\_color”></p>  
  
          ☞id选择器与类选择器的区别:

◇ 页面中标签的id值必须唯一

◇ 一个标签只能调用一个id样式

通配符选择器

语法：  
                     \*\{属性: 值; ...\}  
              特点：该选择器会将页面中所有的标签都选中。

### １.1  font属性介绍 ###

font-size     文字大小  
            ☞ font-weight:normal;  文字加粗效果  
                            700    文字加粗

bold   文字加粗  
                                     400   文字正常显示

☞ font-style:       设置文字是否斜体显示  
                                       normal 默认正常显示  
                                           italic   斜体显示  
  
              ☞ font-family     设置文字字体

[Image 1]: