03-CSS基础选择器

3.1 CSS基础认知

3.1.1 ️‍️CSS概念

CSS：层叠样式表（Cascading style sheets)，为网页标签增加样式表现的

语法格式：

选择器{
	
	属性名:属性值;  
}
比如：
p{
	color:red;
}

CSS常见属性	作用
color	文字颜色
background-color	背景颜色
background-image	背景图片
font-size	字体大小
width	宽度
height	高度

3.1.2 CSS的引入方式

1. 内嵌式

写在style标签，style标签一般在head中，title下面

你好！世界！

2. 外联式

写在一个单独的.css文件中，通过`link`标签进行导入

 这是div标签-演示外联式CSS 

3. 内联式

直接写在标签的style属性中

这是span标签-用来演示内联式

3.2 基本选择器️

3.2.1 标签选择器

通过标签名去控制对应标签的样式

标签选择器是一次性控制整个页面对应的标签

语法：

标签名{
	属性：属性值
}

    
    
    
    


    
    
这是span标签-用来演示标签选择器
    
p1 
    
p2 
    
 p3
    
 p4
    

        

            

                
这是嵌套的p标签
            
        
    

3.2.2 类选择器

通过类名，找到页面中所有带有这个类名的标签，设置样式

class="类名"

语法：

.类名{
  属性：值
}

    
    
    
    


    
 这是第一个p标签
    
 这是第二个p标签，有类名的p标签
    
    
 这是第三个p标签，有类名的p标签

    这是span标签
    
这是div标签

注意点：

1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签

3.2.3 id选择器

通过id属性值，找到页面中带有这个id属性值的标签，设置样式

语法：

#id名{
  属性：值
}

    
    
    
    


    
这是p标签-测试id选择器
    
这是p标签-测试id选择器

    这是span标签
    
这是div

3.2.4 通配符选择器

以通配符“*”直接选择设置整个页面的标签

语法：

*{
  属性：值
}

    
    
    
    


    
111
    
222
    这是span
    
这是div

3.3 CSS样式层叠

一个标签有多个相同的属性，比如：设置两个 color，最后就会覆盖第一个，一最后的样式为准

    
    
    
    


    
这是p标签

3.4 字体和文本的基础样式

3.4.1 字体样式

1. 字体大小：`font-size`

格式：

font-size:数值+px

• 要跟px单位，不跟没有效果

1. 字体粗细、倾斜：`font-weight`、`font-style`

    


    
这是p标签
    
这是div标签
    这是span

1. 主体加粗

关键字：

• 正常：normal
• 加粗：bold

数值：

• 100~900 （9个级别，依次递增）
• 正常：400
• 加粗：700

1. 字体倾斜

• 正常：normal（默认值）
• 倾斜：italic

1. 字体选择：`font-family`

    
    
    
    


    
这是一个p标签
    
这是div

常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,

• 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体等……
• 字体系列：sans-serif、serif、monospace等……

注意：

1. 从左往右按照顺序查找
2. 如果字体名称中存在多个单词，推荐使用引号包裹最后一项
3. 尽量使用系统常见自带字体

1. font连写

直接将字体系列的 font...属性写在一起

    
    
    
    


    
这是p标签

注意：

1. font连写时按照顺序写：`font : style weight size family;`
2. font连写可以省略前2个属性（style、weight）

3.4.2 文本样式

1. 首先缩进：`text-indent`

• 可以跟 数值px
• 可以指定字：em(一个em 表示一个字大小)

1. 对齐方式：`text-align`

• 居中:center
• 右对齐：right
• 左对齐：left

1. 文本修饰：`text-decoration`

• underline:下划线
• line-through:删除线
• overline:上划线
• none:去掉所有文本修饰

    
    
    
    



    
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，
        来实现互联网产品的用户界面交互 。
    

    
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，
        以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，
        功能更加强大。
    

    

        这是div标签
    
    

    
        这是span
    

3.4.3 ️行高

每一行字体所占的高度（`line-height`）

行高取值：

• 数值+px
• em（一个em就表示一个字的大小）
• font-size的倍数(一般情况下，浏览器默认字体大小是 16px)

可以font连写：font : style weight size/line-height family ;

    
    
    
    


    
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，
        以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，
        功能更加强大。