当前位置： 首页 > news >正文

CSS基础：选择器和声明样式

news 文章来源：https://blog.csdn.net/weixin_47869348/article/details/128977838 2025/1/10 21:00:51

CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

CSS用于HTML文档中元素样式的定义

使用css让网页具有美观一致的页面

语法

CSS 规则由两个主要的部分构成：选择器和声明样式

在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值，以键值对的形式组成

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

<style>h1{color: blue;font-size: 12px;}
</style>

CSS样式的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

缺乏整体性和规划性，不利于维护，维护成本高

<p style="background: orange; font-size: 24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>标签在文档头部定义内部样式表

单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head><style> h1 { background: red; } </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

<link rel="stylesheet" type="text/css" href="xxx.css">

选择器

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

*{margin: 0;padding: 0;}

元素/标签选择器

HTML文档中的元素，如p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

p{font-size:14px;
}

<p>学完了<span>java</span>，继续学前端</p>
span{color: red;
}

类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

<h2 class="oneclass">你好</h2>/*定义类选择器*/
<style>.oneclass{width:800px;}
</style>

class属性的特点

  1. 类选择器可以被多种标签使用
  2. 同一个标签可以使用多个类选择器。用空格隔开
<h3 class="classone  classtwo">我是一个h3啊</h3>

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>  // 错误

ID选择器

针对某一个特定的标签来使用，只能使用一次，即id是唯一的。
css中的ID选择器以 # 来定义

<h2 id="mytitle">你好</h2><style>#mytitle{border:3px dashed green;}
</style>

合并选择器

语法：选择器1,选择器2,...{ }

作用：提取共同的样式，减少重复代码

.header, .footer{height:300px;
}

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低：
行内样式 > ID选择器 > 类选择器 > 元素选择器

相关文章：

CSS基础：选择器和声明样式

CSS概念 CSS&#xff08;Cascading Style Sheets&#xff09;层叠样式表&#xff0c;又叫级联样式表&#xff0c;简称样式表 CSS用于HTML文档中元素样式的定义 使用css让网页具有美观一致的页面 语法 CSS 规则由两个主要的部分构成&#xff1a;选择器和声明样式 选择器通常…...

编程日记 2023/2/11 11:24:20

VS中安装gismo库

文章目录前言一、下载安装paraview直接下载压缩包安装就可以了解压后按步骤安装即可二、gismo库的安装gismo库网址第一种方法&#xff1a;第二种方法第三种方法&#xff1a;用Cmake软件直接安装首先下载cmake软件[网址](https://cmake.org/download/)安装gismo库三、gismo库的使…...

编程日记 2023/2/11 11:23:09

元学习方法解决CDFSL以及两篇SOTA论文讲解

来源&#xff1a;投稿 作者&#xff1a;橡皮 编辑&#xff1a;学姐 带你学习跨域小样本系列1-简介篇 跨域小样本系列2-常用数据集与任务设定详解 跨域小样本系列3&#xff1a;元学习方法解决CDFSL以及两篇SOTA论文讲解&#xff08;本篇&#xff09; 跨域小样本系列4&#xf…...

编程日记 2023/2/11 11:21:57

大数据之------------数据中台

一、什么是数据中台 **数据中台是指通过数据技术&#xff0c;对海量数据进行采集、计算、存储、加工&#xff0c;同时统一标准和口径。**数据中台的目标是让数据持续用起来&#xff0c;通过数据中台提供的工具、方法和运行机制&#xff0c;把数据变为一种服务能力&#xff0c;…...

编程日记 2023/2/11 11:20:45

Python 中 字符串是什么？

