CSS概述 | CSS的引入方式 | 选择器

文章目录

        • 1.CSS概述
        • 2.CSS的引入方式
          • 2.1.内部样式表
          • 2.2.行内样式表
          • 2.3.外部样式表
        • 3.选择器

1.CSS概述

CSS,全称Cascading Style Sheets(层叠样式表),是一种用来设置HTML(或XML等)文档样式的语言。CSS的主要作用是描述网页的布局和外观,包括颜色、字体、间距、背景图像等,CSS可以和HTML内容经行分离,这样,一个CSS样式可以用在多个HTML页面,修改时候可以只修改一个CSS文件即可。

CSS的基本语法

选择器 + 一条或N条声明选择器决定针对谁做修改,比如想要对p标签中的字体大小和颜色进行修改,那么p就是一个选择器,这样类型的选择器称为元素选择器

声明,是在一对花括号{}中进行声明 ,每个声明都由两部分组成:属性和值;注:CSS 不区分大小写, 开发时通常使用使用小写字母

p {color: red;font-size: 16px;
}
2.CSS的引入方式
2.1.内部样式表

通过style 标签将CSS样式嵌入到 html 内部,当CSS内容特别多的时候,html页面就显得很大。这不是一种很好的方法,但是有些网页还是会用,我感觉是历史遗留的问题,哈哈哈。

理论上来说 style 放到 html 的哪里都行,但是一般都是放到 head 标签中。

<html lang="en">
<head><style>p {color: blue;}</style>
</head>
<body><div><p>天空为什么是蓝色的</p></div>
</body>
</html>
2.2.行内样式表

通过 style 属性, 来指定某个标签的样式,只适合于写简单样式. 只针对某个标签生效,这种写法优先级较高, 会覆盖其他的样式

<head><style>p { color: red; }</style>
</head>
<body><p style="color:blue">天空是什么颜色</p> 
</body>
2.3.外部样式表

实际开发中最常用的方式,创建后缀为css的文件, 使用 link 标签引入 css。

在同级目录下的css文件夹中创建style.css文件

p{color: blue;font-size: 18px;
}

在一个HTML的文件中引用外部的css文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/style.css">
</head>
<body><p>大海为什么是蓝色的</p>
</body>
</html>

这样的好处是css样式和html结构彻底分离了,但是受到浏览器缓存影响, 修改之后 不一定 立刻生效。

关于浏览器的缓存

缓存(Cache):提升性能的技术手段,网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取,如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取,浏览器就可以使用缓存先存起来(就是存在本地磁盘上), 减少网络传输的时间和带宽消耗,从而提高访问效率。可以使用 ctrl + F5 强制刷新页面;

3.选择器

前面我们就一直在使用选择器(元素选择器),选择器选中标签元素从而设置元素的属性。选择器可以分为基础选择器和复合选择器,我主要分享常见的基础选择器,关于复合选择器可以去参考文档:链接

注:下面的css代码,都是放在和html同级的css文件夹下

标签选择器

能快速为同一类型的标签都选择出来,但是不能差异化选择

p{color: blue;font-size: 18px;
}
<link rel="stylesheet" href="./css/style.css">
<p>大海为什么是蓝色的</p>
<p>红苹果</p>

展示结果:使用p标签标识的标签就都是蓝色的了

在这里插入图片描述

类选择器

类名用.开头的,下方的标签使用 class 属性来调用,如果类名过长, 可以使用 - 分割

.box-height-width{height: 50px;width: 300px;
}.blue{color: blue;
}.red{color: red;
}

html页面可以使用class引入多个样式,中间用空格隔开

<p class="blue box-height-width">大海为什么是蓝色的</p>
<p class="red ">苹果是红色的</p>

展示结果:

在这里插入图片描述

id选择器

CSS 中使用 # 开头表示 id 选择器,id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

#box{height: 500px;
}#blue{color: blue;
}
<p id="blue box">苹果</p>
<p id="blue">大海为什么是蓝色的</p>

展示结果:

在这里插入图片描述

通配符选择器

使用 * 的定义, 选取所有的标签

