CSS层叠样式表学习（基础选择器）

（大家好，今天我们将继续来学习CSS（2）的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）

目录

二、CSS基础选择器

2.1  CSS选择器的作用

2.2  选择器分类

2.3  标签选择器

2.4  类选择器

2.5  类选择器一多类名

2.5.1  多类名使用方式

2.5.2  多类名开发中使用场景

2.6  id选择器

2.7  通配符选择器

 2.8  基础选择器总结

二、CSS基础选择器

2.1  CSS选择器的作用

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

以上CSS做了两件事: 

  1. 找到所有的h1标签，选择器 (选对人) 
  2. 设置这些标签的样式:比如颜色 (做对事) 

2.2  选择器分类

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器：

  • 基础选择器是由单个选择器组成的。
  • 基础选择器又包括:标签选择器，类选择器id选择器和通配符选择器

2.3  标签选择器

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

语法：

标签名：{

    属性1：  属性值1；

    属性2：  属性值2；

    属性3：  属性值3；

    ......

}

  •  作用:标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。
  • 优点:能快速为页面中同类型的标签统一设置样式。
  • 缺点:不能设计差异化样式，只能选择全部的当前标签。

2.4  类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法：

.类名： {

    属性1：  属性值1；

    ......

}

 结构需要用class属性来调用class类的意思。

例：<div class='red'> 变红色</div>

 口诀:样式点定义   结构类(class)调用   一个或多个   开发最常用

注意:

  1. 类选择器使用"(英文点号)进行标识，后面紧跟着类名(自定义，我们自己命名的。
  2. 可以理解为给这个标签起了一个名字，来表示。
  3. 长名称或词组可以使用中横线来表示。
  4. 不要使用纯数字，中文等命名。
  5. 命名要有意义。
  6. 命名规范：见附件（web前端开发规范手册.doc)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类基础选择器</title><style>.red{color: red;}</style>
</head>
<body><ul><li class="red">无名的人</li><li>呓语</li><li>动物世界</li><li>天外来物</li><li>富士山下</li></ul>
</body>
</html>

 

2.5  类选择器一多类名

  •   我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选公这个标签。
  • 简单理解就是一个标签有多个名字。

2.5.1  多类名使用方式

<div class="red font20">亚瑟</div>

(1)在标签class属性中写多个类名

(2)多个类名中间必须用空格分开

(3)这个标签就可以分别具有这些类名的样式。

2.5.2  多类名开发中使用场景

(1)可以把一些标签元素相同的样式(共同部分)放到一个类里面。

(2)这些标签都可以调用这个公式的类，然后再调用自己独有的类。

(3)从而节省CSS代码统一修改也非常方便。

  • 各类名之间用空格隔开。
  • 简单理解:就是给某个标签添加了多个类或者这个标签有多个名字。 这个标签就可以分别具有这些类名的样式。
  • 从而节省CSS代码统一修改也非常方便。
  • 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器多类名的使用</title><style>.red {color: red;}.font35 {font-size: 35px;}</style>
</head>
<body><ul><li class="red font35">无名的人</li><li>呓语</li><li>动物世界</li><li>天外来物</li><li>富士山下</li></ul>
</body>
</html>

 

2.6  id选择器

  • id选择器可以为标有特定的id的HITML元素指定特定的样式。
  • HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义

语法：

#id名{

    属性1： 属性值1；

    ......

}

例如：将id为nav元素的内容设置为红色

#nav{

      color： red；

}

 注意:id属性只能在每个HTML文档中出现一次。

  • 口决:样式#定义，结构id调用，只能调用一次，别人切匆调用。
  • id选择器和类选择器的区别：
  1. 类选择器(class)好比人的名字，一个人可以有很多名字，同时一个名字可以被多个人使用。
  2. id选择器好比人的身份证号码，全中国是唯一的，不得重复。 
  3. id选择器和类选择器最大的不同在于使用次数上。 
  4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和
    JavaScrip搭配使用。 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><!-- 口诀：样式#定义，结构id调用，只能调用一次，别人切勿用 --><style>#pink{color: pink;}</style>
</head>
<body><div id="pink">为中华之崛起而读书</div>
</body>
</html>

 

2.7  通配符选择器

在CSS中，通配符选择器使用" * "定义，它表示选取页面中所有元素(标签) 。

语法：

*{

   属性1： 属性值1；

   ......

}

  •  通配符选择器不需要调用，自动就给所有的元素使用样式。
  •  特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距， 后期讲) 

*{

  margin： 0；

  padding： 0；

}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符选择器</title><style>*{color: red;}/* 这里把 html body div span li 等标签都改为了红色 */</style>
</head>
<body><div>我的</div><span>我的</span><ul><li>还是我的</li></ul>
</body>
</html>

 2.8  基础选择器总结

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

（今日分享暂时到此为止啦！为不断努力的自己鼓鼓掌吧。今日文案分享：人生重要的，不是现在所站的位置，而是所朝的目标。） 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/601810.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java前置一些知识

Java前置一些知识

