【CSS基础--CSS选择器的常见用法】

CSS选择器的常见用法

  • 1.CSS介绍
    • 1.1 基本语法规范
    • 1.2 引入样式
    • 1.3 规范
  • 2. CSS选择器
    • 2.1 标签选择器
    • 2.2 类选择器
    • 2.3 ID选择器
    • 2.4 复合选择器

1.CSS介绍

CSS(Cascading Style Sheet),层叠样式表,由于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离。通俗的可以认为是现代化妆。

1.1 基本语法规范

选择器+{一条/多条声明}

  • 选择器就是针对谁修改
  • 声明就是修改的内容
  • 声明的属性是键值对。使用 : (冒号)进行分割键和值
  • CSS要写在style标签中,而style标签可放任何位置,但一般放head标签内

在这里插入图片描述

1.2 引入样式

  • 行内样式:在标签内使用style属性,属性值是CSS属性键值对。

  • 内部样式:定义style标签,在标签内定义CSS样式。

  • 外部样式:定义link标签,通过href属性引入外部CSS。

内部样式会出现大量代码冗余,不利于后期维护所以不常用。行内样式,只适合写简单样式,外部样式,html和css实现了完全的分离,在企业开发中比较常用

1.3 规范

样式大小写:css不区分大小写,一般在开发中使用小写
空格规范:冒号后面带空格,选择器和{}之间也有一个空格

2. CSS选择器

CSS选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性

  1. 标签选择器
  2. class(类)选择器
  3. id选择器
  4. 复合选择器
  5. 调配选择器

在这里插入图片描述

2.1 标签选择器

选择所有的a标签,设置颜色为红色
在这里插入图片描述

2.2 类选择器

符号.(点)加类名,一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割)
在这里插入图片描述

2.3 ID选择器

#加id里面的名称
在这里插入图片描述

2.4 复合选择器

只设置ul下的li中的a标签
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTML批量文件上传2——进度条显示

作者:私语茶馆 非常多的云应用中需要上传文本,包括图片,文件等等,这些批量文件上传,往往涉及到进度条显示,多文件上传等,这里分享一个非常好的案例,来自BootStrapfriendly.com&#…

kubernetes附加组件—图形化管理工具Dashboard

一、介绍 Dashboard是k8s集群管理的一个WebUi,它是k8s的一个附加组件,需要单独部署。 我们可以通过图形化的方法,创建、删除、修改、查询k8s资源。 二、安装部署dashboard组件 Github地址:GitHub - kubernetes/dashboard: Gen…

物联网实战--平台篇之(四)账户后台交互

目录 一、交互逻辑 二、请求验证码 三、帐号注册 四、帐号/验证码登录 五、重置密码 本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631…

自动驾驶中常见坐标系极其转换

各个传感器坐标系 相机坐标系统 摄像头的作用是把三维世界中的形状、颜色信息,压缩到一张二维图像上。基于摄像头的感知算法则是从二维图像中提取并还原三维世界中的元素和信息,如车道线,车辆、行人等,并计算他们与自己的相对位置。 感知算法和相机相关的坐标系有图像坐…

javaWeb入门(自用)

1. vue学习 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"https://unpkg.com/vue2"></script> </head> <body><div id"…

大语言模型入门介绍(附赠书)

自2022年底ChatGPT的震撼上线以来&#xff0c;大语言模型技术迅速在学术界和工业界引起了广泛关注&#xff0c;标志着人工智能技术的又一次重要跃进。作为当前人工智能领域的前沿技术之一&#xff0c;代表了机器学习模型在规模和复杂性上的显著进步。它们通常由深度神经网络构成…

解决微信小程序电脑能正常使用,手机端无法正常访问的SSL证书问题

目录 前言1 问题描述与调试2 探索问题根源2.1 用户反馈收集2.2 尝试手机端访问2.3 PC端调试 3 确认问题与解决方案3.1 检查SSL证书3.2 重新部署SSL证书3.3 测试修复效果 4 SSL&#xff08;Secure Sockets Layer&#xff09;证书中间证书4.1 SSL证书链的构成4.2 中间证书的作用 …

MindSponge分子动力学模拟——定义一个分子系统

技术背景 在前面两篇文章中&#xff0c;我们分别介绍了分子动力学模拟软件MindSponge的软件架构和安装与使用。这里我们进入到实用化阶段&#xff0c;假定大家都已经在本地部署好了基于MindSpore的MindSponge的编程环境&#xff0c;开始用MindSponge去做一些真正的分子模拟的工…

04、Kafka集群安装