* {color: blue;
}

页面的所有内容都会被改成 红色,可以用于修改浏览器的默认属性

复合选择器(了解)

使用基础选择器组合,常见的符合选择器有:后代选择器、子选择器、并集选择器、伪类选择器

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

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

相关文章

c# 二叉树

在 C# 中&#xff0c;二叉树是一种常见的数据结构&#xff0c;它由节点组成&#xff0c;每个节点最多有两个子节点&#xff1a;左子节点和右子节点。在 C# 中&#xff0c;可以使用类来实现二叉树的节点&#xff0c;并且通过引用连接节点来构建整棵树。 以下是一个简单的示例&a…

C++中的拷贝构造函数和深拷贝、浅拷贝,如何在C++中实现类和对象的序列化与反序列化?

C中的拷贝构造函数和深拷贝、浅拷贝 拷贝构造函数&#xff1a; 拷贝构造函数是一种特殊的构造函数&#xff0c;它接受一个对其同类的常量引用作为参数&#xff0c;并用于初始化新创建的对象。其主要作用是实现一个类的对象到另一个相同类型对象的拷贝。 拷贝构造函数的原型通常…

SG3225EAN规格书

SG3225EAN 晶体振荡器利用先进的锁相环技术和AT切割晶体单元&#xff0c;提供了宽频率范围和高性能LV-PECL输出&#xff0c;73.5 MHz至700 MHz的宽频率范围&#xff0c;能够保证高稳定性和宽频率调整的能力&#xff0c;适应于多样化的应用需求。2.5V和3.3V两种供电电压&#xf…

win10 环境下Python 3.8按装fastapi paddlepaddle 进行图片文字识别1

###按装 用conda 创建python 3.8的环境&#xff0c;可参看本人python下的其它文章。 在pycharm开发环境下按装相关的模块&#xff1a; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple fastapi pip install -i https://pypi.tuna.tsinghua.edu.cn/simple "uvi…

StarRocks表设计——分区分桶与副本数

目录 一、数据分布 1.1 概述 1.2 数据分布方式 1.2.1 Round-Robin 1.2.2 Range 1.2.3 List 1.2.4 Hash 1.3 StarRocks的数据分布方式 1.3.1 不分区 Hash分桶 1.3.2 Range分区Hash分桶 三、分区 3.1 分区概述 3.2 创建分区 3.2.1 手动创建分区 3.2.2 批量创建分区…

【教学类-19-10】20240214《ABAB式-规律黏贴18格-手工纸15*15CM-一页3种图案,AB一组样板,纵向、有边框》(中班)

背景需求 利用15*15CM手工纸制作AB色块手环&#xff08;手工纸自带色彩&#xff09;&#xff0c;一页3个图案&#xff0c;2条为一组&#xff0c;画图案&#xff0c;黏贴成一个手环。 素材准备 代码展示 # # 作者&#xff1a;阿夏 # 时间&#xff1a;2024年2月14日 # 名称&…

云计算基础 -NUMA

UMA UMA中文翻译叫&#xff1a;一致性内存访问 多个CPU通过同一根前端总线&#xff08;FSB&#xff09;来访问内存&#xff08;所有的内存访问都需要通过北桥芯片来完成&#xff09;&#xff0c;若多个CPU访问内存的不同内存单元还是相同内存单元&#xff0c;同一时刻&#x…

[dlib][python]dlib所有whl文件下载地址汇总

python3.12轮子dlib-19.24.2-cp312-cp312-macosx-10-9-x86-64.whl下载地址 https://download.csdn.net/download/FL1623863129/88582377 python3.12轮子dlib-19.24.2-cp312-cp312-macosx-11-0-arm64.whl下载地址 https://download.csdn.net/download/FL1623863129/88582372 pyt…

机器学习中的10种非线性降维技术对比总结

降维意味着我们在不丢失太多信息的情况下减少数据集中的特征数量&#xff0c;降维算法属于无监督学习的范畴&#xff0c;用未标记的数据训练算法。 尽管降维方法种类繁多&#xff0c;但它们都可以归为两大类:线性和非线性。 线性方法将数据从高维空间线性投影到低维空间(因此…

