css之id选择器和class类选择器

2023-11-20

一 css基础

css定义:可以设置网页中的样式,外观,美化
css中文名字:级联样式表,层叠样式表,样式表

二 css基础语法

1.style标签写在title标签后面
2.选择器{属性名1:属性值1;属性名2:属性值2}
color 代表颜色
font-size 代表字号,px为像素单位
在这里插入图片描述

三 开发人员调试工具

1.打开方式:F12或在网页中右键-检查
2.找到菜单中的第一个选项:elements
3.用鼠标左键点击想要查看的标签
4.右侧就会出现对应的css代码
5.想设置颜色:点击颜色方框,使用调色盘改变颜色后,别忘了把颜色的代码放在程序中
6.设置字体大小:鼠标左键点击数字,可以按住上下键,不要忘记改代码
在这里插入图片描述

四 标签选择器

选择器:在大括号之前写的内容,就是选择器
标签选择器:用标签的名字来进行页面元素,标签,标记的选择
在这里插入图片描述

五 id选择器

id选择器:用html标签中的id属性来进行选取的方式
在这里插入图片描述

六 命名规则

1.不能数字开头
2.不能使用除了中划线和下划线之外的符号
3.不推荐使用中文
4.尽量做到见名知意
唯一性:
1.id命名不可以重复使用;在js中会因为id 的命名冲突而导致报错
2.每个标签只能有一组id
在这里插入图片描述

七 class类选择器

类选择器:使用html中的class的值来进行选取的方式
注意:class类选择器可以重复命名
每个标签可以有多个class类名,中间使用空格分割即可
命名规则:与id的命名规则完全一样。
在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css之id选择器和class类选择器 的相关文章

  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • Cosmos DB Mongo API 如何管理“请求率很大”情况

    我有以下代码 async function bulkInsert db collectionName documents try const cosmosResults await db collection collectionName
  • 可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

    我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗 我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
  • 避免在 ES6 的函数内定位 this 的对象作用域

    例如 我正在使用 D3 js 运行一个项目 导入特定模块并调用它们的函数 Setup TypeScript ES6 导入特定的 D3 组件 角6 我有一个对象 在本例中是一个角度指令 并在 SVG 画布上绘制一些圆圈 并希望它们在拖动事件上
  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div
  • “|”是什么意思(单管道)在 JavaScript 中做什么?

    console log 0 5 0 0 console log 1 0 1 console log 1 0 1 为什么0 5 0返回零 但任何整数 包括负数 都返回输入整数 单管道 有什么作用 这是一个按位或 https developer
  • 带有 mkdocs 的本地 mathjax

    我想在无法访问互联网的计算机上使用 MathJax 和 Mkdocs 因此我不能只调用 Mathjax CDN Config mkdocs yml site name My Docs extra javascript javascripts
  • 自定义指令链接中的 element.replaceWith 仅在第一次调用时有效

    我是 Angularjs 的新手 不太了解幕后的情况 基本上我想创建一个 E 扭结指令 基于控制器中的数据 我动态创建html 就像整个 表 一样 以替换该指令 我的 html 文件中的指令是这样的
  • @aspnet/signalr 与 @microsoft/signalr javascript 库

    aspnet signalr 与 microsoft signalr javascript 库有什么区别 两者似乎都对 DotNetCore SignalR 有效 两者似乎都很活跃 在一些教程中 我找到 aspnet signalr 在Do
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • PHP 共享标头而不使用服务器端脚本?

    到目前为止我总是通过 PHP 解决简单的问题 您有一个包含页眉 菜单 页脚和内容字段的网站 每个页面的页眉 菜单和页脚通常是相同的 在没有 PHP 或任何其他服务器端语言的情况下 如何使页眉 菜单和页脚数据仅存在于一个文件中 例如 您不会有
  • JavaScript 中的实时摩尔斯电码转换器

    在看到谷歌关于莫尔斯电码 gmail 的愚人节笑话后 我想我应该尝试用 javascript 创建一个实时莫尔斯电码转换器 我正在使用正则表达式和替换将莫尔斯电码更改为字符 例如 replace g a replace g r 我遇到的问题
  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a
  • Aurelia - 仅 HTML 自定义元素的内联定义

    我的 Aurelia 视图模型中有一个递归对象 如下所示 Class BottomlessPit Name string MorePits BottomlessPit null 因此 我想在 Aurelia 视图中使用递归模板 它只会在一个
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • 搜索多维数组 JavaScript

    我有一个如下所示的数组 selected products 0 r1 7up 61 Albertsons selected products 1 r3 Arrowhead 78 Arrowhead selected products 2 r
  • JQuery 删除和内存泄漏

    我正在开发一个游戏 我看到了很多内存消耗 我使用jquery animate 动画完成后 我 remove 元素 我的问题是 从 dom 树中删除一个元素后 对象还存在记忆中吗 Javascript 是一种垃圾收集语言 这意味着当没有代码保