03、Kafka 集群安装 1、准备工作 首先准备一台虚拟机&#xff0c;centos7系统&#xff0c;先在一台上配置安装后&#xff0c;最后克隆成多台机器。 1.1 安装JDK &#xff08;1&#xff09;下载JDK&#xff0c;上传到 /root/software 路径 下载地址&#xff1a;https://www…

DELL EMC unity存储系统如何初始化

在客户的存储使用过程中&#xff0c;经常会碰到一些场景需要对存储系统做重新初始化&#xff0c;就是回到出厂时候的配置。比如&#xff0c;客户设备要利旧&#xff0c;二次使用&#xff0c;一般都要回到出厂状态做重新配置的动作。存储严重故障&#xff0c;没有能力修复或者数…

现货黄金今日行情分析:昨日高低点法

进行交易之前&#xff0c;投资者要对现货黄金今日行情进行一波分析&#xff0c;我们交易决策应该建立在合理分析的基础之上。那么打开市场交易软件看到现货黄金今日行情之后&#xff0c;该如何着手进行分析呢&#xff1f;下面我们就来讨论一下具体的方法。 要进行现货黄金今日行…

【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能

QuikGraph库介绍 项目地址&#xff1a;https://github.com/KeRNeLith/QuikGraph QuikGraph为.NET提供了通用的有向/无向图数据结构和算法。 QuikGraph提供了深度优先搜索、广度优先搜索、A*搜索、最短路径、k最短路径&#xff0c;最大流量、最小生成树等算法。 QuikGraph最初…

大模型的不足与解决方案

文章目录 ⭐ 不具备记忆能力 上下文窗口受限⭐ 实时信息更新慢 新旧知识难区分⭐ 内部操作很灵活 外部系统难操作⭐ 无法为专业问题 提供靠谱的答案⭐ 解决方案的结果 各有不同的侧重 在前面三个章节呢&#xff0c;为大家从技术的角度介绍了大模型的历程与发展&#xff0c;也为…

Jenkins +git +web(vue) centos8.5 实战打包部署 运维系列二

1新建一个工程 #cat qy.sh #!/bin/bash cd /data/.jenkins/workspace/web rm -rf dist/ rm -rf qysupweb.tar.gz npm run build tar -czvf qysupweb.tar.gz dist/ #点击构建

STM32学习计划

前言&#xff1a; 这里先记录下STM32的学习计划。 2024/05/08 今天我正在学习的是正点原子的I.MX6ULL APLHA/Mini 开发板的 Linux 之ARM裸机第二期开发的视频教程&#xff0c;会用正点原子的I.MX6ULL开发板学习第二期ARM裸机开发的教程&#xff0c;然后是学习完正点原子的I.M…

python数据分析——pandas DataFrame基础知识1

参考资料&#xff1a;活用pandas库 1、加载数据集 通常调用read_csv函数来加载CSV数据文件。若是.tsv文件也是用read_csv函数。 # 导入库 import pandas as pd # 默认情况下&#xff0c;read_csv函数会读取逗号分隔文件 # Gapminder数据使用制表符分隔 # 可以吧sep参数设置为…

【网络协议】----IPv6协议报文、地址分类

【网络协议】----IPv6协议简介 【网络协议】----IPv6协议简介IPv6特点IPv4 和 IPv6报文结构IPv6报文格式-拓展报头 IPv6地址分类IPv6地址表示IPv6单播地址可聚合全球单播地址链路本地地址唯一本地地址特殊地址补充 接口标识&#xff08;主机位&#xff09;生成方法通过EUI-64规…

网络层协议之 IP 协议

IP 协议格式 4 位版本&#xff1a;此处的取值只有两个&#xff0c;4&#xff08;IPv4&#xff09;和 6&#xff08;IPv6&#xff09;&#xff0c;即指定 IP 协议的版本。 4 位首部长度&#xff1a;描述了 IP 报头多长&#xff0c;IP 报头是变长的&#xff0c;因为报头中的选项部…

信息系统项目管理师0094:项目管理过程组(6项目管理概论—6.4价值驱动的项目管理知识体系—6.4.3项目管理过程组)

点击查看专栏目录 文章目录 6.4.3项目管理过程组1.适应型项目中的过程组2.适应型项目中过程组之间的关系6.4.3项目管理过程组 项目管理过程组是为了达成项目的特定目标,对项目管理过程进行的逻辑上的分组。项目管理过程组不同于项目阶段:①项目管理过程组是为了管理项目,针对…

WebRTC 采集音视频数据

WebRTC 采集音视频数据 WebRTC 采集音视频数据getUserMedia API 简介浏览器兼容性getUserMedia 接口格式MediaStreamConstraintsMediaTrackConstraints 采集音频数据MediaStream 和 MediaStreamTrack本地视频预览切换摄像头显示参考 WebRTC 采集音视频数据 getUserMedia API 简…