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

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

news 2025/11/4 21:16:31

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/11/3 20:06:01

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/11/3 3:22:48

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/10/23 16:56:42

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/10/27 2:11:27

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2025/10/30 14:37:29

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/8/4 1:00:56

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

编程新知 2025/11/3 19:40:33

《Docker》架构

文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器&#xff0c;docker&#xff0c;镜像&#xff0c;k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...

编程新知 2025/10/31 4:52:45