随机推荐

  • [转]使用Midjourney命令输出稳定的漫画角色

    转载自 用对Midjourney命令你也可以输出稳定的漫画角色 qq com 昨天的文章已经教会了大家如何成为15分钟快速制作一幅小漫画 有兴趣的可以翻阅上一篇文章 但是不少同学会发现 Midjourney的随机性比较强 即使输入相同的命令
  • 转载:《七周成为数据分析师》

    百日计划第一周总结 1 计划 1 彻底结束之前预定暑假完成的天善学院课程 七周数据分析师 2 总结 七周数据分析师 2 完成情况 1 完成 七周成为数据分析师 任务 2 周总结与 七周数据分析师 一起完成 七周数据分析师 总结 第一周 数据
  • 【Python零基础入门篇 · 17】:模块、模块的使用、过滤执行代码写法、包的使用

    文章目录 模块 内置模块 第三方模块 自定义模块 模块的使用 import 模块名 导入自定义模块 from import 模块起别名 as 导入多模块 模块 模块 就是 py文件 里面定义了一些函数和变量 需要的时候就可以导入这些模块 执
  • 零基础Java详细的jdk的下载以及安装配置

    文章目录 一 下载jdk 二 配置jdk 三 查看配置是否成功 一 下载jdk 1 登录oracle官网 2 3 4 点进去往下拉 会有jdk新版本 接受许可协议 直接下载 zip压缩文档就行 也可以直接下载 exe安装版本 5 找到压缩包
  • FPGA实现VGA显示图片

    利用FPGA在带有VGA接口的液晶显示器上显示图片 电路原理图 端口说明 VGA R2 VGAB0的8个端口位VGA的RGB数据位 VGA HS为行同步信号 VGA VS为场同步信号 以分辨率为640x480为例 刷新速率为60Hz 每幅图
  • [Python学习] 专题六.局部变量、全局变量global、导入模块变量

    定义在函数内的变量有局部作用域 在一个模块中最高级别的变量有全局作用域 本文主要讲述全局变量 局部变量和导入模块变量的方法 参考 Python核心编程 第二版 一 局部变量 声明适用的程序的范围被称为了声明的作用域 在一个过程中 如果名字在
  • 基于芯科Ember SDK开发的ZigBee ota client验证固件时崩溃(Reset info: 0x0A (FLT)), SDK Bug导致!

    现象 ZigBee子设备新固件下载完成后 准备校验其合法性 代码运行至检验部分 MCU崩溃重启 日志如下 RECV ASCII gt Processing message len 33 profile 0104 cluster 0019 T
  • IOS presentViewController没办法全屏的问题

    需要弹出的视图控制器的属性设置为0即可 mImagePick modalPresentationStyle 0
  • sklearn包MLPClassifier的使用详解+例子

    MLPClassifier 参数说明 hidden layer sizes 元组形式 长度n layers 2 默认 100 第i元素表示第i个神经元的个数 activation identity logistic tanh relu 默认
  • Vue3中的pinia使用(收藏版)

    1 pinia介绍 个人网站 紫陌 笔记分享网 想寻找共同学习交流 共同成长的伙伴 请点击 前端学习交流群 pinia 是 Vue 的存储库 它允许您跨组件 页面共享状态 就是和vuex一样的实现数据共享 依据Pinia官方文档 Pinia
  • 【Python】Python 模式匹配与正则表达式

    Python 模式匹配与正则表达式 1 模式匹配与正则表达式 你可能熟悉文本查找 即按下Ctrl F 输入你要查找的词 正则表达式 更进一步 它们让你指定要查找的 模式 你也许不知道一家公司的准确电话号码 但如果你住在美国或加拿大 你就知道
  • 21,verilog之宏define介绍

    注 学习 交流就在博主的个人weixin公众号 FPGA动力联盟 留言或直接 博主weixin fpga start 私信 宏define提供用一个相对简单的文字来表示一大段真正有意义的文字作用 换句话说 就是综合软件见到定义的宏 就用这个
  • uni-app页面点击tab左右滑动(swiper)

    uni app基于
  • 自动化测试工具——selenium 用前须知

    OK 经过上的过程 我相信你一定做出的相应的选择 如果你选择的是selenium 工具 那么接着往下阅读 首选你在开始selenium之前 需要花一到两个月时间去学一门语言 这里是根据没有语言基础的同学而定的 我推荐ruby python
  • swing重定向输出到jtextArea

    import java awt Font import java io IOException import java io OutputStream import java io PrintStream import javax swin
  • Android Studio 中模拟器无法打开,提示Error launching emulator

    一 遇到的问题 运行模拟器时 提示 Error launching emulator 二 解决方法 打开SDK Manager 点击取消Android Emulator 然后重新运行 会提示下载一些文件 按着操作即可 如果没问题就不需要取消
  • 深入解析String intern()

    在 JAVA 语言中有8中基本类型和一种比较特殊的类型String 这些类型为了使他们在运行过程中速度更快 更节省内存 都提供了一种常量池的概念 常量池就类似一个JAVA系统级别提供的缓存 8种基本类型的常量池都是系统协调的 String类
  • Python3.8安装tensorflow

    我现在的版本是3 8 8 64 bit 编辑器是Visual Studio Code 之前试过好多次都失败了 都是因为Python的版本和tensorflow版本的各种问题 后来下过anaconda 用不习惯 还是回来捯饬Visual St
  • onenote导入html文件,office js - OneNote Add in: Getting HTML content - Stack Overflow

    In the example code is provided to get RichText It is able to get the plain text content of the page but I cannot seem t
  • css之id选择器和class类选择器

    一 css基础 css定义 可以设置网页中的样式 外观 美化 css中文名字 级联样式表 层叠样式表 样式表 二 css基础语法 1 style标签写在title标签后面 2 选择器 属性名1 属性值1 属性名2 属性值2 color 代表