CSS入门基础-----标签选择器

最新推荐文章于 2024-07-18 17:34:14 发布

B.Bz

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量2.2k

点赞数 1

分类专栏： html5和css基础文章标签： css html html5

本文链接：https://blog.csdn.net/bjsyc123456/article/details/120529692

版权

html5和css基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

什么是CSS？

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

CSS语法介绍

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。 CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

css属性规则：

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

CSS的注释

/* 注释内容 */

div {
  /* width代表宽度 20px代表宽20像素 */
  width: 20px;
}

CSS的选择器

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

选择器分为基础选择器和复合选择器两个大类:

基础选择器是由单个选择器组成的

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

选择所有的div标签添加样式

div {
	样式1：值1；
	样式2： 值2；
	样式3： 值3；
}

<!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>
        div {
        	/* 宽度、高度设置为100像素 */
            width: 100px;
            height: 100px;
            /* 背景颜色设置为天蓝色 */
            background-color: skyblue;
        }
        
        p {
            width: 100px;
            height: 100px;
            /* p标签背景设置为黑色 */
            background-color: black;
        }
    </style>
</head>

<body>
    <p></p>
    <div></div>
    <p></p>
    <div></div>
</body>

</html>

在这里插入图片描述

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
可以理解为给这个标签起了一个名字，来表示。
长名称或词组可以使用中横线来为选择器命名。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名要有意义，尽量使别人一眼就知道这个类名的目的。

通过标签的class属性选择标签来添加样式

.属性名 {
	样式1：值1；
}

<!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>
        .box1 {
            color: skyblue;
        }
        
        .box2 {
            color: slateblue;
        }
    </style>
</head>

<body>
    <div class="box1">111</div>
    <div class="box2">222</div>
</body>

</html>

在这里插入图片描述

id选择器

`注意：`

id 属性只能在每个 HTML 文档中出现一次。
id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用

<!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>
        #idbox {
            color: tan;
        }
    </style>
</head>

<body>
    <div id="idbox">123</div>
</body>

</html>

在这里插入图片描述

通配符选择器

不建议使用，把所有标签都添加这个样式

通配符选择器不需要调用，自动就给所有的元素使用样式特殊情况才使用，尽量不要去用，但如果场景合适，也不必担心，大胆使用，比如: box-sizing 属性

* {
	样式1：值1；
}

<!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>
        * {
            color: pink;
        }
    </style>
</head>

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</body>

</html>

在这里插入图片描述

选择器的总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	p {color: red;}
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav {color: red;}
ID选择器	一次只能选出一个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#box {color: red;}
通配符选择器	选择所有的标签	选择的太多，有的不需要	特殊情况使用	* {box-sizing: border-box;}

B.Bz

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS入门基础-----标签选择器

什么是CSS？CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。CSS语法介绍使用 HTM.
复制链接

扫一扫

专栏目录