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站上黑马免费课程的总结,供个人学习使用 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/28853.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【大模型系列篇】国产开源大模型DeepSeek-V3技术报告解析

DeepSeek-V3技术报告 目录 DeepSeek-V3技术报告 1. 摘要 2. 引言 3. DeepSeek V3 架构 3.1 基础架构 3.1.1. 多头潜在注意力 3.1.2. DeepSeekMoE和无辅助损失的负载均衡 3.2 多令牌预测 4. 基础设施 4.1 计算集群 4.2 训练框架 4.2.1. DualPipe算法与计算通信协同优…

linux的文件系统及文件类型

目录 一、Linux支持的文件系统 二、linux的文件类型 2.1、普通文件 2.2、目录文件 2.3、链接文件 2.4、字符设备文件: 2.5、块设备文件 2.6、套接字文件 2.7、管道文件 三、linux的文件属性 3.1、关于权限部分 四、Linux的文件结构 五、用户主目录 5.1、工作目录…

rabbitmq-amqp事务消息+消费失败重试机制+prefetch限流

1. 安装和配置 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-amqp</artifactId> </dependency><dependency> <groupId>com.fasterxml.jackson.core</groupId> <arti…

web高可用集群项目(数据库主从同步、文件共享存储、nginx动静分离+负载均衡+高可用)

一、项目环境 二、环境准备 主机名IP地址备注openEuler-1192.168.121.11主负载调度器openEuler-2192.168.121.12副负载调度器openEuler-3192.168.121.13web-1&#xff08;静态&#xff09;openEuler-4192.168.121.14web-2&#xff08;静态&#xff09;openEuler-5192.168.121.…

企业工程项目管理系统源码:Java版源码解析

一、项目概述 鸿鹄工程项目管理系统是基于Spring Cloud、Spring Boot、Mybatis、Vue和ElementUI技术栈&#xff0c;采用前后端分离架构构建的工程管理软件。它旨在应对企业快速发展中的管理挑战&#xff0c;提升工程管理效率&#xff0c;减轻工作负担&#xff0c;加速信息处理…

深度学习五大模型:CNN、Transformer、BERT、RNN、GAN详细解析

卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09; 原理 &#xff1a;CNN主要由卷积层、池化层和全连接层组成。卷积层通过卷积核在输入数据上进行卷积运算&#xff0c;提取局部特征&#xff1b;池化层则对特征图进行下采样&#xff0c;降低特征维度&…

vtk 3D坐标标尺应用 3D 刻度尺

2d刻度尺 : vtk 2D 刻度尺 2D 比例尺-CSDN博客 简介&#xff1a; 3D 刻度尺&#xff0c;也是常用功能&#xff0c;功能强大 3D 刻度尺 CubeAxesActor vtkCubeAxes调整坐标轴的刻度、原点和显示效果&#xff0c;包括关闭小标尺、固定坐标轴原点&#xff0c;以及设置FlyMode模…

Hive-优化(参数优化篇)

map 数和reduce数 控制hive任务中的map数 合适的map数&#xff0c;会让资源分配的更平均&#xff0c;让我们的代码运行更快&#xff0c;通常情况下&#xff0c;作业会通过input的目录产生一个或者多个map任务。我们可以通过调整参数来控制运行过程中的map数。 Hive Map的数量…

双链路提升网络传输的可靠性扩展可用带宽

为了提升网络传输的可靠性或增加网络可用带宽&#xff0c; 通常使用双链路冗余备份或者双链路聚合的方式。 本文介绍几种双链路网络通信的案例。 5GWiFi冗余传输 双Socket绑定不同网络接口&#xff1a;通过Android的ConnectivityManager绑定5G蜂窝网络和WiFi的Socket连接&…

Spring(三)容器-注入

一 自动注入Autowire 代码实现&#xff1a; package org.example.spring01.service;import org.springframework.stereotype.Service;Service public class UserService {}package org.example.spring01.controller;import lombok.Data; import lombok.ToString; import org.…

