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 有几种训练技术可以个性化扩散模型，生成特定主题的图像或某些风格的图像。每种训练方法都会产…...
【QT】Layout布局间隙优化全攻略（参数调整与实战技巧）
1. 为什么你的QT界面总有"迷之缝隙"？ 每次用QT做界面开发时，最让我抓狂的就是那些莫名其妙出现的空白间隙。明明已经按照设计稿精确设置了控件尺寸，但运行起来总会出现几个像素的偏差。后来我发现，这些间隙主要来自三个…...
利用快马ai快速生成c语言语法学习原型，直观掌握编程基础
今天想和大家分享一个特别实用的C语言学习小技巧。作为一个编程新手，我最近发现用InsCode(快马)平台可以快速搭建C语言学习原型，把抽象的概念变成看得见、能运行的代码，学习效果特别好。 为什么要用原型学习法 刚开始学C语言时，最…...
公司内部业务系统，其实无需专门开发，用免费低代码平台就够了
这段时间陆续试了几款主流低代码工具，整体体验下来，有些平台在免费阶段就已经很好用了。整理了一份我觉得比较值得尝试的清单，分享给同样有需求的人。斑斑AI首先是斑斑AI。它给我最大的感受就是“没有限制”。完全无限制免费这一点非常少见&a…...
SpringBoot实战：RestTemplate如何优雅地上传文件？附完整代码示例
SpringBoot实战：RestTemplate文件上传的深度优化与避坑指南 在微服务架构盛行的今天，SpringBoot应用间的文件传输已成为日常开发中的高频需求。许多开发者在使用RestTemplate进行文件上传时，往往会遇到各种"诡异"的问题——明明代码…...
天翼网盘网页版绕过50M限制下载大文件？F12开发者工具实战教程
突破网页端下载限制的浏览器开发者工具实战指南 在云存储服务日益普及的今天，许多平台为了推广客户端应用，会在网页端设置各种功能限制。对于技术爱好者而言，这些限制往往可以通过浏览器内置的开发者工具进行突破。本文将详细介绍如何利用F12…...
别再只用Canvas了！用Vue3组合式API优雅封装fabric.js的画笔与橡皮擦（附完整Hook代码）
重构Canvas交互：用Vue3组合式API封装fabric.js的工程化实践 在Web图形编辑领域，fabric.js以其强大的对象模型和交互能力成为许多开发者的首选。但当我们将它集成到Vue3项目中时，常常会遇到状态管理混乱、代码耦合度高的问题。本文将展示如何用…...
HP-Socket技术债务管理成熟度提升计划：行动项与时间表
HP-Socket技术债务管理成熟度提升计划：行动项与时间表 【免费下载链接】HP-Socket High Performance TCP/UDP/HTTP Communication Component 项目地址: https://gitcode.com/gh_mirrors/hp/HP-Socket HP-Socket作为高性能TCP/UDP/HTTP通信组件，随…...
SAP Fiori Launchpad 中 Spaces 与 Pages 的传输机制：从对象关系到项目落地的完整实践
在很多 SAP Fiori 项目里，团队把精力放在了应用开发、业务角色设计、SAPUI5 组件装配，或者 Fiori Elements 的元数据驱动页面构建上，却常常低估了一个看似普通、实际上极易影响上线结果的环节：Spaces 与 Pages 的传输。 这个主题之所以重要，不是因为操作本身复杂，而是因…...
COMSOL数值模拟：N2和CO2混合气体在THM热流固三场耦合下增强瓦斯抽采
COMSOL数值模拟，实现N2和CO2混合气体在THM热流固三场耦合情况下增强瓦斯（煤层气抽采）煤层气抽采效率提升这事儿，最近在实验室搞了个骚操作——往煤层里怼氮气和二氧化碳的混合气。说人话就是拿这俩气体当开塞露，把卡在…...
3分钟掌握Umi-OCR插件：打造你的专属文字识别工具箱
3分钟掌握Umi-OCR插件：打造你的专属文字识别工具箱 【免费下载链接】Umi-OCR_plugins Umi-OCR 插件库 项目地址: https://gitcode.com/gh_mirrors/um/Umi-OCR_plugins 还在为不同场景下的文字识别需求而烦恼吗？Umi-OCR插件库为你提供了完美的解决…...