字符串是 Python 中最常用的数据类型。我们可以使用引号 ( ’ 或 " ) 来创建字符串。 创建字符串很简单&#xff0c;只要为变量分配一个值即可。例如&#xff1a; var1 ‘Hello World!’ var2 “Python Runoob” Python 访问字符串中的值 Python 不支持单字符类型&…...

编程日记 2023/2/11 11:19:34

OJ刷题Day1 · 一维数组的动态和 · 将数字变成 0 的操作次数 · 最富有的客户资产总量 · Fizz Buzz · 链表的中间结点 · 赎金信

一、一维数组的动态和二、将数字变成 0 的操作次数三、最富有的客户资产总量四、Fizz Buzz五、链表的中间结点六、赎金信一、一维数组的动态和 给你一个数组 nums 。数组「动态和」的计算公式为&#xff1a;runningSum[i] sum(nums[0]…nums[i]) 。 请返回 nums 的动态和。 示…...

编程日记 2023/2/11 11:18:21

【数据结构】栈——必做题

逆波兰表达式后缀表达式的出现是为了方便计算机处理&#xff0c;它的运算符是按照一定的顺序出现&#xff0c;所以求值过程中并不需要使用括号来指定运算顺序&#xff0c;也不需要考虑运算符号&#xff08;比如加减乘除&#xff09;的优先级。先介绍中简单的人工转化方法&#…...

编程日记 2023/2/11 11:17:12

LearnOpenGL 笔记 - 入门 04 你好，三角形

系列文章目录 LearnOpenGL 笔记 - 入门 01 OpenGLLearnOpenGL 笔记 - 入门 02 创建窗口LearnOpenGL 笔记 - 入门 03 你好&#xff0c;窗口 文章目录系列文章目录前言你好&#xff0c;三角形顶点输入顶点着色器&#xff08;Vertex Shader&#xff09;编译着色器片段着色器&…...

编程日记 2023/2/11 11:16:03

keepalived+mysql高可用

一.设置mysql同步信息两节点安装msyql略#配置节点11.配置权限允许远程访问mysql -u root -p grant all on *.* to root% identified by Root1212# with grant option; flush privileges;2.修改my.cnf#作为主节点配置(节点1)#作为主节点配置 server-id 1 …...

编程日记 2023/2/11 11:14:52

JAVA工具篇--1 Idea中 Gradle的使用

前言&#xff1a; 既然我们已经使用Maven 来完成对项目的构建&#xff0c;为什么还要使用Gradle 进行项目的构建&#xff1b;gradle和maven都可以作为java程序的构建工具&#xff0c;但两者还是有很大的不同之处的&#xff1a;1.可扩展性&#xff0c;gradle比较灵活&#xff0c…...

编程日记 2023/2/11 11:13:40

弄懂自定义 Hooks 不难，改变开发认知有点不习惯

前言 我之前总结逻辑重用的时候&#xff0c;就一直在思考一个问题。 对于逻辑复用&#xff0c;render props 和 高阶组件都可以实现&#xff0c;同样官方说 Hooks 也可以实现&#xff0c;且还是在不增加额外的组件的情况下。 但是我在项目代码中&#xff0c;没有找到自定义 …...

编程日记 2023/2/11 11:12:30

Java面向对象基础

文章目录面向对象类注意事项内存机制构造器this关键字封装javabean格式成员变量和局部变量区别static静态关键字使用成员方法使用场景内存机制注意事项static应用&#xff1a;工具类static应用&#xff1a;代码块静态代码块实例代码块&#xff08;用的比较少&#xff09;static…...

编程日记 2023/2/11 11:09:07

基于python下selenium库实现交互式图片保存操作（批量保存浏览器中的图片）

Selenium是最广泛使用的开源Web UI&#xff08;用户界面&#xff09;自动化测试套件之一&#xff0c;可以通过编程与浏览量的交互式操作对网页进行自动化控制。基于这种操作进行数据保存操作&#xff0c;尤其是在图像数据的批量保存上占据优势。本博文基于selenium 与jupyterla…...

编程日记 2023/2/11 11:07:57

一：Datart的下载、本地运行

前言&#xff1a;本文只是个人在使用datart的一个记录&#xff0c;仅供参考。如果有不一样的地方&#xff0c;欢迎评论或私信进行交流。datart 是新一代数据可视化开放平台&#xff0c;支持各类企业数据可视化场景需求&#xff0c;如创建和使用报表、仪表板和大屏&#xff0c;进…...

编程日记 2023/2/11 11:06:45

Docker-compose

一.Docker-compose概述Docker-Compose项目是Docker官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。Docker-Compose将所管理的容器分为三层&#xff0c;分别是 工程&#xff08;project&#xff09;&#xff0c;服务&#xff08;service&#xff09;以及容器&a…...

编程日记 2023/2/11 11:05:34

经典文献阅读之--PLC-LiSLAM(面，线圆柱SLAM)

0. 简介 对于激光SLAM来说&#xff0c;现在越来越多的算法不仅仅局限于点线等简答特征的场景了&#xff0c;文章《PLC-LiSLAM: LiDAR SLAM With Planes, Lines,and Cylinders》说到&#xff0c;平面、线段与圆柱体广泛存在于人造环境中。为此作者提出了一个使用这些landmark的…...

编程日记 2023/2/11 11:04:24

计算组合数Cnk即从n个不同数中选出k个不同数共有多少种方法math.comb(n,k)

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 计算组合数Cnk 即从n个不同数中选出k个不同数共有多少种方法 math.comb(n,k) 以下python代码输出结果是? import math print("【执行】print(math.comb(3,1))") print(math.comb(…...

编程日记 2023/2/11 11:03:08

工厂设计模式

基本概念&#xff1a;为创建对象提供过渡接口&#xff0c;以便将创建对象的具体过程屏蔽隔离起来&#xff0c;达到提高灵活性的目的。分为三类&#xff1a;简单工厂模式Simple Factory&#xff1a;不利于产生系列产品&#xff1b;工厂方法模式Factory Method&#xff1a;又称为…...

编程日记 2023/2/11 11:01:58

IO多路转接 —— poll和epoll

文章目录1. poll1.1 poll的函数接口1.2 poll的简单测试程序1.3 poll的优缺点分析2. epoll2.1 epoll的函数接口2.2 epoll的工作原理2.3 epoll的工作模式(LT,ET)2.4 epoll的简易服务器实现(默认是LT工作模式)前言&#xff1a; 接上文讲述的select&#xff0c;它有缺点&#xff0c…...

编程日记 2023/2/11 11:00:47

计算机网络整理-问答

1. 程序工作的时候网络各层的状态 如下图所示&#xff1a; 1. TCP 在进行三次握手的时候&#xff0c;IP 层和 MAC 层对应都有什么操作呢&#xff1f; TCP 三次握手是通过在传输层建立连接的一个过程&#xff0c;在这个过程中&#xff0c;TCP 和 IP 层、MAC 层都起到了重要的…...

编程日记 2023/2/11 10:59:35

JS 实现抛物线动画案例

相信大家都有浏览过&#xff0c;很多购物网站购物车的添加商品动画&#xff0c;今天&#xff0c;我们就手写一个简单的抛物线动画&#xff0c;先上案例&#xff1a; 一、绘制页面 我们这里简单实现&#xff0c;一个按钮&#xff0c;一个购物车图标&#xff0c;样式这里直接跳过…...

编程日记 2023/2/11 10:58:25

CSGO搬砖项目，23年最适合小白的项目！

大家好&#xff0c;我是阿阳 不懂的小伙伴&#xff0c;咱继续听我娓娓道来 steam搬砖主要涉及的是csgo游戏平台装备的一个搬运&#xff0c;比较很好理解&#xff0c;主要就是道具的搬运工&#xff0c;简单来讲就是&#xff0c;从国外steam游戏平台购买装备&#xff0c;再挂到…...

编程日记 2023/2/11 10:57:15

谈谈会话管理

客户端和服务器之间进行数据传输遵循的是HTTP协议, 此协议属于无状态协议(一次请求对应一次响应, 响应完之后断开连接), 服务器是无法跟踪客户端的请求, 通过cookie技术可以给客户端添加一个标识, 客户端之后发出的每次请求都会带着这个标识从而让服务器识别此客户端, 但由于co…...

编程日记 2023/2/11 10:56:05

Linux查看JVM FULL GC频率

查看系统的full gc频率&#xff0c;可以使用jstack命令一、采用top命令定位进程登录服务器&#xff0c;执行top命令&#xff0c;查看CPU占用情况&#xff0c;找到进程的pid二、使用jstack命令统计垃圾回收jstat -gc pid 5000即会每5秒一次显示进程号为pid的java进程的GC情况以上…...

编程日记 2023/2/11 10:54:55

java世界String的那些事

String的创建机理&#xff1a; 由于String在Java世界中使用过于频繁&#xff0c;Java为了避免在一个系统中产生大量的String对象&#xff0c;引入了字符串常量池。其运行机制是&#xff1a;创建一个字符串时&#xff0c;首先检查池中是否有值相同的字符串对象&#xff0c;如果…...

编程日记 2023/2/11 10:53:47

【图像配准】多图配准/不同特征提取算法/匹配器比较测试

前言 本文首先完成之前专栏前置博文未完成的多图配准拼接任务&#xff0c;其次对不同特征提取器/匹配器效率进行进一步实验探究。 各类算法原理简述 看到有博文[1]指出&#xff0c;在速度方面SIFT<SURF<BRISK<FREAK<ORB&#xff0c;在对有较大模糊的图像配准时&…...

编程日记 2023/2/11 10:52:38

2023金三银四季跳槽季，啃完这软件测试面试题，跳槽不就稳稳的了

前言 2023年也到来了&#xff0c;接近我们所说的“金三银四”也正在执行了&#xff0c;时间晃眼就过去了&#xff0c;有的人为了2023跳槽早早做足了准备&#xff0c;有的人在临阵磨刀&#xff0c;想必屏幕前的你也想在2023年涨薪吧&#xff0c;那么问题来了&#xff0c;怎么才…...

编程日记 2023/2/11 10:51:29

【C++详解】——vector类

&#x1f4d6; 前言&#xff1a;本期介绍vector类。 目录&#x1f552; 1. vector的介绍&#x1f552; 2. vector的使用&#x1f558; 2.1 定义&#x1f558; 2.2 iterator&#x1f558; 2.3 空间增长&#x1f558; 2.4 增删查改&#x1f552; 2. vector的模拟实现&#x1f558…...

编程日记 2023/2/11 10:50:20

uniapp 离线本地打包

uniapp打包教程地址 https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android.html点击查看 需要的环境&#xff1a; java (1.8)离线SDK(上面的连接下载即可)Android Studio&#xff08;同上&#xff09; 配置环境变量 依次点击“计算机”&#xff0d;“属性”&#…...

编程日记 2023/2/11 10:49:13

初识马尔科夫模型（Markov Model）

初识马尔科夫模型&#xff08;Markov Model&#xff09;一、概念二、性质三、学习步骤一、概念 马尔科夫模型&#xff08;Markov Model&#xff09;是一种概率模型&#xff0c;用于描述随机系统中随时间变化的概率分布。马尔科夫模型基于马尔科夫假设&#xff0c;即当前状态只…...

编程日记 2023/2/11 10:48:04

手机版网站制作费用/电商平台怎么注册

概述 Scroller 译为“滚动器”&#xff0c;是 ViewGroup 类中原生支持的一个功能。我们经常有这样的体验&#xff1a;打开联系人&#xff0c;手指向上滑动&#xff0c;联系人列表也会跟着一起滑动&#xff0c;但是&#xff0c;当我们松手之后&#xff0c;滑动并不会因此而停止…...

编程日记 2025/1/10 16:04:44

网站 设计 方案/营销渠道模式有哪些

前言本章主要介绍数据库中 groupby的用法&#xff0c;也是我们在使用数据库时非常基础的一个知识点。并且也会涉及Join的使用&#xff0c;关于Join的用法&#xff0c;可以看我写的上一篇文章&#xff1a;带你了解数据库中JOIN的用法 如有错误还请大家及时指出~以下都是采用mysq…...

编程日记 2025/1/10 13:28:29

做网站的ui框架/百度知道网页版登录入口

赵德明在调研六大新产业十大产业链发展情况时强调加快项目建设进度 推动产业加速集聚 奋力打造全省新产业发展的战略支撑和新的增长极7月15日&#xff0c;省委常委、市委书记、贵安新区党工委书记赵德明到贵州双龙航空港经济区调研六大新产业十大产业链发展情况。他强调&#x…...

编程日记 2025/1/10 13:14:22

如何优化网站关键字/佛山企业用seo策略

目录 一、Pandas 二、Pandas-Serise 三、DataFrame 1、DataFrame的创建 2、 删除操作&#xff1a; 3、获取操作&#xff1a; 获取列数据&#xff1a; 获取行数据&#xff1a; 根据具体条件获取数据 4、文件操作 四、使用jupyter notebook完成文件相关操作 五、Seabor…...

编程日记 2025/1/10 12:51:12

wordpress hasnavmenu/百度推广的定义

grpc-webMicrosoft已在.NET Core和ASP.NET Core中推出了对gRPC-Web的实验性支持&#xff0c;从而允许直接从.NET Core gRPC客户端和ASP.NET Core gRPC应用程序中调用gRPC-Web。 gRPC-Web与HTTP / 1和HTTP / 2兼容&#xff0c;是一个JavaScript客户端库&#xff0c;支持与gRPC-…...

编程日记 2025/1/10 12:37:05

建站需要注意哪些/小程序如何推广运营

这种代码通常在类似tab选择的那种 拥有select的就是选中的状态 应用的场景还是很多的 $(".commodity").click(function(){if($(this).hasClass("select")){$(this).removeClass(" select") ;}else{$(this).addClass(" select") ;} })…...

编程日记 2025/1/10 11:45:08