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

CSS基础知识点速览

news 2026/2/8 21:19:07

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作用&#xff1a; 给页面中的html标签设置样式 css写在style标签里&#xff0c;style标签一般在head标签里&#xff0c;位于head标签下。 <style>p{color: red;background-color: green;font-size…...

编程日记 2023/11/4 14:24:20

Windows 时间服务配置和配置工具

文章目录 Windows 时间服务保留Portw32tm 命令配置 Windows 时间服务配置客户端使用两个时间服务器配置客户端自动从域源同步时间检查客户端时间配置使用本地组策略编辑器配置Windows 时间注册表参考推荐阅读 Windows 时间服务 (W32Time) 为 Active Directory 域服务 (AD DS) 管…...

编程日记 2023/11/4 14:23:18

cmake find_package、引用GDAL 初步学习

上次的源码的CMakeLists.txt文件里有 find_package(GDAL REQUIRED) 这句； 从字面意思看此源码需要GDAL库； 查了一下，find_package 指令的基本功能是查找第三方库，并返回其细节； 我当前GDAL安装在D:\GDAL； 先把它的CMakeLists.txt重命名为别的，不使用； 新建一个C…...

编程日记 2023/11/4 14:22:16

紫光同创FPGA编写的8画面分割器演示

适用于板卡型号&#xff1a; 紫光同创PGL50H开发平台&#xff08;盘古50K开发板&#xff09; 图(1) 盘古50K开发板 TOP 层逻辑框 图(2) TOP层逻辑框 video_copy_ux 将输入的一路RGB888信号复制成8份&#xff0c;每份画面内容相同&#xff0c;各路颜色有些差异&#xff1a; 第…...

编程日记 2023/11/4 14:21:15

openLayers--绘制多边形、获取视图的中心点、获取当前地图等级、设置地图等级

openLayers绘制多边形、获取视图中心点 前言效果图1、导入LineString2、创建添加多边形3、定义多变形样式4、获取当前视图的中心点5、获取当前视图等级6、设置地图等级 前言 上一篇文章在vue项目中绘制了openlayers绘制了地图和标记点&#xff0c;本篇文章讲解openlayers绘制多…...

编程日记 2023/11/4 14:20:14

CSP-31补题日记--梯度求解

202309-3-梯度求解 题目链接 http://118.190.20.162/view.page?gpidT173 最近刚刚在上数据结构二叉树 跟这道题真的是强相关 然后在就是涉及到了数学求导 这基本上是我复学两个月做的最久的题了 感觉做完这道题对栈和二叉树理解比以前清晰了很多 不摆了 上代码 ** 题目思路&am…...

编程日记 2023/11/4 14:19:12

MySQL 8.0.32 union 语句中文查不到数据

关键字 MySQL union 语句&#xff0c;中文查不到数据 问题描述 MySQL 8.0.32 union 语句&#xff0c;中文查不到数据 解决问题思路 1、Create a table test with two fields, such as id and name mysql>create table test ( id int unsigned auto_increment key, name…...

编程日记 2023/11/4 14:18:11

FlinkCDC系列：通过skipped.operations参数选择性处理新增、更新、删除数据

在flinkCDC源数据配置&#xff0c;通过debezium.skipped.operations参数控制&#xff0c;配置需要过滤的 oplog 操作。操作包括 c 表示插入&#xff0c;u 表示更新&#xff0c;d 表示删除。默认情况下&#xff0c;不跳过任何操作&#xff0c;以逗号分隔。配置多个操作&#xff…...

编程日记 2023/11/4 14:17:10

高压检测设备

比如&#xff1a;高压数字表、高压差分探头、指针式高压表、电流探枪、高压探棒 这些设备都是用来测量高压的&#xff0c;有的测电压&#xff0c;有的测电流。 高压数字表&#xff1a; 单独使用&#xff0c;功能很简单&#xff0c;有2个正负极探爪&#xff0c;把2个探爪连接到…...

编程日记 2023/11/4 14:16:09

Vue3问题：如何实现组件拖拽实时预览功能？

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约3000字&#xff0c;整篇阅读大约需要5分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …...

编程日记 2023/11/4 14:14:07

基于jsp的采购管理系统的分析与实现

物资采购管理系统是针对内部而设计的&#xff0c;应用于的局域网&#xff0c;这样可以使得内部管理更有效的联系起来。企业采购管理系统是将IT技术用于企业采购信息的管理, 它能够收集与存储企业采购的档案信息&#xff0c;提供更新与检索企业采购信息档案的接口&#xff1b;提…...

编程日记 2023/11/4 14:13:06

react配置二级路由

1.在createBrowserRouter上添加basename属性&#xff0c;比如 const RouterRender createBrowserRouter([{path: /,element: <App><Login></Login></App>},...SystemRouter,...InventoryRouter,...FlowManageRouter,{path: "*",element: &…...

编程日记 2023/11/4 14:12:05

C++ 模板特化

非类型模板参数 定义&#xff1a;对于函数模板和类模板&#xff0c;模板参数并不局限于类型&#xff0c;普通值也可以作为模板参数 非类型模板参数定义的是常量 template<typename T, size_t N> class array; //T&#xff1a;类型模板参数 //N&#xff1a;非类型模板参…...

编程日记 2023/11/4 14:11:04

Spring-createBean部分源码

createBean源码&#xff1a; /*** 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 …...

编程日记 2023/11/4 14:10:02

2015年亚太杯APMCM数学建模大赛C题识别网络中的错误连接求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 C题 识别网络中的错误连接 原题再现 网络是描述真实系统结构的强大工具——社交网络描述人与人之间的关系&#xff0c;万维网描述网页之间的超链接关系。随着现代技术的发展&#xff0c;我们积累了越来越多的网络数据&#xff0c;但这些数据部…...

编程日记 2023/11/4 14:09:01

js：可选链运算符（?.）和空值合并运算符（??）

文档&#xff1a; 可选链运算符&#xff08;?.&#xff09;https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining空值合并运算符&#xff08;??&#xff09;https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Referenc…...

编程日记 2023/11/4 14:08:00

【Java 进阶篇】Java ServletContext功能：获取文件服务器路径

Java ServletContext是Java EE中的一个核心接口&#xff0c;用于与Servlet容器进行通信&#xff0c;提供了许多有用的功能&#xff0c;包括获取文件服务器路径。在本文中&#xff0c;我们将详细介绍如何使用ServletContext来获取文件服务器路径&#xff0c;并提供示例代码以帮助…...

编程日记 2023/11/4 14:06:59

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…...

编程日记 2023/11/4 14:05:58

Qt实验室

前言 本系列文章是研究和记录Qt开发过程中遇到的各种问题的集合 由于Qt是一个庞大的开发体系&#xff0c;很难用有限的文案对其做全面深入细致的讲解&#xff0c;因此市面上大多数Qt开发相关的教程都显得极其粗浅入门&#xff0c;通常只能作为最基本的入门教程。但是实际项目…...

编程日记 2023/11/4 14:04:56

diffusers-Load adapters

https://huggingface.co/docs/diffusers/main/en/using-diffusers/loading_adaptershttps://huggingface.co/docs/diffusers/main/en/using-diffusers/loading_adapters 有几种训练技术可以个性化扩散模型&#xff0c;生成特定主题的图像或某些风格的图像。每种训练方法都会产…...

编程日记 2023/11/4 14:03:54

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2026/2/5 1:30:05

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07