文章目录 搭建Java环境安装path环境变量Java技术体系 Java执行原理JDK组成跨平台 IDEA管理Java程序 搭建Java环境 安装 oralce官网下载 JDK17 Windows 傻瓜式的点下一步就行&#xff0c;注意&#xff1a;安装目录不要有空格、中文 java 执行工具 javac 编译工具 类名和文件…
阅读更多...
如何监控特权帐户，保护敏感数据

如何监控特权帐户，保护敏感数据

IT基础设施的增长导致员工可以访问的凭据和资源数量急剧增加。每个组织都存储关键信息&#xff0c;这些信息构成了做出关键业务决策的基石。与特权用户共享这些数据可以授予他们访问普通员工没有的凭据的权限。如果特权帐户凭证落入不法分子之手&#xff0c;它们可能被滥用&…
阅读更多...
刷题之动态规划-子序列

刷题之动态规划-子序列

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;开始刷动态规划的子序列类型相关的题目&#xff0c;子序列元素的相对位置和原序列的相对位置是一样的 动态规划5个步骤 状态表示 &#xff1a;dp数组中每一个下标对应值的含义是什么>dp[i]表示什么状态转移方程&#xf…
阅读更多...
RAG基础知识及应用

RAG基础知识及应用

简单介绍下RAG的基础知识和RAG开源应用 “茴香豆" 一. RAG 基础知识 1. RAG工作原理 RAG是将向量数据库和大模型问答能力的有效结合&#xff0c;从而达到让大模型的知识能力增加的目的。首先将知识源存储在向量数据库中&#xff0c;当提出问题时&#xff0c;去向量数据库…
阅读更多...
Redis中的集群(一)

Redis中的集群(一)

集群 概述 Redis集群是Redis提供的分布式数据库方案&#xff0c;集群通过分片(sharding)来进行数据共享&#xff0c;并提供复制和故障转移功能 节点 一个Redis集群通常由多个节点(node)组成&#xff0c;在刚开始的时候&#xff0c;每个节点都是相互独立的&#xff0c;它们都…
阅读更多...
电脑开机启动项设置

电脑开机启动项设置

电脑开机启动项设置 一、Windows 系统&#xff1a; 1、Windows 系统&#xff0c;可以通过【系统配置实用程序】来设置开机启动项&#xff1a; 1&#xff09;、按【WinR】组合键&#xff0c;打开【运行】对话框。 2&#xff09;、输入【msconfig】&#xff0c;点击【确定】或…
阅读更多...
4.2C++

4.2C++

写一个char类型的字符数组&#xff0c;对该数组访问越界时抛出异常&#xff0c;并做处理。 #include <iostream>using namespace std; void fun(char (&a)[10],int i) {if(i>10){throw int();}else if(aNULL){throw double();}cout<<"访问了第"&…
阅读更多...
K8s学习八（配置与存储_配置）

K8s学习八（配置与存储_配置）

配置与存储 配置管理 ConfigMap ConfigMap的创建 一般用于去存储 Pod 中应用所需的一些配置信息&#xff0c;或者环境变量&#xff0c;将配置于 Pod 分开&#xff0c;避免应为修改配置导致还需要重新构建 镜像与容器。configmap缩写为cmkubectl create cm -h来查看创建命令…
阅读更多...
前端二维码工具小程序产品使用说明书

前端二维码工具小程序产品使用说明书

一、产品概述 前端二维码工具小程序是一款便捷实用的二维码生成与识别工具&#xff0c;通过本小程序&#xff0c;用户可以轻松根据文本或链接生成二维码&#xff0c;并支持扫一扫功能识别二维码内容&#xff0c;同时提供复制识别内容的功能。此外&#xff0c;本小程序还具备美…
阅读更多...
在NBA我需要翻译--适配器模式

在NBA我需要翻译--适配器模式

1.1 在NBA我需要翻译&#xff01; "你说姚明去了几年&#xff0c;英语练出来了哦&#xff0c;我看教练在那里布置战术&#xff0c;他旁边也没有翻译的&#xff0c;不住点头&#xff0c;瞧样子听懂没什么问题了。" "要知道&#xff0c;最开始&#xff0c…
阅读更多...
xilinx SATA GTY PHY适配

xilinx SATA GTY PHY适配

xilinx sata phy主要是通过transceiver IP 进行移植&#xff0c;xilinx的底层目前主要有gtp gtx gth gty,不同的底层&#xff0c;PHY都需要重新适配 以下开始针对ZCU器件的GTH4底层进行配置 首先可以选择对应的类型 2&#xff0c;设置数据位宽&#xff0c;我这里设置为32位宽…
阅读更多...
百度松果菁英班——机器学习实践五：明星图片爬取

百度松果菁英班——机器学习实践五：明星图片爬取

飞桨AI Studio星河社区-人工智能学习与实训社区 &#x1f96a;图片爬取 import requests import os import urllib ​ class GetImage():def __init__(self,keyword大雁,paginator1):# self.url: 链接头self.url http://image.baidu.com/search/acjson?self.headers {User…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023