CSS||选择器

目录

作用

分类

基础选择器

标签选择器

​编辑类选择器

id选择器 

通配符选择器


作用

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

 选择器的使用一共分为两步:

1.找到需要定义的标签

2.设置这些标签的样式

分类
基础选择器

由单个选择器组成

标签选择器

用HTML标签名称作为选择器,按照标签进行分类,为页面中某一类标签指定统一的CSS样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myweb</title><style>p{color:aqua;font-size: larger;font-weight: bold;text-align: center;background-color: #000;font-family: Arial, Helvetica, sans-serif;}</style>
</head>
<body><p>HELLO WORLD</p>
</body>
</html>

 运行结果:

类选择器

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

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

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

  • 类的名字由我们自己定义(不能用已知标签名字)
  • 多个单词用短横线来分割
  • 不要出现纯数字,中文等命名,尽量使用英文字母来表示
  • 命名要有意义
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myweb</title><style>.mycss{color:aqua;font-size: larger;font-weight: bold;text-align: center;background-color: #000;font-family: Arial, Helvetica, sans-serif;}</style>
</head>
<body><p class="mycss">HELLO WORLD</p><p>young man</p>
</body>
</html>

运行结果: 

 类选择器-多类名

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myweb</title><style>.mycss {background-color:aqua;}.mycss2 {width: 800px;height: 400px;}</style>
</head>
<body><div class="mycss mycss2">HELLO WORLD</div>
</body>
</html>

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

在多个类名中间必须用空格分开

id选择器 

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义

注:只能调用一次

#id名{属性1:属性值1;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>myweb</title><style>#purple {color:purple;}</style>
</head>
<body><div id="purple" class="mycss mycss2">HELLO WORLD</div>
</body>
</html>
通配符选择器

在CSS中,通配符选择器使用“*”定义,它表示选取页面中所有元素

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

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

相关文章

微信小程序+前后端开发学习材料2-(视图+基本内容+表单组件)

学习来源 视图 1.swiper 滑块视图容器。其中只可放置swiper-item组件&#xff0c;否则会导致未定义的行为。 显示面板指示点indicator-dots 基础内容 1.icon 图标组件 实例演示 2.progress 进度条。组件属性的长度单位默认为px&#xff0c;咱用rpx。 实例演示 这…

Ubuntu20.04-剪贴板

针对图形界面用户 1.两种方式 1.1 安装Parcellite 简单轻量级剪贴板管理器 sudo apt install parcellite 1.2 安装Gpaste 更强大的剪贴板管理器&#xff0c;包含历史记录和同步功能 sudo apt install gpaste

wox 启动的cmd无法识别npm

安装软件步骤&#xff1a;everything->wox->nvm->npm->yarn 新打开的任意cmd窗口均发现可以识别npm和yarn命令&#xff0c;但是wox启动的cmd窗口就不行 联想到cmd的特性是一个cmd窗口打开后&#xff0c;其运行环境就会固定&#xff0c;不会随着你系统环境变量的更…

【昕宝爸爸小模块】深入浅出之POI是如何做大文件的写入的

➡️博客首页 https://blog.csdn.net/Java_Yangxiaoyuan 欢迎优秀的你&#x1f44d;点赞、&#x1f5c2;️收藏、加❤️关注哦。 本文章CSDN首发&#xff0c;欢迎转载&#xff0c;要注明出处哦&#xff01; 先感谢优秀的你能认真的看完本文&…

逆向使用webpack打包的网站

webpack webpack 是 JavaScript 应用程序的模块打包器,可以把开发中的所有资源&#xff08;图片、js文件、css文件等&#xff09;都看成模块&#xff0c;通过loader&#xff08;加载器&#xff09;和 plugins &#xff08;插件&#xff09;对资源进行处理&#xff0c;打包成符…

SpringBoot项目里用MultipartFile作为入参获取到的file为什么null

前言&#xff1a; 最近在项目中用到了Excel模板导入功能&#xff0c;但是在测试阶段用Postman测试时&#xff0c;通过Post请求&#xff0c;传到后端的File一直为null。其中前端传参和请求都没问题&#xff0c;后端的接参也没问题&#xff0c;问题出在过滤器的复用上。 问题场…

Windows如何安装VNC+Viewer+cpolar实现远程Ubuntu桌面?

文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…

2.4 网络层01

2.4 网络层01 2.4.1 网络层概述 网络层的主要任务是实现网络互连&#xff0c;进而实现数据包在各网络之间的传输。 异构网络内部的计算机要想实现通信是不需要实现网络互联的&#xff0c;异构网络之间要想实现通信就必须实现网络互连。 路由器工作在五层协议体系结构的网络…

计算机毕业设计 基于Java的国产动漫网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

CSDN如何使用markdown

第一步&#xff1a;点击头像 第二步&#xff1a;选择管理博文 第三步&#xff1a;选择博客设置 第四步&#xff1a;勾选markDown编辑器 第四步&#xff1a;代码皮肤样式选择&#xff08;可选项&#xff09;

【论文阅读】Consistency Models

文章目录 IntroductionDiffusion ModelsConsistency ModelsDefinitionParameterizationSampling Training Consistency Models via DistillationTraining Consistency Models in IsolationExperiment Introduction 相比于单步生成的模型&#xff08;例如 GANs, VAEs, normalizi…

sonarqube的多分支检查

sonarqube的多分支检查 参考文档: Sonarqube(社区版)支持扫描多分支配置 SonarQute安装与多分支扫描分析插件安装 持续集成交付CICD&#xff1a;Sonarqube多分支代码扫描 1.手动安装插件 插件地址 : https://github.com/mc1arke/sonarqube-community-branch-plugin 需要注意的…