HTML第三节
一.初识CSS
1.CSS定义


A.内部样式表
B.外部样式表


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./第一次.css">
</head>
<body><p>这是p标签</p><div>这是div标签</div>
</body>
</html>
P{color: aquamarine;
}
div{color: brown;font-size: 30px;
}
C.行内写法

二.选择器
1.标签选择器


注:1.所有的p标签都会设置成一个格式
2.类选择器 (差异化)


注:1.先定义类,再使用类
2.一个class属性可以使用多个类名
3.定义类前面要加.
3.id选择器


4.通配符选择器


注:作用:清除页面中所有标签的默认格式,方便后续设置每一项格式
三.利用类选择器画盒子

<!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>.red{width: 100px;height: 100px;background-color: red;}.orange{width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>
四.文字控制属性

(一) 字体大小


注:1.默认字体大小为16px
(二)字体粗细

(三)字体倾斜


注:1.字体倾斜不好看,一般用font-style清除文字的倾斜效果
(四)行高
1.行高的书写方法


2.行高的测量方法

3.垂直居中


注:1.盒子高度即为height,好像涉及盒子模型
(五)字体族

注:1.从左向右依次查找,先找到哪个就用哪个
(六)font属性


注:1. 具体设定的属性值可以从京东等网站上复制
2.设置所有字体的初始格式,如果有需要单独设置的字体则单独设置
(七)文本修饰属性
1.文本缩进


注:1.2em表示首行缩进两个字号大小的距离
2.文本对齐


注:1.居中的本质是文字内容居中
3.图片实现居中效果

注:1. 要将属性设置给内容的父级,内容外要套div标签
4.文本修饰线


(八)字体颜色


注:1.其中第二种写法数字越大颜色越深
五.调试工具 
注:1.调试工具在浏览器检查页面中
本文是对B站上黑马免费课程的总结,供个人学习使用

相关文章:
HTML第三节
一.初识CSS 1.CSS定义 A.内部样式表 B.外部样式表 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title&g…...
Visual Studio 2022安装问题解决,提示无法安装Microsoft.VisualStudio.Community.Msi
表现现象为:安装完后提示无法安装Microsoft.VisualStudio.Community.Msi,无法正常开发C项目 查看日志,大概显示: xxx ReturnCode1316 xxxxx 消息详细信息: 指定的帐户已存在。 试了网上所有的办法都没用,反复尝试&…...
【代码分享】基于IRM和RRT*的无人机路径规划方法详解与Matlab实现
基于IRM和RRT*的无人机路径规划方法详解与Matlab实现 1. IRM与RRT*的概述及优势 IRM(Influence Region Map)通过建模障碍物的影响区域,量化环境中的安全风险,为RRT算法提供启发式引导。RRT(Rapidly-exploring Random…...
MybatisPlus从入门到精通
一、MyBatis-Plus核心特性 无侵入性 在MyBatis基础上增强,无需修改原有代码即可使用。自动化CRUD 内置通用Mapper和Service,减少80%单表操作代码。Lambda表达式 支持Lambda形式的条件构造,避免字段名硬编码错误。主键策略 支持雪花算法&…...
el-table input textarea 文本域 自适应高度,切换分页滚动失效处理办法
场景: el-table 表格 需要 input类型是 textarea 高度是自适应,第一页数据都是单行数据 不会产生滚动条,但是第二页数据是多行数据 会产生滚动条, bug: 第一页切换到第二页 第二页滚动条无法展示 解决办法:直接修改样…...
基于Windows11的DockerDesktop安装和布署方法简介
基于Windows11的DockerDesktop安装和布署方法简介 一、下载安装Docker docker 下载地址 https://www.docker.com/ Download Docker Desktop 选择Download for Winodws AMD64下载Docker Desktop Installer.exe 双点击 Docker Desktop Installer.exe 进行安装 测试Docker安装是…...
ffmpeg源码编译支持cuda
1.安装cuda CUDA Toolkit 11.3 Downloads | NVIDIA Developer 在选择组件的时候,将CUDA中的Nsight VSE和Visual Studio Integration取消勾选 不然会安装失败 2.编译ffmpeg 把cuda编译宏定义开启,再编译avcodec 3.编译livavutil报错struct "Cuda…...
动漫短剧开发公司,短剧小程序搭建快速上线
在当今快节奏的生活里,人们的娱乐方式愈发多元,而动漫短剧作为新兴娱乐形式,正以独特魅力迅速崛起,成为娱乐市场的耀眼新星。近年来,动漫短剧市场呈爆发式增长,吸引众多创作者与观众目光。 从市场规模来看…...
《2025软件测试工程师面试》接口测试篇
基础概念 什么是接口测试? 接口测试是测试系统组件间接口的一种测试,主要用于检测外部系统和内部系统之间以及各个子系统之间的交互点。测试的重点是检查数据的交换、传递和控制管理的过程,以及系统间的相互逻辑依赖关系等。 接口测试的优势是什么? 接口测试具有规范性与扩…...
嵌入式学习第二十三天--网络及TCP
进程通信的方式: 同一主机 传统 system V 不同主机 网络 --- 解决不同主机间 的进程间通信 网络 (通信) //1.物理层面 --- 联通(通路) //卫星 2G 3G 4G 5G 星链 (千帆) //2.逻辑层面 --- 通路(软件) MAC os LINUX …...
Elasticsearch:解锁深度匹配,运用Elasticsearch DSL构建闪电般的高效模糊搜索体验
目录 Elasticsearch查询分类 叶子查询 全文检索查询 match查询 multi_match查询 精确查询 term查询 range查询 复杂查询 bool查询简单应用 bool查询实现排序和分页 bool查询实现高亮 场景分析 问题思考 解决方案 search_after方案(推荐) point in time方案 方案…...
SQLAlchemy系列教程:基本数据类型及自定义类型
在SQLAlchemy、Python SQL工具包和ORM中定义模型时,理解基本数据类型至关重要。本教程提供了在SQLAlchemy模型中有效使用内置基本类型的指南。 SQLAlchemy中的基本类型 SQLAlchemy支持一组与SQL数据库类型一致的基本数据类型。SQLAlchemy中的每种类型都为各种SQL类…...
【Wireshark 02】抓包过滤方法
一、官方教程 Wireshark 官网文档 : Wireshark User’s Guide 二、显示过滤器 2.1、 “数据包列表”窗格的弹出过滤菜单 例如,源ip地址作为过滤选项,右击源ip->prepare as filter-> 选中 点击选中完,显示过滤器&#…...
ES怎么查询大于10000条数据
在Elasticsearch(ES)中,默认情况下,查询结果的最大返回条数是10,000条。如果你需要查询超过10,000条数据,可以通过以下几种方式来实现: 1. 使用 scroll API scroll API 适用于需要处理大量数据的场景&…...
《几何原本》命题I.8
《几何原本》命题I.8 如果两个三角形有三边对应相等,那么这两个三角形的所有对应角亦相等。 若 A B D E , A C D F , B C E F ABDE,ACDF,BCEF ABDE,ACDF,BCEF 将 △ A B C \triangle ABC △ABC 平移至 △ D E F \triangle DEF △DEF,使 B C BC …...
课程2. 机器学习方法论
课程2. 机器学习方法论 训练算法并评估其质量将样本分成训练和测试。分层 交叉验证方法sklearn 接口算法模型训练模型的应用质量评估 数据预处理标准缩放Violinplot 数据集使用模型Pipeline 在上一讲中,我们讨论了机器学习专家面临的挑战。无论解决的问题类型和解决…...
ioday2----->标准io函数
思维导图: 练习: 1将当前的时间写入到time. txt的文件中,如果ctrlc退出之后,在再次执行支持断点续写 1.2022-04-26 19:10:20 2.2022-04-26 19:10:21 3.2022-04-26 19:10:22 //按下ctrlc停止,再次执行程序 4.2022…...
SQL注入练习场:PHPStudy+SQLI-LABS靶场搭建教程(零基础友好版)
注意:文中涉及演示均为模拟测试,切勿用于真实环境,任何未授权测试都是违法行为! 一、环境准备 下载PHPStudy 官网下载地址:https://www.xp.cn/php-study(选择Windows版) 安装时建议选择自定…...
【笔记ing】python
1 Python基础概念及环境搭建 1.1 python简介及发展史 之父Guido van Rossum。ABC语言的替代品。Python提供了高效的数据结构,还能简单有效地面向对象编程。Python语法和动态类型,以及解释性语言的本质,使之成为多数平台上写脚本和快速开发应…...
DFT之SSN架构
SSN(Streaming Scan Network)架构在DFT(设计可测试性)中的应用是一种先进的设计测试解决方案,旨在应对现代大规模片上系统(SoC)设计中的复杂测试挑战。以下是对SSN架构在DFT中应用的详细分析&am…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
算法笔记2
1.字符串拼接最好用StringBuilder,不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
【网络安全】开源系统getshell漏洞挖掘
审计过程: 在入口文件admin/index.php中: 用户可以通过m,c,a等参数控制加载的文件和方法,在app/system/entrance.php中存在重点代码: 当M_TYPE system并且M_MODULE include时,会设置常量PATH_OWN_FILE为PATH_APP.M_T…...
