CSS基础知识点速览
1 基础认识
1.1 css的介绍
CSS:层叠样式表(Cascading style sheets)
CSS作用：
给页面中的html标签设置样式
css写在style标签里，style标签一般在head标签里，位于head标签下。
<style>p{color: red;background-color: green;font-size: 30px;height: 50px;width: 50px;}</style>
1.2 CSS的引入
内嵌式：css写在style标签里
外联式：css写在单独的.css文件中
p{color: blue;font-size: 30px;background-color: aquamarine;
}
<link rel="stylesheet" href="./test.css">
行内式：css写在style标签属性中
<div style="color: red; font-size:10px">hello</div>
2基础选择器
2.1 标签选择器
标签选择器：以标签名命名的选择器
<head><style>p{color: red;background-color: green;font-size: 30px;height: 50px;width: 50px;}</style>
</head>
<body>
<script><p>hello</p>
</script>
</body>
2.2 类选择器
通过类名，找到页面中所有带有这个类名的标签，设置样式
类名可以重复，一个类选择器可以选中多个标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.win{color: blue;}</style>
</head>
<body><p class="win">hello</p>
</body>
</html>
2.3 id选择器
通过id属性值，找到页面中所有带有这个id的标签，设置样式
<p id="win">hello</p>
所有标签上都有id属性
id在一个页面中是唯一的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签
2.4 通配符选择器
<style>*{color: blue;}</style>
用的非常少
3文字
3.1文字大小
属性名:font-size
取值:数字+px
3.2字体粗细
font-weight
取值:
1关键字
normal 正常
bold 加粗
2纯数字
400正常
700加粗
3.3字体样式
3.3.1是否倾斜
font-style
取值
normal 正常
italic 倾斜
3.3.2字体系列
font-family
取值:
宋体
3.3.3 字体font相关属性的连写
属性名：font
取值：
P{
font: italic 700 66px 宋体
}
3.4 扩展
如果给了一个标签的相同属性设置了多个样式，此时样式会覆盖，浏览器会选择最后一个设置来渲染。
3.5 文本样式
3.5.1 文本缩进
属性名:text-indent
取值：
数字+px
数字+em（1em=当前标签font-size的大小）
首行缩进2个字
<style>p{text-indent: 2em;}</style>
3.5.2 文本水平对齐方式
text-align
取值：
left左对齐
right右对齐
center居中对齐
3.5.3 文本修饰
text-decoration
取值
underline下划线
line-through删除线
overline 上划线
none 无装饰线
开发中会用text-decoration: none;清楚a标签默认的修饰
3.5.4 行高
控制两行文字之间的距离
属性名：line-height
取值:
1数字+px
2倍数（当前font-size的倍数）
应用：
1网页精准布局时会设置line-height:1取消上下间距；
2让单行文本垂直居中可以设置line-height:文字父元素高度
font: style weight size/line-height 字体
字体大小和行高之间用/隔开。
3.5.5 颜色
文字颜色:color
背景颜色: background-color
取值如下图[1]
#000000
上面数字两辆一组
三组分别代表红、绿、蓝的数值
4 Chrome调试工具
鼠标右键-检查
只要肯定代码上有删除线就是被重叠覆盖掉了。
5 扩展
标签水平居中
margin: 0 auto
参考
[1]扩展颜色取值
相关文章：
CSS基础知识点速览
1 基础认识 1.1 css的介绍 CSS:层叠样式表(Cascading style sheets) CSS作用： 给页面中的html标签设置样式 css写在style标签里，style标签一般在head标签里，位于head标签下。 <style>p{color: red;background-color: green;font-size…...
Windows 时间服务配置和配置工具
文章目录 Windows 时间服务保留Portw32tm 命令配置 Windows 时间服务配置客户端使用两个时间服务器配置客户端自动从域源同步时间检查客户端时间配置使用本地组策略编辑器配置Windows 时间注册表参考推荐阅读 Windows 时间服务 (W32Time) 为 Active Directory 域服务 (AD DS) 管…...
cmake find_package、引用GDAL 初步学习
上次的源码的CMakeLists.txt文件里有 find_package(GDAL REQUIRED) 这句； 从字面意思看此源码需要GDAL库； 查了一下，find_package 指令的基本功能是查找第三方库，并返回其细节； 我当前GDAL安装在D:\GDAL； 先把它的CMakeLists.txt重命名为别的，不使用； 新建一个C…...
紫光同创FPGA编写的8画面分割器演示
适用于板卡型号： 紫光同创PGL50H开发平台（盘古50K开发板） 图(1) 盘古50K开发板 TOP 层逻辑框 图(2) TOP层逻辑框 video_copy_ux 将输入的一路RGB888信号复制成8份，每份画面内容相同，各路颜色有些差异： 第…...
openLayers--绘制多边形、获取视图的中心点、获取当前地图等级、设置地图等级
openLayers绘制多边形、获取视图中心点 前言效果图1、导入LineString2、创建添加多边形3、定义多变形样式4、获取当前视图的中心点5、获取当前视图等级6、设置地图等级 前言 上一篇文章在vue项目中绘制了openlayers绘制了地图和标记点，本篇文章讲解openlayers绘制多…...
CSP-31补题日记--梯度求解
202309-3-梯度求解 题目链接 http://118.190.20.162/view.page?gpidT173 最近刚刚在上数据结构二叉树 跟这道题真的是强相关 然后在就是涉及到了数学求导 这基本上是我复学两个月做的最久的题了 感觉做完这道题对栈和二叉树理解比以前清晰了很多 不摆了 上代码 ** 题目思路&am…...
MySQL 8.0.32 union 语句中文查不到数据
关键字 MySQL union 语句，中文查不到数据 问题描述 MySQL 8.0.32 union 语句，中文查不到数据 解决问题思路 1、Create a table test with two fields, such as id and name mysql>create table test ( id int unsigned auto_increment key, name…...
FlinkCDC系列：通过skipped.operations参数选择性处理新增、更新、删除数据
在flinkCDC源数据配置，通过debezium.skipped.operations参数控制，配置需要过滤的 oplog 操作。操作包括 c 表示插入，u 表示更新，d 表示删除。默认情况下，不跳过任何操作，以逗号分隔。配置多个操作ÿ…...
高压检测设备
比如：高压数字表、高压差分探头、指针式高压表、电流探枪、高压探棒 这些设备都是用来测量高压的，有的测电压，有的测电流。 高压数字表： 单独使用，功能很简单，有2个正负极探爪，把2个探爪连接到…...
Vue3问题：如何实现组件拖拽实时预览功能？
前端功能问题系列文章，点击上方合集↑ 序言 大家好，我是大澈！ 本文约3000字，整篇阅读大约需要5分钟。 本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。 …...
基于jsp的采购管理系统的分析与实现
物资采购管理系统是针对内部而设计的，应用于的局域网，这样可以使得内部管理更有效的联系起来。企业采购管理系统是将IT技术用于企业采购信息的管理, 它能够收集与存储企业采购的档案信息，提供更新与检索企业采购信息档案的接口；提…...
react配置二级路由
1.在createBrowserRouter上添加basename属性，比如 const RouterRender createBrowserRouter([{path: /,element: <App><Login></Login></App>},...SystemRouter,...InventoryRouter,...FlowManageRouter,{path: "*",element: &…...
C++ 模板特化
非类型模板参数 定义：对于函数模板和类模板，模板参数并不局限于类型，普通值也可以作为模板参数 非类型模板参数定义的是常量 template<typename T, size_t N> class array; //T：类型模板参数 //N：非类型模板参…...
Spring-createBean部分源码
createBean源码： /*** Central method of this class: creates a bean instance,* populates the bean instance, applies post-processors, etc.* see #doCreateBean*/ Override protected Object createBean(String beanName, RootBeanDefinition mbd, Nullable …...
2015年亚太杯APMCM数学建模大赛C题识别网络中的错误连接求解全过程文档及程序
2015年亚太杯APMCM数学建模大赛 C题 识别网络中的错误连接 原题再现 网络是描述真实系统结构的强大工具——社交网络描述人与人之间的关系，万维网描述网页之间的超链接关系。随着现代技术的发展，我们积累了越来越多的网络数据，但这些数据部…...
js：可选链运算符（?.）和空值合并运算符（??）
文档： 可选链运算符（?.）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining空值合并运算符（??）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Referenc…...
【Java 进阶篇】Java ServletContext功能：获取文件服务器路径
Java ServletContext是Java EE中的一个核心接口，用于与Servlet容器进行通信，提供了许多有用的功能，包括获取文件服务器路径。在本文中，我们将详细介绍如何使用ServletContext来获取文件服务器路径，并提供示例代码以帮助…...
Android startActivity流程
1.常规调用 startActivity(new Intent(this,MainActivity.class)); 进入Activity的startActivity方法 /*** Same as {link #startActivity(Intent, Bundle)} with no options* specified.** param intent The intent to start.** throws android.content.ActivityNotFoundExc…...
Qt实验室
前言 本系列文章是研究和记录Qt开发过程中遇到的各种问题的集合 由于Qt是一个庞大的开发体系，很难用有限的文案对其做全面深入细致的讲解，因此市面上大多数Qt开发相关的教程都显得极其粗浅入门，通常只能作为最基本的入门教程。但是实际项目…...
diffusers-Load adapters
https://huggingface.co/docs/diffusers/main/en/using-diffusers/loading_adaptershttps://huggingface.co/docs/diffusers/main/en/using-diffusers/loading_adapters 有几种训练技术可以个性化扩散模型，生成特定主题的图像或某些风格的图像。每种训练方法都会产…...
AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper（简称 DM）是 Linux 内核中的一套通用块设备映射框架，为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程，并配以详细的…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的
修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
高分辨率图像合成归一化流扩展
大家读完觉得有帮助记得关注和点赞！！！ 1 摘要 我们提出了STARFlow，一种基于归一化流的可扩展生成模型，它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流（TARFlow&am…...