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

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

表现现象为&#xff1a;安装完后提示无法安装Microsoft.VisualStudio.Community.Msi&#xff0c;无法正常开发C项目 查看日志&#xff0c;大概显示&#xff1a; xxx ReturnCode1316 xxxxx 消息详细信息: 指定的帐户已存在。 试了网上所有的办法都没用&#xff0c;反复尝试&…...

【代码分享】基于IRM和RRT*的无人机路径规划方法详解与Matlab实现

基于IRM和RRT*的无人机路径规划方法详解与Matlab实现 1. IRM与RRT*的概述及优势 IRM&#xff08;Influence Region Map&#xff09;通过建模障碍物的影响区域&#xff0c;量化环境中的安全风险&#xff0c;为RRT算法提供启发式引导。RRT&#xff08;Rapidly-exploring Random…...

MybatisPlus从入门到精通

一、MyBatis-Plus核心特性 无侵入性 在MyBatis基础上增强&#xff0c;无需修改原有代码即可使用。自动化CRUD 内置通用Mapper和Service&#xff0c;减少80%单表操作代码。Lambda表达式 支持Lambda形式的条件构造&#xff0c;避免字段名硬编码错误。主键策略 支持雪花算法&…...

el-table input textarea 文本域 自适应高度,切换分页滚动失效处理办法

场景&#xff1a; el-table 表格 需要 input类型是 textarea 高度是自适应&#xff0c;第一页数据都是单行数据 不会产生滚动条&#xff0c;但是第二页数据是多行数据 会产生滚动条&#xff0c; bug: 第一页切换到第二页 第二页滚动条无法展示 解决办法&#xff1a;直接修改样…...

基于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 在选择组件的时候&#xff0c;将CUDA中的Nsight VSE和Visual Studio Integration取消勾选 不然会安装失败 2.编译ffmpeg 把cuda编译宏定义开启&#xff0c;再编译avcodec 3.编译livavutil报错struct "Cuda…...

动漫短剧开发公司,短剧小程序搭建快速上线

在当今快节奏的生活里&#xff0c;人们的娱乐方式愈发多元&#xff0c;而动漫短剧作为新兴娱乐形式&#xff0c;正以独特魅力迅速崛起&#xff0c;成为娱乐市场的耀眼新星。近年来&#xff0c;动漫短剧市场呈爆发式增长&#xff0c;吸引众多创作者与观众目光。 从市场规模来看…...

《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中定义模型时&#xff0c;理解基本数据类型至关重要。本教程提供了在SQLAlchemy模型中有效使用内置基本类型的指南。 SQLAlchemy中的基本类型 SQLAlchemy支持一组与SQL数据库类型一致的基本数据类型。SQLAlchemy中的每种类型都为各种SQL类…...

【Wireshark 02】抓包过滤方法

一、官方教程 Wireshark 官网文档 &#xff1a; Wireshark User’s Guide 二、显示过滤器 2.1、 “数据包列表”窗格的弹出过滤菜单 例如&#xff0c;源ip地址作为过滤选项&#xff0c;右击源ip->prepare as filter-> 选中 点击选中完&#xff0c;显示过滤器&#…...

ES怎么查询大于10000条数据

在Elasticsearch&#xff08;ES&#xff09;中&#xff0c;默认情况下&#xff0c;查询结果的最大返回条数是10,000条。如果你需要查询超过10,000条数据&#xff0c;可以通过以下几种方式来实现&#xff1a; 1. 使用 scroll API scroll API 适用于需要处理大量数据的场景&…...

《几何原本》命题I.8

《几何原本》命题I.8 如果两个三角形有三边对应相等&#xff0c;那么这两个三角形的所有对应角亦相等。 若 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&#xff0c;使 B C BC …...

课程2. 机器学习方法论

课程2. 机器学习方法论 训练算法并评估其质量将样本分成训练和测试。分层 交叉验证方法sklearn 接口算法模型训练模型的应用质量评估 数据预处理标准缩放Violinplot 数据集使用模型Pipeline 在上一讲中&#xff0c;我们讨论了机器学习专家面临的挑战。无论解决的问题类型和解决…...

ioday2----->标准io函数

思维导图&#xff1a; 练习&#xff1a; 1将当前的时间写入到time. txt的文件中&#xff0c;如果ctrlc退出之后&#xff0c;在再次执行支持断点续写 1.2022-04-26 19:10:20 2.2022-04-26 19:10:21 3.2022-04-26 19:10:22 //按下ctrlc停止&#xff0c;再次执行程序 4.2022…...

SQL注入练习场:PHPStudy+SQLI-LABS靶场搭建教程(零基础友好版)

注意&#xff1a;文中涉及演示均为模拟测试&#xff0c;切勿用于真实环境&#xff0c;任何未授权测试都是违法行为&#xff01; 一、环境准备 下载PHPStudy 官网下载地址&#xff1a;https://www.xp.cn/php-study&#xff08;选择Windows版&#xff09; 安装时建议选择自定…...

【笔记ing】python

1 Python基础概念及环境搭建 1.1 python简介及发展史 之父Guido van Rossum。ABC语言的替代品。Python提供了高效的数据结构&#xff0c;还能简单有效地面向对象编程。Python语法和动态类型&#xff0c;以及解释性语言的本质&#xff0c;使之成为多数平台上写脚本和快速开发应…...

DFT之SSN架构

SSN&#xff08;Streaming Scan Network&#xff09;架构在DFT&#xff08;设计可测试性&#xff09;中的应用是一种先进的设计测试解决方案&#xff0c;旨在应对现代大规模片上系统&#xff08;SoC&#xff09;设计中的复杂测试挑战。以下是对SSN架构在DFT中应用的详细分析&am…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...