B 站黑马程序员 pink 老师前端课程学习笔记_02 CSS3

最新推荐文章于 2024-09-28 11:12:09 发布

原创

最新推荐文章于 2024-09-28 11:12:09 发布 · 1.5k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

本文详细介绍了CSS3的基础知识，包括语法规范、选择器类型、字体与文本属性以及样式表的引入方式。重点讲解了标签选择器、类选择器、ID选择器的用法，并强调了类选择器在差异化样式中的重要性。此外，还概述了字体系列、字体大小、文本颜色等文本属性，并提到了Chrome调试工具在CSS学习中的应用。

CSS_01

1. CSS 简介

1.1 语法规范

<style>
    /* 选择器{样式} */
    p {
    
    color: red;font-size: 12px;}
</style>

1.2 代码风格

1.2.1 样式格式书写

紧凑格式：

<style>
    p {
    
    color: red;font-size: 12px;}
</style>

展开格式：

<style>
    p {
    
    
        color: red;
        font-size: 12px;
    }
</style>

1.2.2 样式大小写

样式选择器、属性名、属性值关键字全部使用小写字母，特殊情况除外

1.2.3 空格规范

h3  {
   color: red;
}

属性值前、冒号后保留一个空格
选择器（标签）和大括号中间保留空额

2. 基础选择器

2.1 CSS 选择器的作用

选择器（选择符）就是根据不同雪球把不同的标签选出来这就是选择器的作用。

2.2 选择器分类

选择器分为基础选择器和复合选择器

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

2.3 标签选择器

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

**作用：**把某一类标签全部选择出来
**优点：**快速为页面中同类型的标签统一设置样式
**缺点：**不能差异化样式，只能选择全部的当前标签

2.4 类选择器

2.4.1 类名

差异化不同标签的样式，单独选一个或几个标签

需要调用 class属性
类选择器使用 . (英文句号)进行标识，后面紧跟类名(自己定义)
类名不要使用纯数字、中文等命名，尽量使用英文字母
命名有意义(代码可读性)，《Web前端开发规范手册》

<style>
    /* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个开发最常用*/
    .text{
    
    
        color: red;
    }
</style>
...
<div class="text">
    标签内示例文字
</div>

2.4.2 多类名

给一个标签指定多个类名

把标签元素相同样式放到一个分类里
多个类名中间必须用空格分开
节省代码量，便于修改

用 <div> 画盒子:

    <style>
        .box{
    
    
            width: 100px;
            height: 100px;
            font-size: 30px;
        }
        .bg_red {
    
    
            background-color: red;
        }