HTML第三节

embedded/2025/3/5 21:51:50/
htmledit_views">

一.初识CSS

1.CSS定义

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

html"><!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.通配符选择器

 

注:作用:清除页面中所有标签的默认格式,方便后续设置每一项格式 

三.利用类选择器画盒子

 

html"><!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.ppmy.cn/embedded/170304.html

相关文章

「Selenium+Python自动化从0到1②|2025浏览器操控7大核心API实战(附高效避坑模板))」

Python 自动化操作浏览器基础方法 在进行 Web 自动化测试时&#xff0c;操作浏览器是必不可少的环节。Python 结合 Selenium 提供了强大的浏览器操作功能&#xff0c;让我们能够轻松地控制浏览器执行各种任务。本文将详细介绍如何使用 Python 和 Selenium 操作浏览器的基本方法…

Halcon算子 binary_threshold、auto_threshold、dyn_threshold

算子适用场景特点threshold全局对比度高或均匀光照图像固定阈值、速度快binary_threshold自动计算阈值&#xff08;基于直方图或Otsu&#xff09;自动化、但无法处理光照不均匀dyn_threshold光照不均匀、局部对比度变化动态调整阈值&#xff0c;灵活性强 自动阈值分割 auto_t…

麒麟V10-SP2-x86_64架构系统下通过KVM创建虚拟机及配置虚机的NAT、Bridge两种网络模式全过程

文章目录 一、什么是虚拟化&#xff1f;虚拟化具有哪些优势 二、常见的虚拟化技术1、kvm介绍2、kvm工作原理3、kvm功能 三、安装kvm并启动第一个kvm机器1、环境准备2、安装kvm工具3、启动并设置开机自启 libvirtd 服务4、验证 KVM 模块是否加载5、上传系统镜像到指定目录6、网络…

JWT概念及JAVA使用

前言 JSON Web Token&#xff08;缩写 JWT&#xff09;是目前最流行的跨域认证解决方案 认证方式 认证方式一般有两种 session认证JWT认证 一、session认证 1、步骤 过去&#xff0c;我们都是使用session认证&#xff0c;步骤如下 前端访问登录接口登录接口验证完账号密码没问…

Linux与UDP应用1:翻译软件

UDP应用1&#xff1a;翻译软件 本篇介绍 本篇基于UDP编程接口基本使用中封装的服务器和客户端进行改写&#xff0c;基本功能如下&#xff1a; 从配置文件dict.txt读取到所有的单词和意思客户端向服务端发送英文服务端向客户端发送英文对应的中文意思 配置文件内容 下面的内…

大白话React Hooks(如 useState、useEffect)的使用方法与原理

啥是 React Hooks 在 React 里&#xff0c;以前我们写组件主要用类&#xff08;class&#xff09;的方式&#xff0c;写起来有点复杂&#xff0c;尤其是处理状态和副作用的时候。React Hooks 就是 React 16.8 之后推出的新特性&#xff0c;它能让我们不用写类&#xff0c;直接…

211.SpringSecurity:认证、授权概念,自定义数据源认证,验证码认证

目录 一、权限管理概念 1.基本概念 2.常用权限管理解决方案 (1)Shiro (2)Spring Security 二、整体架构 1.认证:Authentication (1)AuthenticationManager (2)Authentication (3)SecurityContextHolder 2.授权:Authorization (1)AccessDecisionManag…

面试常问的压力测试问题

性能测试作为软件开发中的关键环节&#xff0c;确保系统在高负载下仍能高效运行。压力测试作为性能测试的重要类型&#xff0c;旨在通过施加超出正常负载的压力&#xff0c;观察系统在极端条件下的表现。面试中&#xff0c;相关问题常被问及&#xff0c;包括定义、重要性、与负…