(前端基础)CSS(一)
了解
Cascading Style Sheet:层叠级联样式表
CSS:表现层(美化网页)如:字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动

css优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录
CSS的四种导入方式
行内样式
在需要设置的标签后面加style。优先级最高

css内部样式
可在html文件中的head标签中写如下:
<style>
选择器{
声明1;声明2;
声明3;
}
</style>

链接式外部样式
在文件恰当位置添加一个css文件

在需要引用样式的HTML文件的head标签中添加link标签。
<link rel="stylesheet" href="css文件位置">

内部样式与外部样式优先级一致,从上到下,谁先写,谁的优先级就高。
导入式外部样式(了解)
先在head标签中添加style标签
<style>
@import "css路径";
</style>

选择器
作用: 选择页面上的某一个或者某一类元素
标签选择器
会选择到页面上所有的这个标签的元素(选择一类标签),标签选择器优先级最低
标签选择器{
声明1;
声明2;
}

类选择器class
在标签后加class,class属性值为自定义,class值相同的为一组,可以复用,类选择器优先级>标签选择器(选择所有class属性值一致的标签)
<h1 class="类名称"></h1>
样式引用时,格式如下:
.类名{
声明1;
声明2
}

id选择器
在标签后加id,id属性值为自定义,id全局唯一,优先级最高
<h1 id="id名称"></h1>
样式引用时,格式如下:
#id名{
声明1;
声明2
}

优先级对比:id选择器>类选择器>标签选择器
层次选择器
根据以下框架,写HTML文件的body结构
红色为类选择器,紫色为id选择器

HMTL如下:

后代选择器
在某个元素的后面,eg:body后面的所有p标签
标签1 标签2{
声明1;
}
body后面的p标签全部设置为红色


类tex后面的p标签全部设置为黄色背景

子选择器
某个标签(选择器)的子标签,eg:body标签后面的p标签,该处p标签不包含无序列表中的p标签
标签1>标签2{
声明1;
}
body后面的第一轮子标签p字体全部设置为红色,类标签tex下的p标签背景为黄色

相邻选择器
某个标签(选择器)的相邻(下一个元素),eg:类选择器action的相邻标签
选择器+标签{
声明;
}
li的相邻li标签设置为红色字体

id选择器的同级p设置为蓝色背景,tex选择器的同级p设置为黄色背景,action的同级p设置为红色字体

通用选择器
选中元素的向下的所有兄弟元素
选择器+标签{
声明;
}
类选择器action的相邻p(所有下一个)元素,设置为橙色

结构伪类选择器
伪类选择器格式:
标签:参数{
声明;
}
first-child:第一个元素

last-child:最后一个元素

标签:nth-child()选择当前p元素的父级下的第几个元素,根据顺序选择

nth-of-type(2):选择父元素下的p标签的第几个,根据类型选择

扩展:hover,鼠标移动改变效果

属性选择器
设置10个标签,每个标签中包含许多属性,为a标签设置默认样式,如下
<p class="demo"><a href="http://baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item " >3</a><a href="images/123.png" class="links item " >4</a><a href="images/123.ipg" class="links item " >5</a><a href="abc" class="links item " >6</a><a href="/a.pdf" class="links item " >7</a><a href="/abc.pdf" class="links item " >8</a><a href="abc.doc" class="links item " >9</a><a href="abcd.doc" class="links item last" >10</a>
</p>
默认样式:
<style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: red;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}</style>

a标签中存在id属性的元素
标签:[属性名]{
声明;
}

选择id属性中属性为first的元素
标签:[属性名=属性值]{ //=是绝对等于
声明;
}

class属性中属性值包含link的元素
标签:[属性名*=属性值]{ //*=是包含这个元素
声明;
}

选中以href属性中以http属性值为开头的元素
标签:[属性名^=属性值]{ //^=是以这个属性值开头
声明;
}

选中以href属性中以pdf属性值为结尾的元素
标签:[属性名$=属性值]{ //$=是以这个属性值结尾
声明;
}
字体样式
span标签:重点突出的字,使用span标签
- font-family:字体样式
- font-size:字体大小
- font-weight:字体粗细
- color:字体颜色


