03-CSS基础选择器

菜鸡本鸡2023-11-17 10:56

3.1 CSS基础认知🍎

3.1.1 👁️‍🗨️CSS概念

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

语法格式：

复制代码 
选择器{
	<!-- 属性设置 -->
	属性名:属性值;  <!--每一个键值对属性写完之后都要加 英文 `;`g隔开-->
}
比如：
p{
	color:red;
}

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

3.1.2 👣CSS的引入方式

1. 内嵌式

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

复制代码 
    <style>
        /* 内嵌式 */
        p{
            /*属性设置==》 属性名：属性值  */
            color: red;
            /* 文字大小 */
            font-size: 50px;
            /* 背景颜色 */
            background-color: yellow;
            /* 宽度 高度 */
            /* width: 60px;
            height: 600px; */
        }
    </style>

<p>你好！世界！</p>

2. 外联式

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

复制代码 
    <!-- link 标签 导入外联的css样式 -->
    <link rel="stylesheet" href="./css/01-css.css">

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

3. 内联式

直接写在标签的style属性中

复制代码 
<!-- 内联式：直接写在标签里面 -->
<span  style="color: springgreen; font-size: 90px;" >这是span标签-用来演示内联式</span>

3.2 基本选择器🌶️

3.2.1 🏀标签选择器

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

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

语法：

复制代码 
标签名{
	属性：属性值
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
            font-size: 20px;
        }

    </style>
</head>
<body>
    <!-- 演示标签选择器 -->
    <p>这是span标签-用来演示标签选择器</p>
    <p>p1 </p>
    <p>p2 </p>
    <p> p3</p>
    <p> p4</p>
    <div>
        <ol>
            <li>
                <p>这是嵌套的p标签</p>
            </li>
        </ol>
    </div>
</body>

3.2.2 🎉类选择器

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

class="类名"

语法：

复制代码 
.类名{
  属性：值
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器 .类名 */
        .xzq03{
            color: aqua;
            font-size: 30px;
        }
        .p03{
            background-color: red;
        }

    </style>
</head>
<body>
    <p> 这是第一个p标签</p>
    <p class="xzq03"> 这是第二个p标签，有类名的p标签</p>
    <!-- 多个类名 -->
    <p class="xzq03 p03"> 这是第三个p标签，有类名的p标签</p>

    <span class="xzq03 span03">这是span标签</span>
    <div class="xzq03">这是div标签</div>
</body>

注意点：

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

3.2.3 🎿id选择器

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

语法：

复制代码 
#id名{
  属性：值
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ix{
            font-size: 40px;
        }
        #sx{
            background-color: red;
        }
    </style>
</head>
<body>
    <p id="ix sx">这是p标签-测试id选择器</p>
    <p id="ix">这是p标签-测试id选择器</p>

    <span id="ix">这是span标签</span>
    <div id="ix">这是div</div>
</body>

3.2.4 🔮通配符选择器

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

语法：

复制代码 
*{
  属性：值
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>111</p>
    <p>222</p>
    <span>这是span</span>
    <div>这是div</div>
</body>

3.3 CSS样式层叠🍖

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

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* 后面的属性会覆盖掉前面的属性 */
            font-size: 60px;
            font-size: 20px;
            color: red;
            color: violet;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
</body>
</html>

3.4 字体和文本的基础样式🍊

3.4.1 🎯字体样式

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

格式：

复制代码 
font-size:数值+px
  • 要跟px单位，不跟没有效果

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

    这是一个p标签

    这是div

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

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

注意：

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

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

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* font-size: 40px;
            font-weight: 900;
            font-style: italic; */
            /* font 连写 */
            /* font : style weight size family;连写的顺序 */
            /* font连写：
                - 按照顺序写
                - 只能省略前两个属性（style、weight）
            */
            font: italic 900 90px 黑体 ;
            /* font: 900px 宋体; */
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
</body>
</html>

注意：

  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:去掉所有文本修饰

    文本样式