【CSS—前端快速入门】CSS 选择器

news2025/3/3 19:55:26

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


CSS


1. CSS介绍


1.1 什么是CSS?


CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式;

CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果;能够做到页面的样式和
结构分离;

在这里插入图片描述


1.2 基本语法规范


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

  • 选择器决定针对谁修改(找谁)
  • 声明决定修改啥(干啥)
  • 声明的属性是键值对
  • 使用:区分键值对,使用:区分键和值.
<style>
	p{
	/*设置字体颜色 */
		color: red;
	/*设置字体大小 */
		font-size: 30px;
}
</style>

<p>hello</p>

注意:

  • CSS 要写到 style标签中 (后面还会介绍其他写法)
  • style 标签可以放到页面任意位置,一般放到 head 标签内.
  • CSS 使用 /**/作为注释 (使用 ctrl +/快速切换).

在这里插入图片描述

保存代码,查看页面:在这里插入图片描述

在这里插入图片描述


1.3 引入方式


行内样式

在这里插入图片描述


内部样式

在这里插入图片描述


在这里插入图片描述


外部样式

在这里插入图片描述

我们再创建一个新文件,用于写入选择器,然后在原文件的 head 内通过上述语法引入新文件的信息:
在这里插入图片描述


在这里插入图片描述

写好后,保存两个文件,重新打开页面:

在这里插入图片描述


值得一提,选择器的生效优先级遵从就近原则


1.4 规范


样式大小写

  • 虽然 CSS 不区分大小写,我们开发时统一使用小写字母

