HTML(8)——CSS选择器

目录

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.mzph.cn/diannao/31710.shtml

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

相关文章

Tower 使用指南

Tower 使用指南 目录 打开 git 仓库查看分支历史切换分支提交修改推送修改创建标签自动拉取最新代码 打开 git 仓库 File -> Open然后选择项目目录 查看分支历史 切换分支 提交修改 推送修改 创建标签 自动拉取最新代码

【阿里云服务器】【弹性云服务ECS】通过ssh登录远程服务器

一、操作系统 使用Windows11主机上的Ubuntu子系统&#xff0c;如下图所示&#xff1a; 二、云服务器登录方法 需知道&#xff1a;服务器ip地址、登录名和自己设置的登录密码&#xff1a; 上述系统用户名为root&#xff0c;需要在Ubuntu子系统中同样切换至root用户&#xff…

3GPP R18冻结,哪些信息值得关注?

这两天网上到处都是R18冻结的新闻&#xff0c;小枣君也凑个热闹&#xff0c;聊聊这个话题。 首先给小白科普一下&#xff0c;所谓的R18&#xff0c;全称是Release-18。它是通信国际标准组织3GPP&#xff08;第三代合作伙伴计划&#xff09;所推出协议标准的一个版本。 自从1998…

Ubuntuwin11双系统

一、准备工作 win11与ubuntu20.4双系统安装案例教程,先查看引导模式参数不服则不要安装否则会报异常 查看BIOS引导模式 查看磁盘分区格式 下载Ubuntu镜像 所有版本下载地址,我的华为云镜像ubuntu20.4这个版本地址

凯迪仕霸榜全渠道TOP1 全域曝光100亿

618年中狂欢盛典&#xff0c;已正式落下帷幕。智能锁行业领头羊凯迪仕&#xff0c;凭借过硬的科技产品力和品牌势能&#xff0c;在全域流量加持以及传奇大师K70新品强势曝光之下&#xff0c;霸榜天猫、京东、抖音各平台&#xff0c;稳居各类型榜单榜首&#xff0c;继续以行业领…

Python xlrd库:读excel表格

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

带颜色的3D点云数据发布到ros1中(通过rviz显示)python、C++

ros中发布点云数据xyz以及带颜色的点云数据xyzrgb ros中发布点云数据xyz可以直接用python来做或者C(看个人偏好) ros中发布带颜色的点云数据xyzrgb环境1.新建ROS工作空间2.创建功能包 ros中发布点云数据xyz 可以直接用python来做或者C(看个人偏好) 在这里我们带有颜色的点云数…

TikTok 推出专属AI 内容工具

TikTok最近推出了一款极具实用性的新工具包——TikTok Symphony。它融合了生成式人工智能技术&#xff0c;让内容创作变得更加迅速和便捷。 无论是营销人员还是创作者&#xff0c;都能在TikTok上轻松制作出高质量的内容。Symphony将人类的创造力与AI的高效性完美融合&#xff0…

市值3万亿英伟达的崛起:技术、坚持与市场的力量,厚积薄发的经典案例

在科技领域&#xff0c;英伟达&#xff08;NVIDIA&#xff09;的故事无疑是一个厚积薄发的经典案例。作为一家专注于图形处理单元&#xff08;GPU&#xff09;的公司&#xff0c;英伟达用31年的时间证明了技术的价值、计算的价值和坚持的价值。本文将详细探讨英伟达如何从一家市…

算法题day48(补6.3日卡:dp07)

一、多重背包理论基础&#xff1a; 有N种物品和一个容量为V 的背包。第i种物品最多有Mi件可用&#xff0c;每件耗费的空间是Ci &#xff0c;价值是Wi 。求解将哪些物品装入背包可使这些物品的耗费的空间 总和不超过背包容量&#xff0c;且价值总和最大。 其实就是变相的01背包…

python-Langchain-Chatchat+ChatGLM2-6B在16G内存电脑上运行