MySQL零基础教程16—表连接进阶

复习表别名 之前已经学习过&#xff0c;查询的时候可以使用as来对检索的列进行重命名&#xff0c;这样可以让sql更加简介&#xff0c;增强易读性&#xff08;as可以省略&#xff09; 此外&#xff0c;使用表别名还可以支持在一条select语句中&#xff0c;一个表是被多次使用 …

【MySQL】MySQL 复制

MySQL复制介绍 MySQL复制允许将主实例(master)上的数据同步到一个或多个从实例(slave)上&#xff0c;默认情况下复制是异步进行的&#xff0c;从库也不需要一直连接到主库来同步数据。 MySQL复制的数据粒度可以是主实例上所有的数据库&#xff0c;也可以是指定的一个或多个数据…

Linux的缓存I/O和无缓存IO

一、I/O缓存的背景 I/O缓存是指在内存里开辟一块区域&#xff0c;存放用来接收用户输入和用于计算机输出的数据&#xff0c;以减小系统开销和提高外设效率。linux对IO文件的操作分为不带缓存的IO操作和带缓存的IO操作&#xff08;标准IO操作&#xff09;。为什么存在C标准I/O库…

YOLOv5 + SE注意力机制:提升目标检测性能的实践

一、引言 目标检测是计算机视觉领域的一个重要任务&#xff0c;广泛应用于自动驾驶、安防监控、工业检测等领域。YOLOv5作为YOLO系列的最新版本&#xff0c;以其高效性和准确性在实际应用中表现出色。然而&#xff0c;随着应用场景的复杂化&#xff0c;传统的卷积神经网络在处…

Webpack分包与合包深度解析

Webpack分包与合包深度解析 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff01;点我试试&#xff01;&#xff01; 引言&#xff1a;现代前端工程的模块化困境 在单页面应用&#xff08;SPA&#…

永恒之塔鼠标卡顿移动鼠标卡屏的问题

原因是现在鼠标普遍轮询率偏高导致系统性能开销过大 解决办法90块钱到淘宝雷蛇官网店买个最便宜的鼠标 然后安装Razer控制台,在性能栏把轮询率设置到最低(125)

Selenium遇到Exception自动截图

# 随手小记 场景&#xff1a;测试百度&#xff1a; 点击新闻&#xff0c;跳转到新的窗口&#xff0c;找到输入框&#xff0c;输入“hello,world" 等到输入框的内容是hello,world, 这里有个错误&#xff0c;少了一个] 后来就实现了错误截图的功能&#xff0c;可以参考 …

飞机大战lua迷你世界脚本

-- 迷你世界飞机大战 v1.2 -- 星空露珠工作室制作 -- 最后更新&#xff1a;2024年1月 ----------------------------- -- 迷你世界API适配配置 ----------------------------- local UI { BASE_ID 7477478487091949474-22856, -- UI界面ID ELEMENTS { BG 1, -- 背景 BTN_LE…

我的ChatGPT怎么登不上?

近期&#xff0c;不少用户反馈在使用ChatGPT时遇到登录困难、连接超时等问题。本文将从技术角度分析常见原因&#xff0c;并提供合规、安全的解决方案&#xff0c;同时结合开发者实际需求推荐实用工具&#xff0c;助您高效应对登录障碍。 ChatGPT登录失败的常见原因 网络环境限…

【MySQL】用MySQL二进制包构建docker镜像

一、实验背景 【MySQL&docker】基于CentOS7.5 编译制作MySQL5.7.28镜像 https://www.jianshu.com/p/71fd79b69a6b 用MySQL源码编译的docker镜像&#xff0c;体积过大&#xff0c;直奔3G了&#xff0c;你也不清楚&#xff0c;这点编译参数打出的体积怎么就这么大&#xff01…