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

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

news 2026/5/16 23:21:28

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

别再瞎猜了！LaTeX排版中em、ex、pt、px到底该用哪个？一篇讲透所有单位

LaTeX排版单位全指南&#xff1a;从em到px的精准选择法则 当你第一次打开LaTeX文档&#xff0c;准备调整行距或设置边距时&#xff0c;那些神秘的缩写——em、ex、pt、px——是否让你感到困惑&#xff1f;每个单位似乎都有其存在的理由&#xff0c;但何时使用哪个才是最合适的&…...

编程新知 2026/5/16 22:42:56

FanControl深度实战指南：5分钟精通Windows风扇精准控制

FanControl深度实战指南&#xff1a;5分钟精通Windows风扇精准控制 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/f…...

编程新知 2026/5/16 22:36:50

保姆级教程：用沁恒CH34xSerCfg工具自定义你的USB转串口设备（VID/PID/序列号）

从零玩转沁恒CH34x芯片&#xff1a;深度定制你的USB转串口设备全攻略 每次插入相同的USB转TTL模块&#xff0c;电脑却分配不同的COM端口号&#xff1f;团队协作时多个同型号设备互相干扰&#xff1f;这些困扰硬件开发者多年的痛点&#xff0c;其实通过沁恒CH34x系列芯片的深度配…...

编程新知 2026/5/16 22:26:35

Nodejs服务端如何配置Taotoken的OpenAI兼容SDK

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Nodejs服务端如何配置Taotoken的OpenAI兼容SDK 对于使用Node.js构建服务端应用的开发者来说&#xff0c;集成大模型能力正变得日益…...

编程新知 2026/5/16 19:50:03

双边滤波Bilateral_Filter(调参的重要性)

一、双边滤波的基本概念 1.双边滤波是一种非线性滤波 2.双边滤波的作用是保边降噪平滑滤波器 3.卷积核大小&#xff1a;33、55、77这个是比较常用的卷积核。二、双边滤波的关键参数 1.空间方差 用用控制空间位置差异的平滑程度。 空间方差越大&#xff0c;空间高斯的影响范围越…...

编程新知 2026/5/16 19:12:46

EB Garamond 12：免费复古字体完整指南，如何优雅应用于网页和印刷设计

EB Garamond 12&#xff1a;免费复古字体完整指南&#xff0c;如何优雅应用于网页和印刷设计 【免费下载链接】EBGaramond12 项目地址: https://gitcode.com/gh_mirrors/eb/EBGaramond12 EB Garamond 12是一款基于16世纪经典设计的开源复古字体&#xff0c;为设计师和开…...

编程新知 2026/5/16 18:42:48

正规全能艺术台制造厂：可靠厂商选择要点解析

正规全能艺术台制造厂选择指南&#xff1a;5大可靠厂商评估要点FAQ“选对全能艺术台制造厂&#xff0c;不是看广告多响&#xff0c;而是看这5个‘隐性指标’——合规资质、自研技术、服务体系、数据安全、内容迭代能力&#xff01;”很多公共文化场馆在采购全能艺术台时&#x…...

编程新知 2026/5/16 17:54:45

LVGL容器控件Contain的10种布局模式全解析：从入门到实战避坑指南

LVGL容器控件Contain的10种布局模式全解析&#xff1a;从入门到实战避坑指南 在嵌入式GUI开发中&#xff0c;如何高效管理界面元素的排列一直是开发者面临的挑战。LVGL作为轻量级通用图形库&#xff0c;其容器控件(Contain)通过10种布局模式提供了灵活的解决方案。本文将带您深…...

编程新知 2026/5/16 16:12:38

1、Halcon频域魔法：从傅里叶变换到图像增强实战

1. 频域魔法&#xff1a;当工业视觉遇上傅里叶变换 第一次在Halcon里用傅里叶变换处理图像时&#xff0c;我盯着屏幕上的频域图看了足足十分钟——那些对称的亮斑和放射状条纹&#xff0c;活像一幅抽象派油画。但正是这幅"画"帮我解决了困扰团队两周的难题&#xff1…...

编程新知 2026/5/16 16:01:23

3个思维转变：用Obsidian Homepage打造你的第二大脑控制中心

3个思维转变&#xff1a;用Obsidian Homepage打造你的第二大脑控制中心 【免费下载链接】obsidian-homepage Obsidian homepage - Minimal and aesthetic template (with my unique features) 项目地址: https://gitcode.com/gh_mirrors/obs/obsidian-homepage 你是否曾…...

编程新知 2026/5/16 16:01:23