python-Langchain-Chatchat+ChatGLM2-6B在16G内存电脑上运行 下载代码ChatGLMLangchain-Chatchat环境准备下载模型Langchain-Chatchat配置configs中example文件修改configs/model_config.py修改修改 server配置知识库初始化启动项目遇到的报错参考链接下载代码 ChatGLM https…

如何系列 如何学习外企英语(持续学习中...)

文章目录 背景计划相关软件和资料单词 短语 背景 软件开发行业&#xff0c;想进外企或者已在外企进行英语提升。 计划 1.每天最少30分钟多邻国。 2.记录平常工作中遇到的句子和单词&#xff0c;并给出分析和示例。 3.把手机和电脑等都调成英文。 4.听 podcast 磨耳朵(pod…

【Go】十四、图形验证码、短信验证码、注册接口与redis的简单使用

图形验证码 如何嵌入图形验证码工作&#xff1a; 这里选择使用captcha 开源库进行验证码设计&#xff1a; 选用下面的地址进行验证码开发工作 https://zh.mojotv.cn/go/refactor-base64-captcha 基础功能构建 在 api 目录下创建 captcha.go 用来编写验证码操作 package …

车辆轨迹预测系列 (二):常见数据集介绍

车辆轨迹预测系列 (二)&#xff1a;常见数据集介绍 文章目录 车辆轨迹预测系列 (二)&#xff1a;常见数据集介绍1、NuScenes (2020)&#xff1a;1、下载2、说明 2、Waymo Open Dataset (2020)&#xff1a;1、介绍2、概述3、下载4、教程5、参考 3、Lyft Level 5 (2020)&#xff…

VOC数据集

VOC&#xff08;Visual Object Classes&#xff09;格式的数据集是一种用于计算机视觉任务的标准数据集格式&#xff0c;它最初是由Pascal VOC&#xff08;PASCAL Visual Object Classes&#xff09;数据集引入的。VOC数据集格式定义了一套标准化的数据集结构&#xff0c;包括X…

SD-WAN为什么适合小企业

SD-WAN&#xff08;软件定义广域网&#xff09;是一种革新性的网络技术&#xff0c;通过软件智能管理&#xff0c;实现灵活和高效的网络连接。在数字化转型浪潮中&#xff0c;企业对网络稳定性和性能的要求不断提升&#xff0c;SD-WAN因此受到了广泛关注。对于资源有限的小型企…

JAVA NIO(二) Buffer和Channel

一&#xff0c;基本使用 1&#xff0c; 一个Socket连接使用一个Channel来表示&#xff0c;以前直接操作Socket文件描述符来对读写缓冲区操作&#xff0c;比如读数据到用户空间的一个byte数组&#xff0c;NIO中Channel对这个过程作了封装&#xff0c;其中用户空间的byte数组就类…

macbook rust项目编译跨平台windows,linux

创建项目 cargo new test11, 编译windows exe包 rustup target add x86_64-pc-windows-gnu brew install mingw-w64 cargo build --target i686-pc-windows-gnu2. 编译ubuntu linux包 brew install FiloSottile/musl-cross/musl-cross rustup target add x86_64-unknown-lin…

Elk安装及使用

es安装及使用 单机版安装 集群安装 132 node-01 133 node-02 135 node-03 日志用户权限有问题 看日志 解决方案&#xff1a; 出现错误后&#xff0c;再次重启前&#xff0c;需要删除三个节点/data/下的内容 9300-http 9300-tcp logstasha安装及使用 Ssh错误 Yum安装默认路…

2024-06-21力扣每日一题

链接&#xff1a; LCP 61. 气温变化趋势 题意 A、B两个数组&#xff0c;数组内相邻两个数字有大于、等于、小于三种变化情况&#xff0c;求最长的一段&#xff0c;使两个数组的这一段变化情况相同&#xff0c;并且不要求这一段只能有一种变化 解&#xff1a; 因为数组内只…