计算机设计大赛 深度学习YOLO抽烟行为检测 - python opencv

文章目录 1 前言1 课题背景2 实现效果3 Yolov5算法3.1 简介3.2 相关技术 4 数据集处理及实验5 部分核心代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习YOLO抽烟行为检测 该项目较为新颖&#xff0c;适合作为竞赛课…

多线程---线程同步,线程通信

线程同步 1.概述 线程同步是多线程编程中的一个重要概念&#xff0c;它指的是在多线程环境中&#xff0c;通过一定的机制保证多个线程按照某种特定的方式正确、有序地执行。这主要是为了避免并发问题&#xff0c;如死锁、竞态条件、资源争用等&#xff0c;确保数据的一致性和完…

Leetcode-1523. 在区间范围内统计奇数数目

题目&#xff1a; 给你两个非负整数 low 和 high 。请你返回 low 和 high 之间&#xff08;包括二者&#xff09;奇数的数目。 示例 1&#xff1a; 输入&#xff1a;low 3, high 7 输出&#xff1a;3 解释&#xff1a;3 到 7 之间奇数数字为 [3,5,7] 。 示例 2&#xff1a; 输…

中国电子学会2023年09月真题C语言软件编程等级考试一级(含解析答案)

中国电子学会考评中心历届真题&#xff08;含解析答案&#xff09; C语言软件编程等级考试一级 2023年09月 编程题五道 总分:100分一、日期输出&#xff08;20分&#xff09; 给定两个整数&#xff0c;表示一个日期的月和日。请按照“MM-DD”的格式输出日期&#xff0c…

【Java基础面试题】

目录 前言 1.1 为什么Java代码可以实现一次编写、到处运行&#xff1f; 1.2 一个Java文件里可以有多个类吗&#xff08;不含内部类&#xff09;&#xff1f; 1.3 说一说你对Java访问权限的了解 1.4 介绍一下Java的数据类型 1.5 int类型的数据范围是多少&#xff1f; 1.6…

C#入门及进阶|数组和集合(十):Queue类

在某种线性表中&#xff0c;需要加入的元素总是插入到线性表的末端&#xff0c;且总是从线性表的头部取出或删除元素&#xff0c;我们把这种线性表称为队列。 在C#中&#xff0c;通过Queue集合来封装对队列的操作&#xff0c;在队列中对元素的操作遵循“先进先出”的原则。Queu…

【算法】问题描述关键提取——提炼一般的解决思路

文章目录 前言排序关键/关键词2389. 和有限的最长子序列 栈关键/关键词2390. 从字符串中移除星号 拓扑排序关键/关键词207. 课程表2392. 给定条件下构造矩阵 线性DP关键/关键词最长公共子序列1143. 最长公共子序列 最长递增子序列300. 最长递增子序列与最长公共子序列的联系动态…

【复现】某公司指挥调度管理平台 RCE漏洞_51

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 该平台提供强大的指挥调度功能&#xff0c;可以实时监控和管理通信网络设备、维护人员和工作任务等。用户可以通过该平台发送指令…

P1441 背包九讲(3):完全背包问题

P1441 背包九讲3&#xff1a;完全背包问题 一、原题呈现1、题目描述2、输入描述3、输出描述4、样例输入5、样例输出6、提示信息 二、思路分析1、其实这题就是01背包的变形2、但是本题全开二维数组会超内存&#xff0c;因此我们使用两个一维数组进行计算并且复制 三、整体代码 一…

视频生成模型作为世界模拟器

我们探索了在视频数据上大规模训练生成模型。具体来说&#xff0c;我们联合训练文本条件扩散模型&#xff0c;处理不同持续时间、分辨率和宽高比的视频和图像。我们利用一种在时空补丁上操作视频和图像潜码的transformer架构。我们最大的模型&#xff0c;Sora&#xff0c;能够生…

树状菜单(利用映射-bootstrap+jQuery实现折叠功能)

效果&#xff08;默认全部展开&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><…