相关文章:
(前端基础)CSS(一)
了解 Cascading Style Sheet:层叠级联样式表 CSS:表现层(美化网页)如:字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动 css优势: 内容和表现分离网页结构表现统一,可以实现复用…...
Redis数据类型全景解析:从底层编码到应用反模式
一、核心数据类型矩阵 1.1 基础类型对比表 类型底层结构最大容量时间复杂度典型场景StringSDS/Embstr/Raw512MBO(1)读写缓存/计数器ListQuickList(ziplist)2^32-1元素头尾操作O(1)消息队列Hashziplist/hashtable2^32-1键值对O(1)平均对象存储Setintset/hashtable2^32-1成员O(…...
(蓝桥杯——10. 小郑做志愿者)洛斯里克城志愿者问题详解
题目背景 小郑是一名大学生,她决定通过做志愿者来增加自己的综合分。她的任务是帮助游客解决交通困难的问题。洛斯里克城是一个六朝古都,拥有 N 个区域和古老的地铁系统。地铁线路覆盖了树形结构上的某些路径,游客会询问两个区域是否可以通过某条地铁线路直达,以及有多少条…...
TypeScript跟js,es6这些的区别
TypeScript 一、TypeScript 是什么 想象 JavaScript 是一个自由奔放的艺术家,它在创作(编写代码)时不受太多约束,非常灵活,但有时也容易犯错且难以调试。而 TypeScript 就像是给这位艺术家配备了一套精确的工具和规范…...
flink-cdc同步数据到doris中
1 创建数据库和表 1.1 数据库脚本 这样直接创建数据库是有问题,因为后面发现superset连接使用doris://root:12345610.101.12.82:9030/internal.eayc?charsetutf8mb4 -- 创建数据库eayc create database if not exists ods_eayc; -- 创建数据表2 数据同步 2.1 f…...
Kubernetes:EKS 中 Istio Ingress Gateway 负载均衡器配置及常见问题解析
引言 在云原生时代,Kubernetes 已经成为容器编排的事实标准。AWS EKS (Elastic Kubernetes Service) 作为一项完全托管的 Kubernetes 服务,简化了在 AWS 上运行 Kubernetes 的复杂性。Istio 作为服务网格领域的佼佼者,为微服务提供了流量管理…...
Golang教程
1. go 环境与命令 1.1 go 环境搭建 SDK 安装 Go 官网:golang.orgGo 中文社区:https://studygolang.com/dlGo API文档:https/golang.org 或 https://studygolang.com/pkgdoc 目录 api :api 存放bin:go命令src&#…...
AI 百炼成神:线性回归,预测房价
我们开始第一个项目——线性回归:预测房价。这是一个经典的机器学习入门项目,可以帮助你理解如何使用线性回归模型来预测连续的数值。 第一个项目:线性回归预测房价 项目目标 学习线性回归的基本概念。使用历史房价数据建立一个预测模型。理解如何评估模型的性能。项目步骤…...
企业软件合规性管理:构建高效、安全的软件资产生态
引言 在数字化转型的浪潮下,企业的软件使用方式日益多元化,涉及云端、订阅制、永久授权及浮动许可等多种模式。然而,随着软件资产的增多,企业面临着合规性管理的严峻挑战:非法软件使用、许可证管理不当、软件资产闲置…...
每日一题——编辑距离
编辑距离 参考资料题目描述示例 解题思路动态规划(DP)方法 代码实现复杂度分析示例详解示例1:"nowcoder" → "new"示例2:"intention" → "execution" 总结与心得 参考资料 建议先参考下…...
TensorFlow项目GPU运行 安装步骤
以下是在 Linux 系统 下搭建完整 GPU 加速环境的详细流程(适配 CUDA 11.2 和 Python 3.9): 1. 前置检查 1.1 验证 NVIDIA 驱动 # 检查驱动版本(需 ≥ 450.80.02) nvidia-smi 输出示例: CUDA Version: 11.2…...
c++进阶———继承
1.引言 在一些大的项目中,我们可能要重复定义一些类,但是很麻烦,应该怎么办呢?举个简单的例子,我要做一个全校师生统计表,统计学号,教师编号,姓名,年龄,电话…...
FreeSwitch的mod_translate模块详细,附带场景案例及代码示例
mod_translate 模块详细介绍 mod_translate 是 FreeSWITCH 中的一个拨号计划应用程序模块,用于对电话号码或字符串进行格式转换和翻译。它可以根据预定义的规则对输入的内容进行匹配和转换,常用于号码格式化、路由选择、号码屏蔽等场景。 主要功能 号码…...
前端504错误分析
前端出现504错误(网关超时)通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案: 1. 确认错误来源 504含义:代理服务器(如Nginx、Apache)在等待后端服务响应时超时。常见架构:前端 → 代理服务器 → 后端服务,问题通常出在代理与后端之间。…...
在 .NET 8/9 中使用 AppUser 进行 JWT 令牌身份验证
文章目录 一、引言二、什么是 JSON Web 令牌?三、什么是 JSON Web 令牌结构?四、设置 JWT 令牌身份验证4.1 创建新的 .NET 8 Web API 项目4.2 安装所需的 NuGet 软件包4.3 创建 JWT 配置模型4.4 将 JWT 配置添加到您的 appsettings.json 中4.5 为 Config…...
基于python实现机器学习的心脏病预测系统
以下是一个基于 Python 实现的简单心脏病预测系统代码示例,我们将使用 Scikit - learn 库中的机器学习算法(这里以逻辑回归为例),并使用公开的心脏病数据集。 步骤: 数据加载与预处理:加载心脏病数据集&a…...
使用 NVM 随意切换 Node.js 版本
安装nvm https://github.com/coreybutler/nvm-windows/releases nvm安装详细教程(卸载旧的nodejs,安装nvm、node、npm、cnpm、yarn及环境变量配置)-CSDN博客 验证 NVM 是否安装成功-查看版本 nvm --version安装指定版本的 Node.js nvm i…...
【Prometheus】prometheus结合pushgateway实现脚本运行状态监控
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…...
SpringBoot 项目配置动态数据源
目录 一、前言二、操作1、引入依赖2、配置默认数据库 13、定义数据源实体和 Repository4、定义动态数据源5、配置数据源6、定义切换数据源注解7、定义切面类8、使用注解切换数据源 一、前言 通过切面注解方式根据不同业务动态切换数据库 二、操作 1、引入依赖 <dependen…...
CSS基本选择器
1. 通配选择器 作用:可以选中所有的 HTML 元素。 语法: * { 属性名: 属性值; } 举例: <!DOCTYPE html> <html lang"zh-cn"> <head><meta charset"UTF-8"><meta name"viewport" …...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
初探Service服务发现机制
1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能:服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...

