css之简介和基础选择器的介绍

css之简介和基础选择器的介绍
文章目录
1. css 强势登场

 1.1 html 的局限性

html 主要做的是网页的结构，但是我们发现：做出来的页面特别丑。

而且如果我们在标签中添加很多属性，也会使我们的代码异常臃肿。

1.2 css 闪亮登场🌟

css：层叠样式表(英文全称：Cascading Style Sheets)

css 可以用来改变文本内容（大小、字体、对齐方式等），图片内容（宽高、边框等）以及版面的布局和外观显示样式。

使用 css 可以更灵活操作我们的元素，使布局更简单，从而美化我们的界面。

1.3 使用css的最大好处

使用 css 的最大好处：html 专注于结构，css 专注于样式，使结构和样式相分离。

充分符合了 web 标准的最佳体验方案：结构、表现、行为相互分离，即结构写到 HTML 文件里，表现写到 CSS 文件里，行为写到 JavaScript 文件里。

2. css的语法规范

 2.1 规则

CSS 规则 = 选择器 + 声明块（声明块内包含一个或多个声明）

注意点：
1. 选择器用于指定 css 样式的 HTML 标签，花括号是该标签的具体样式.
2. 声明中以键值对的形式存在，但这个键值对不同于我们在 html 标签里写的 key = “value”，而是 key: value。
3. 每个键值对（或者说不同属性）不同于 html 用空格隔开，而是用 ; 隔开。
2.2 样式风格

样式风格分为紧凑风格和展开风格。
- 紧凑风格
```
p {color: red;font-size: 25px;}
1
```
- 展开风格
```
p {
    color: red;
    font-size: 25px;
}
1
2
3
4
```
我们肯定是推荐使用展开风格，因为这样代码看起来更直观。

而且在代码打包的时候，我们可以使用一些工具，将展开风格 -> 紧凑风格。

并且我们推荐选择器和属性和其值全部使用大小写，更直观。

2.3 空格规范

我们写 css 代码时，通常会在选择器和花括号间，属性冒号和属性值间加入空格。

2.4 选择器的作用

选择器就是用来选标签的，选完后就可以直接操作它的样式。

3. css代码书写位置

 3.1 定义

对于 HTML 代码的书写，我们没有任何疑问，就是写在 HTML 文件中。但对于 css，它的代码究竟可以写在哪呢？

为此，对于 css 代码的书写位置，我们可以分为以下三种：
- 内部样式表
- 内联样式表
- 外部样式表
3.2 内部样式表

书写在 style 元素中，放在 HTML 文件的 head 里，否则可能会导致画面闪烁（丑–>美）
```
<head>
    <title>Documenttitle>
    
    <style>
        p {
            color: red;
            font-size: 25px;
        }
    style>
head>
1
2
3
4
5
6
7
8
9
10
```
如果代码很少，可以用这种方式，少一个文件，第一次加载更快🚀。

我们之后在一些简单的 css 讲解中都会使用该样式，因为不用去建立文件。

3.3 内联样式表[暂时不推荐]
```
<body>
    
    <p style="color:darkorchid">内联样式p>
body>
1
2
3
4
```
直接书写在元素的 style 属性中

 3.4 外部样式表[推荐]

将样式书写在独立的 css 文件中，css 的代码和内部样式表 <style> 里的是一样的，但在html文件中，需要一个 <link> 标签导入 css 文件。
```
<link rel="stylesheet" href="css文件路径">
1
```
好处：
1. 外部样式可以解决多页面样式重复的问题
2. 有利于浏览器缓存，从而提高页面响应速度
3. 有利于代码分离（HTML 和 CSS），便于阅读和维护
4. 基础选择器

 4.1 选择器的分类

选择器可以分成两个大类：
- 基础选择器
- 复合选择器
我们先来讲讲基础选择器。

4.2 基础选择器的分类

基础选择器由单个选择器组成，可分为以下四类：
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
4.3 标签选择器

 4.3.1 定义

标签选择器，顾名思义，就是选择器是 HTML 的标签，也就是它可以选中特定的 HTML 标签进行操作。

4.3.2 语法
- css
```
标签 {
    属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4
```
4.3.3 示例
- css 内部样式表
```
<style>
    p {
        color: red;
        font-size: 25px;
    }
style>
1
2
3
4
5
6
```
- html 内容
```
<body>
    <p>你好世界p>
    <div>
        <p>我在第一层divp>
        <div>
            <p>我在第二层divp>
        div>
    div>
body>
1
2
3
4
5
6
7
8
9
```
- 效果：
我们发现，即使是在 <div> 内层的 <p> 标签也被选中，优点很明显：可以一下选出所有同类的标签。

但缺点也很明显：因为我有时候可能只要某个 <p> 标签有样式，而不是所有。也就是说单纯靠标签选择器是无法做到差异化的选择的。

4.4 类选择器

 4.4.1 定义

由于标签选择器无法做到差异化选择，所以我们就有了类选择器，可以做到选择一个或者若干个标签。

