HTML(8)——CSS选择器

devtools/2024/11/13 9:52:40/
htmledit_views">

目录

CSS引入方式 

选择器

标签选择器 

类选择器

id选择器

 通配符选择器


CSS层叠样式表是一种样式表语言,用来描述HTML文档的呈现

书写位置:title标签下方添加style双标签,style标签里写CSS代码

<title>css</title>

<style>

  /*选择器*/

  p{

    /*css属性*/

    }

</style>

<p>文字</p>

CSS引入方式 

内部样式表:CSS代码写在style里面

外部样式表:在HTML使用link标签引入单独的CSS文件

<link rel="stylesheet" href="地址">

 行内样式:CSS写在标签的style属性值里

<div style ="color:red";>文字</div>

选择器

作用:查找标签,设置样式

常见的基础选择器

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

标签选择器 

使用标签名作为选择器,选中同名标签设置相同的样式

类选择器

作用:查找标签,差异化设置标签的显示效果

步骤:

  • 定义类选择器  .类名
  • 使用类选择器,标签添加class="类名"

class属性可以写多个类名,中间用空格隔开。类名最好见名知意。

id选择器

作用:查找标签,差异化设置标签的显示效果

id选择器一般配合JS使用

步骤:

  • 定义id选择器  #id名
  • 使用id选择器,标签添加id="id名"

注:同一个id选择器在一个页面只能使用一次

 通配符选择器

作用:查找页面所有标签,设置相同的样式

通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

*{

color:red

}


http://www.ppmy.cn/devtools/55707.html

相关文章

Java陪诊小程序医院陪护陪诊小程序APP源码

&#x1f4ab;贴心守护&#xff0c;就医无忧&#x1f496; &#x1f3e5; 走进医院&#xff0c;不再迷茫 你是否曾经在医院里感到迷茫无助&#xff1f;长长的队伍、复杂的流程、陌生的环境……每一次就医都像是一场“冒险”。但现在&#xff0c;有了医院陪护陪诊小程序&#…

gitlab安装在虚拟机下,使用gitlabrunner通过宿主机网络访问

两种方法&#xff1a; 一.配置虚拟机网络连接方式为桥接 1.vim /etc/gitlab/gitlab.rb 设置external_url 为宿主机ip和端口 2.gitlab-ctl reconfigure 3.gitlab-ctl restart 二.配置虚拟机网络连接方式为nat&#xff0c;且对做了端口映射 1.vim /etc/gitlab/gitlab.rb …

华为HCIP Datacom H12-821 卷9

1.单选题 下面哪些策略工具不能够应用于 OSPF A、as-path filter B、access-list C、route policy D、prefix-list 正确答案: A 解析: ip as-path-filter命令用来创建AS路径过滤器,AS-Path属性是BGP的私有属性,所以该过滤器主要应用于BGP路由的过滤: 2.单选题

大模型AI技术实现语言规范练习

人工智能技术可以为语言规范练习提供多种有效的解决方案&#xff0c;帮助学习者更有效地掌握语言规范。以下是一些常见的应用场景。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 智能纠错 利用自然语言处理技术&#xff0c;可以…

VScode如何调节编辑器字体大小

首先&#xff0c;在vscode界面&#xff0c;依照顺序输入“Ctrlk”、“Ctrls”&#xff0c;即可进入键盘快捷方式设定界面。&#xff08;如下图所示&#xff09; 其次&#xff0c;在搜索框中输入“缩小”或者“放大”&#xff0c;就会出现对应的“缩小编辑器字体”或者“放大编…

Vue3 按钮根据屏幕宽度展示折叠按钮

文章目录 一、组件封装二、使用三、最终效果(参考)四、参考 一、组件封装 ButtonFold.vue 1、获取父组件的元素&#xff0c;根据元素创建动态插槽 2、插槽中插入父元素标签。默认效果和初始状态相同。 3、当屏幕宽度缩小时&#xff0c;部分按钮通过 dropdown 的方式展示出来&a…

怎样实现聊天弹幕效果?

可以使用HTML、CSS和JavaScript的组合。以下是一个简单的步骤和示例代码&#xff0c;说明如何创建一个基本的弹幕效果&#xff1a; HTML结构&#xff1a; 创建一个用于显示弹幕的容器和输入弹幕的表单。 <!DOCTYPE html> <html lang"en"> <hea…

SelfReg-UNet:解决UNet语义损失,增强特征一致性与减少冗余的优化模型

SelfReg-UNet&#xff1a;解决UNet语义损失&#xff0c;增强特征一致性与减少冗余的优化模型 提出背景拆解类比&#xff1a;整理书架语义一致性正则化内部特征蒸馏为什么 UNet 会有语义损失&#xff1f; 提出背景 论文&#xff1a;https://arxiv.org/pdf/2406.14896 代码&…