空格规范

  • 冒号后面带空格
  • 选择器{ 之间也有一个空格.

2. CSS选择器


在这里插入图片描述


标签选择器


/*选择所有的a标签,设置颜色为红色/

a{
	color: red;
}

/*选择所有的div标签,设置颜色为绿色*/

div {
	color: green;
}

在这里插入图片描述
保存代码,打开页面:

在这里插入图片描述


要修改 div3 的颜色,我们可以设置 a { } 选择器,来选择所有 a 标签,并设置颜色:

在这里插入图片描述


在这里插入图片描述


类选择器


class 选择器的概念和规范使用如下:

  • 可以为每一个标签都添加 class 属性
  • class 的值不要求唯一
  • 在使用class 选择器时,需要在 class 选择器前加一个 . ,如 .class 名{ }

在这里插入图片描述

保存代码,打开页面:

在这里插入图片描述


ID 选择器


ID 的概念和规范使用如下:

  • 一个页面中的 ID 值原则性上要求是唯一

  • 可以为每个标签都设置 ID

  • 可以为 ID 赋任何值,哪怕是标签名( div , span , title…)

  • 在使用 ID 选择器时,需要在 ID 选择器前加一个 # ,如 # id 名{ },避免 ID 是标签名的时候,编译器误以为使用的是标签选择器


在这里插入图片描述

保存代码后,打开页面:

在这里插入图片描述


通配符选择器


通配符的概念和通配符选择器的使用如下:

  • 通配符:*,表示选择所有,如SQL 中的 select*

  • 通配符选择器的使用: *{ },表示选择当前页面的所有元素;

  • 通配符选择器的优先级较前面几种选择器,优先级是比较低的;

在这里插入图片描述

保存代码,打开页面:

在这里插入图片描述


复合选择器


复合选择器,是由多个单选择器组成的多选择器,又分为并集交集的形式:

  • 并集形式,选择器用 , 隔开;

  • 交集形式,选择器用空格隔开;

  • 如果要精细选择某个部分,就可以为这个部分的标签添加特征属性,如 ID , class 等等,再使用交集;


并集

在这里插入图片描述

保存代码,打开页面:

在这里插入图片描述


并集

补充一个常用的标签:

<body>
    
    <!-- 无序列表标签 -->
    <ul>
        <li></li>
    </ul>
    
    <!-- 有序列表标签 -->
    <ol>
        <li></li>
    </ol>
    
</body>

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

如果要只想让有序列表的超链接字体改为红色,我们就可以使用复合选择器的交集形式:

在这里插入图片描述


在这里插入图片描述

在这里插入图片描述

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

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

相关文章

Linux安装jdk,node,mysql,redis

准备工作&#xff1a; 1.安装VMware软件&#xff0c;下载CentOs7镜像文件&#xff0c;在VMware安装CentOs7 2.宿主机安装Xshell用来操作linux 3. .宿主机安装Xftp用来在宿主机和虚拟机的linux传输文件 案例1&#xff1a;在 /home/soft文件夹解压缩jdk17&#xff0c;并配置环…

深度求索(DeepSeek)的AI革命:NLP、CV与智能应用的技术跃迁

Deepseek官网&#xff1a;DeepSeek 引言&#xff1a;AI技术浪潮中的深度求索 近年来&#xff0c;人工智能技术以指数级速度重塑全球产业格局。在这场技术革命中&#xff0c;深度求索&#xff08;DeepSeek&#xff09;凭借其前沿的算法研究、高效的工程化能力以及对垂直场景的…

Minio搭建并在SpringBoot中使用完成用户头像的上传

Minio使用搭建并上传用户头像到服务器操作,学习笔记 Minio介绍 minio官网 MinIO是一个开源的分布式对象存储服务器&#xff0c;支持S3协议并且可以在多节点上实现数据的高可用和容错。它采用Go语言开发&#xff0c;拥有轻量级、高性能、易部署等特点&#xff0c;并且可以自由…

阿里云 | 快速在网站上增加一个AI助手

创建智能体应用 如上所示&#xff0c;登录阿里云百炼人工智能业务控制台&#xff0c;创建智能体应用&#xff0c;智能体应用是一个agent&#xff0c;即提供个人或者企业的代理或中间件组件应用&#xff0c;对接阿里云大模型公共平台&#xff0c;为个人或者企业用户提供大模型应…

原型链与继承

#搞懂还是得自己动手# 原型链 function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(this.name); };const p new Person("Alice"); 原型链关系图&#xff1a; 原型链&#xff1a;person->Person.prototype->O…

动态规划 ─── 算法5

动态规划&#xff08;Dynamic Programming&#xff0c;简称 DP&#xff09;是一种用于解决复杂问题的算法设计技术&#xff0c;特别适用于具有重叠子问题和最优子结构性质的问题。动态规划通过将问题分解为更小的子问题&#xff0c;并存储子问题的解来避免重复计算&#xff0c;…

博客系统--测试报告

博客系统--测试报告 项目背景项目功能功能测试①登录功能测试②发布博客功能测试③删除文章功能测试④功能测试总结&#xff1a; 自动化测试自动化脚本执行界面&#xff1a; 性能测试 本博文主要针对个人实现的项目《博客系统》去进行功能测试、自动化测试、性能测试&#xff0…

【博资考4】网安学院-硕转博考试内容

【博资考4】硕转博考试内容 - 网络安全与基础理论 写在最前面一. **21年硕转博面试内容回顾**网络、逆向、操作系统、攻防、漏洞1. **网络安全常见攻击方式及其防范措施**1.1 **DDoS攻击&#xff08;分布式拒绝服务&#xff09;**1.2 **SQL注入攻击**1.3 **XSS攻击&#xff08;…

GPT-4.5 怎么样?如何升级使用ChatGPTPlus/Pro? GPT-4.5设计目标是成为一款非推理型模型的巅峰之作

GPT-4.5 怎么样&#xff1f;如何升级使用ChatGPTPlus/Pro? GPT-4.5设计目标是成为一款非推理型模型的巅峰之作 今天我们来说说上午发布的GPT-4.5&#xff0c;接下来我们说说GPT4.5到底如何&#xff0c;有哪些功能&#xff1f;有哪些性能提升&#xff1f;怎么快速使用到GPT-4.…

基于专利合作地址匹配的数据构建区域协同矩阵

文章目录 地区地址提取完成的处理代码 在专利合作申请表中&#xff0c;有多家公司合作申请。在专利权人地址中&#xff0c; 有多个公司的地址信息。故想利用这里多个地址。想用这里的地址来代表区域之间的专利合作情况代表区域之间的协同、协作情况。 下图是专利合作表的一部分…

0x02 js、Vue、Ajax

文章目录 js核心概念js脚本引入html的方式基础语法事件监听 Vuevue简介v-forv-bindv-if&v-showv-model&v-on Ajax js 核心概念 JavaScript&#xff1a;是一门跨平台、面向对象的脚本语言&#xff0c;用来控制网页行为实现交互效果&#xff0c;由ECMAScript、BOM、DOM…

IDEA 使用codeGPT+deepseek

一、环境准备 1、IDEA 版本要求 安装之前确保 IDEA 处于 2023.x 及以上的较新版本。 2、Python 环境 安装 Python 3.8 或更高版本 为了确保 DeepSeek 助手能够顺利运行&#xff0c;您需要在操作系统中预先配置 Python 环境。具体来说&#xff0c;您需要安装 Python 3.8 或更高…

Linux笔记---一切皆文件

1. 含义 “一切皆文件”是 Linux 对系统资源的高度抽象&#xff0c;通过文件接口屏蔽底层差异&#xff0c;提供了简洁、一致的操作方式。这种设计降低了系统复杂性&#xff0c;使得工具、脚本和应用程序能够以统一模式处理多样化资源&#xff0c;是 Linux 强大灵活性的重要基石…

DeepSeek开源周,第五弹再次来袭,3FS

Fire-Flyer 文件系统&#xff08;3FS&#xff09;总结&#xff1a; 一、核心特点 3FS 是一个专为 AI 训练和推理工作负载设计的高性能分布式文件系统&#xff0c;利用现代 SSD 和 RDMA 网络&#xff0c;提供共享存储层&#xff0c;简化分布式应用开发。其主要特点包括&#xf…

【音视频】VLC播放器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 一、vlc是什么&#xff1f; VLC Media Player&#xff08;简称VLC&#xff09;是一款免费、开源、跨平台的多媒体播放器&#xff0c;由非营利组织VideoLAN开发&#xff0c;最…

【软件测试】_使用selenium进行自动化测试示例

目录 1. 导入依赖 2. 使用selenium编写测试代码 3. 运行结果 4. 关于浏览器驱动管理及浏览器驱动配置 创建一个空项目用于进行selenium的自动化测试。 1. 导入依赖 <dependencies><!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager…

【清华大学】DeepSeek从入门到精通完整版pdf下载

DeepSeek从入门到精通.pdf 一共104页完整版 下载链接: https://pan.baidu.com/s/1-gnkTTD7EF2i_EKS5sx4vg?pwd1234 提取码: 1234 或 链接&#xff1a;https://pan.quark.cn/s/79118f5ab0fd 一、DeepSeek 概述 背景与定位 DeepSeek 的研发背景 核心功能与技术特点&#xff08…

题解 | 牛客周赛83 Java ABCDEF

目录 题目地址 做题情况 A 题 B 题 C 题 D 题 E 题 F 题 牛客竞赛主页 题目地址 牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ 做题情况 A 题 输出两个不是同一方位的字符中的任意一个就行 import java.io.*; import java.math.*; import java…

C语言(16)---------->二维数组

在学习二维数组之前&#xff0c;掌握一维数组是非常重要的。 对于一维数组的学习&#xff0c;读者可以参考我写过的博客&#xff1a; C语言&#xff08;15&#xff09;--------------&#xff1e;一维数组-CSDN博客 这里面由浅入深地介绍了C语言中一维数组的使用。 一、二维…

【计算机网络基础】-------计算机网络概念

1.什么是计算机网络 定义&#xff1a; 图解&#xff1a; 2.最简单的计算机网络 其中&#xff1a; 结点可以是计算机、集线器、交换机、路由器等链路可以是有线链路、无线链路 2.1集线器 2.2交换机 3.互连网&#xff08;internet&#xff09;与 路由器 路由器 与 家用路由…