4.4.2 语法
- css
```
.类名 {
    属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4
```
- html
```
<标签 class = "类名">
1
```
4.4.3 示例
- css 内部样式表
```
<style>
    .blue {
    color: blue;
}
style>
1
2
3
4
5
```
- html 内容
```
<body>
    
    <p class="blue">类选择器1p>
    <p>类选择器2p>
    <p class="blue">类选择器3p>
body>
1
2
3
4
5
6
```
- 效果
注意点：
- 类的命名不要是中文，纯数字，尽量使用英文命名！
- 类的名称是长名称或词组时，可以使用中横线 - 进行连接。
- 类名虽然可以自定义，但尽量还是遵守一些规范，详情可见pink老师的gitee仓库内有web前端开发手则。
4.4.4 课堂案例

完成以下图片

代码如下：
- css
```
<style>
    .red {
        background-color: red;
        height: 100px;
        width: 100px;
    }

    .green {
        background-color: green;
        height: 100px;
        width: 100px;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
```
- html
```
<body>
    <div class="red">div>
    <div class="green">div>
    <div class="red">div>
body>
1
2
3
4
5
```
- 效果：
我们会发现两个问题：
1. 显示层面：展示的盒子的上边和左边存在一小段空白间隙（这里主要是因为浏览器默认样式的问题，我们具体等到盒子模型再细说）
2. 代码层面：red 类的样式和 green 类的样式存在重合部分，为了使我们代码松耦合（简单理解就是不要把一样的东西写在不同的代码里，就像我们这里的宽高都一样，但我分开写在两个类里），我们需要将其分离，分离前我们先来说说多类名的使用。
4.4.5 多类名的使用

语法如下：
```
<标签名 class="类1 类2 类3 ...">
1
```
注意点：
1. 多类名需要用空格隔开
2. 这个标签可以分别具有这些类名的样式，但这可能存在冲突，所以我们之后会介绍属性值的计算
4.4.6 课堂案例松耦合
- css
```
<style>
    .box{
        height: 100px;
        width: 100px;
    }

    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```
- html
```
<body>
    <div class="red box">div>
    <div class="green box">div>
    <div class="red box">div>
body>
1
2
3
4
5
```
4.4.7 多类名的使用场景
1. 可以把相同样式放在一个类里面
2. 标签可以通过调用公用的类后，然后再调用自己独有的类
3. 从而节省 css 代码，统一修改也十分方便
4.5 id选择器

 4.5.1 定义

id 选择器和类选择器类似，使用前需要给标签设置一个 id 属性，但一个元素只能有一个 id。

4.5.2 语法
- css
```
#id名 {
    属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4
```
- html
```
<标签 id = "id名">
1
```
4.5.3 示例
- css 内部样式表
```
<style>
    #zuolun {
        color: green;
    }
style>
1
2
3
4
5
```
- html 内容
```
<body>
    <div id="zuolun">我是左轮div>
body>
1
2
3
```
- 效果
4.5.4 id 选择器和类选择器的不同
- 类选择器可以供多个标签使用，一个标签也能使用不同的类选择器
- id 选择器像身份证一样，只有一个标签可以使用
❗️我们一定要注意：虽然我们在网页中给多个标签使用同个 id，也可以达到渲染的效果。但是这种做法及其不符合规范，一定注意：一个标签拥有一个唯一的 id。

4.6 通配符选择器

 4.6.1 定义

通配符选择器可以选择页面中所有的元素，用 * 表示

 4.6.2 语法
- css
```
* {
    属性1: 属性值1;
    属性2: 属性值2;
}
1
2
3
4
```
4.6.3 示例
- css 内部样式表
```
<style>
    * {
        color: red;
    }
style>
1
2
3
4
5
```
- html 内容
```
<body>
    <p>我是1p>
    <div>我是2div>
    <strong>我是3strong>
    <em>我是4em>
body>
1
2
3
4
5
6
```
- 效果
本文主要学习黑马程序员pink老师的视频

如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ
相关阅读:
安装CDH平台的服务器磁盘满了，磁盘清理过程记录
 【分段传输】c#使用IAsyncEnumerable实现流式分段传输
 libevent学习——事件event
【ArcGIS微课1000例】0077：ArcGIS生成经纬网（shp格式）
飞鹤与满趣健达成战略合作加速深化国际化布局
 mysql 锁总结
 硬核，20道经典Java基础面试题
 Springboot毕设项目旅游信息采集管理与分享系统n2qez（java+VUE+Mybatis+Maven+Mysql）
Redis之bigkey问题解读
 最近学习内容(2023-10-22)
原文地址：https://blog.csdn.net/m0_51302822/article/details/127594913

文章目录

1. css 强势登场

1.1 html 的局限性

1.2 css 闪亮登场🌟

1.3 使用css的最大好处

2. css的语法规范

2.1 规则

2.2 样式风格

2.3 空格规范

2.4 选择器的作用

3. css代码书写位置

3.1 定义

3.2 内部样式表

3.3 内联样式表[暂时不推荐]

3.4 外部样式表[推荐]

4. 基础选择器

4.1 选择器的分类

4.2 基础选择器的分类

4.3 标签选择器

4.3.1 定义

4.3.2 语法

4.3.3 示例

4.4 类选择器

4.4.1 定义

4.4.2 语法

4.4.3 示例

4.4.4 课堂案例

4.4.5 多类名的使用

4.4.6 课堂案例松耦合

4.4.7 多类名的使用场景

4.5 id选择器

4.5.1 定义

4.5.2 语法

4.5.3 示例

4.5.4 id 选择器和类选择器的不同

4.6 通配符选择器

4.6.1 定义

4.6.2 语法

4.6.3 示例