前端笔记-day03

文章目录

    • 01-初始CSS
    • 02-CSS引入方式
    • 03-标签选择器
    • 04-类选择器
    • 05-id选择器
    • 06-通配符选择器
    • 07-画盒子
    • 08-字体大小
    • 09-文字粗细
    • 10-字体倾斜
    • 11-行高
    • 12-行高垂直居中
    • 13-字体族
    • 14-font复合属性
    • 15-文本缩进
    • 16-文本对齐方式
    • 17-图片对齐方式
    • 18-文本修饰线
    • 19-文字颜色
    • 20-调试工具
    • 21-综合案例
    • 22-CSS简介

01-初始CSS

<!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>p {color: red;font-size: 30px;}</style>
</head>
<body><p>体验</p>
</body>
</html>

02-CSS引入方式

<!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 :关系 样式表 --><link rel="stylesheet" href="./my.css">
</head>
<body><p>zcjkn</p><!-- 行内 style=“CSS属性” --><div style="color: aqua; font-size: 30px;">x cm md div</div>
</body>
</html>

my.css👇

p{color: red;
}

03-标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签选择器</title><style>/* 选中同名标签 设置相同的样式 */p{color: red;}</style>
</head>
<body><p>这是一个p标签</p><p>111</p>
</body>
</html>

04-类选择器

<!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 {color: red;}.size {font-size: 30px;}</style>
</head>
<body><!-- 类选择器可以给多个标签使用 --><p class="red">ncnjncjn</p><p>kmcxkn</p><!-- 一个标签可以使用多个类名  class属性值可以写多个类名  类名之间用空格隔开 --><div class="red size">        divbiaoq    </div>
</body>
</html>

05-id选择器

<!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 {color: aqua;}</style>
</head>
<body><!-- 一个id 同一个页面只能使用一次 --><div id="red">div标签</div>
</body>
</html>

06-通配符选择器

<!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>* {color: red;}</style>
</head>
<body><!-- 在设置标签的初期会用到通配符选择器 主要是用来清楚标签的默认样式 --><div>div</div><p>p</p><h1>1</h1><strong>strong</strong><ul><li>1</li><li>2</li></ul>
</body>
</html>

07-画盒子

<!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: aqua;}</style>
</head>
<body><div class="red">div1</div><div class="orange">div2</div>
</body>
</html>

08-字体大小

<!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>p {font-size: 30px;}div {font-size: 16px;}</style>
</head>
<body><p>测试大小</p><div>测试默认大小</div>
</body>
</html>

09-文字粗细

<!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>h3 {font-weight: 400;}div {font-weight: 700;}</style>
</head>
<body><h3>标题</h3><div>div标签</div>
</body>
</html>

10-字体倾斜

<!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>em {font-style: normal;}div {font-style: italic;}</style>
</head>
<body><em>倾斜</em><div>div</div>
</body>
</html>

11-行高

<!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>p {font-size: 20px;/* line-height: 30px; */line-height: 2;/* 行高是数值时  表示字体大小的倍数 */}</style>
</head>
<body><!-- 行高=上间距+文字高度+下间距   等于两行举例 --><p>4 Time-series GAN (TimeGAN) TimeGAN 由四个网络组件组成:嵌入部分、恢复部分、序列生成器和序列判别器。关键之处在于,自动编码组件(前两个)与对抗组件(后两个)是联合训练的,这样 ...知乎</p>
</body>
</html>

12-行高垂直居中

<!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>div {height: 100px;background-color: red;line-height: 100px;}</style>
</head>
<body><div>wen<br>zi</div>
</body>
</html>

13-字体族

<!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>div {font-family: 楷体;font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;}</style>
</head>
<body><div>测试文字</div>
</body>
</html>

14-font复合属性

<!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>div {/* 倾斜 加粗 大小 字体 *//* font: italic 700 30px/2 楷体 ; *//* font: 30px 楷体; */font: italic 700 30px/2  ;/* 字号和字体必须写  否则不生效 */}</style>
</head>
<body><div>djsnckj</div>
</body>
</html>

15-文本缩进

<!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>p {text-indent: 2em;font-size: 30px;}</style>
</head>
<body><p>因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号</p>
</body>
</html>

16-文本对齐方式

<!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>h1 {/* text-align: left; */text-align: center;/* text-align: right; */}</style>
</head>
<body><h1>kcmkdmck</h1><p>因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号</p>
</body>
</html>

17-图片对齐方式

<!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>img {height: 300px;}div {text-align: center;}</style>
</head>
<body><!-- text-align 本质是控制内容的对齐方式 ，属性要设置给内容的父级。如何要设置img标签 需要在img标签外嵌套一个div标签 --><div><img src="./1111.jpg" alt=""></div>
</body>
</html>

18-文本修饰线

<!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>a {text-decoration: none;}div {text-decoration: underline;}p {text-decoration: line-through;}span {text-decoration: overline;}</style>
</head>
<body><a href="#">a</a><div>div </div><p>kcmkp</p><span> kspan</span>
</body>
</html>

19-文字颜色

<!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>h1 {/* color: rebeccapurple; *//* color: rgb(100, 150, 200); *//* color: rgba(0, 0, 0, 0.8); *//* color: #00f; *//* #表示法可以简写 */background-color: aquamarine;}</style>
</head>
<body><h1>dcndjncjnjn</h1>
</body>
</html>

20-调试工具

<!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>/* 调试工具的细节1.如果是错误的属性，有黄色的叹号2.CSS属性的前面有多选框，如果勾选，这个属性生效 ；如果没有勾选这个属性不生效*/div{color: rebeccapurple;font-size: 66px;}</style>
</head>
<body><div>测试文字</div>
</body>
</html>

21-综合案例

<!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>img {height: 300px;}h1 {font-weight: 400;color: #333333;text-align: center;font-size: 30px;}.come-f {color: #999;font-size: 14px;}.p1 {text-indent: 2em;font-size: 18px;}div {text-align: center;}</style>
</head>
<body><h1>在希望的田野上|湖北秋收开镰 各地多举措保增产增收</h1><div class="come-f">来源：央视网|2222年22月22日 12：12：12</div><p class="p1"><strong>央视网消息：</strong>眼下湖北秋收已有一段时间。因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号的私生女山东济南机场那你参加就恼羞成怒成本下降聪明之处</p><p class="p1">你的空间才能长久的宁静CDC东京巨蛋就是你猜怎么，课程因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号迪斯科解放螺丝钉梅兰芳哪里都是发放</p><div><img src="./1111.jpg" alt=""></a></div><p class="p1">nzjkwangyulin shuode xinp因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号inzhong shi hubeishengyanfa d zajiaoshuidao bujinchangliangdao</p><p class="p1">此外湖北人还大力推进高标准农因此，大前端的出现是为了满足这些需求，将前端技术与移动端、桌面端、服务器端等技术进行整合，实现跨平台、跨设备的应用程序开发。3. 大前端的发展趋势 大前端是指在不同的终端设...百家号田检车戒指今年6月分 已建成3980万亩水稻，目前湖北全省仍有1800完夺目正在收各种 预计10月中国寻首个完毕</p></body>
</html>

在这里插入图片描述

22-CSS简介

<!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>h1 {color: #333;}p {text-indent: 2em;font-size: 14px;line-height: 30px;color: #444;}li {line-height: 30px;color: #444;font-size: 14px;}a {color: #0062c2;}</style>
</head>
<body><h1>CSS(层叠样式表)</h1><p>层叠样式表是一种        <a href="#">样式表</a>        语言，什么窗口模式覅房产税多么灿烂的时刻名称北京房产就那次考试模式上看快下课了咖啡无法承受的苦难付款时间的内存空间只能靠才能</p><p><strong>cSS是开放网络的核心语言职意</strong>，差不多还不错吧不错的拿出当年代表处代表就差不多的好处点击保存点击保存都不会的变化</p><ul><li>css彼此间的检查你的都能从当年的警察局</li><li>单纯的不长不短和超级精彩度假村的就能吃到九年</li><li>css大把大把的就            <a href="#">详细参科手册</a>            会变成都不会差别很大吧</li></ul>
</body>
</html>

在这里插入图片描述

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

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

相关文章

Dual Aggregation Transformer for Image Super-Resolution论文总结

Dual Aggregation Transformer for Image Super-Resolution论文总结

题目&#xff1a;Dual Aggregation Transformer&#xff08;双聚合Transformer&#xff09; for Image Super-Resolution&#xff08;图像超分辨&#xff09; 论文&#xff08;ICCV&#xff09;&#xff1a;Chen_Dual_Aggregation_Transformer_for_Image_Super-Resolution_ICCV…
阅读更多...
IM 是什么？

IM 是什么？

在当今数字化的时代&#xff0c;即时通讯&#xff08;IM&#xff09;已经渗透到人们的日常生活和企业的工作环境中。IM技术的快速i发展为人们提供了一种高效、便捷的沟通方式&#xff0c;不仅推动了社会的信息化进程&#xff0c;也提升了企业的协同效率和竞争力。 作为企业级I…
阅读更多...
【GD32】01-GPIO通用输入输出

【GD32】01-GPIO通用输入输出

GD32 闲话说在前头 这里又开一个系列啦。 原因就是之前买了立创开发板的9.9的GD32E230C8T6的板子&#xff0c;买都买了就跟着立创开发板学习一下&#xff08;属于是一次性支持了两个国产品牌了&#xff0c;立创和兆易创新&#xff09;。并且我还买了GD32F407VET6的板子&…
阅读更多...
C++：关于圆形鱼眼半全景图转为等距圆柱投影图

C++：关于圆形鱼眼半全景图转为等距圆柱投影图

C&#xff1a;空间坐标映射到球面坐标/全景图_如何将球体坐标映射到球面uv-CSDN博客 C&#xff1a;关于360全景图像和立方体6面全景图像的相互转换_彩色全景拆解正方体6个面-CSDN博客 之前记录了立方体和360全景之间的转换&#xff0c;这次记录下鱼眼图与360全景图之间的转换…
阅读更多...
信创应用软件之办公流版签

信创应用软件之办公流版签

信创应用软件之办公流版签 文章目录 信创应用软件之办公流版签概述流式文件版式文件电子签章厂商金山办公永中-永中Office中标-中标普华Office福昕科技e签宝法大大 概述 办公流版签软件主要包括办公中常用到的流式软件、版式软件以及电子签章。 版式文件和流式文件都是文书类…
阅读更多...
软件体系结构总结

软件体系结构总结

文章目录 一、软件体系结构概述1.1 基本概念1.1.1 背景1.1.2 定义1.1.3 系统1.1.3.1 定义1.1.3.2 特性1.1.3.3 系统的体系结构 1.1.4 软件设计的层次性1.1.5 体系结构的类别&#xff08;类型&#xff09;1.1.6 重要性&#xff08;意义&#xff09; 1.2 模块及其设计1.2.1 定义1…
阅读更多...
HTTP超时时间设置

HTTP超时时间设置

在进行超时时间设置之前我们需要了解一次http请求经历的过程 浏览器进行DNS域名解析&#xff0c;得到对应的IP地址根据这个IP&#xff0c;找到对应的服务器建立连接&#xff08;三次握手&#xff09;建立TCP连接后发起HTTP请求&#xff08;一个完整的http请求报文&#xff09;服…
阅读更多...
[单机]完美国际_V155_GM工具_VM虚拟机

[单机]完美国际_V155_GM工具_VM虚拟机

[端游] 完美国际单机版V155一键端PC电脑网络游戏完美世界幻海凌云家园 本教程仅限学习使用&#xff0c;禁止商用&#xff0c;一切后果与本人无关&#xff0c;此声明具有法律效应&#xff01;&#xff01;&#xff01;&#xff01; 教程是本人亲自搭建成功的&#xff0c;绝对是…
阅读更多...
出海企业哪种组网方案更省事？

出海企业哪种组网方案更省事？

对于出海企业而言&#xff0c;建立跨地区的数据传输和协同工作至关重要&#xff0c;以提升运营效率。因此&#xff0c;网络构建变得迫在眉睫。通过构建企业组网&#xff0c;企业能够加强与海外分支、客户和合作伙伴之间的联系&#xff0c;加速海外业务的发展。 然而&#xff0c…
阅读更多...
Stable Diffusion教程|图生图原理和实战

Stable Diffusion教程|图生图原理和实战

Stable Diffusion凭借其卓越的图生图功能&#xff0c;极大地提升了图像生成的可控性与输出品质&#xff0c;赋予用户前所未有的个性化创作风格表达能力。这一革新特性使得Stable Diffusion不仅能精准地捕捉用户的艺术愿景&#xff0c;更能以数字化手段孕育出新颖且极具创意的画…
阅读更多...
【Java 8】Lambda： mAA::get 返回函数式接口实例

【Java 8】Lambda： mAA::get 返回函数式接口实例

正文 代码介绍&#xff1a;分别有两个函数式接口Lazy跟LazyDependencyCreator&#xff0c;一个HashMap存储<Object, LazyDependencyCreator>键值对。重点在于mProviders.put(AA.class,mAA::get)&#xff0c;看了很久都没看懂&#xff0c;mAA::get返回的不是mAA本身吗&am…
阅读更多...
零基础HTML教程(32)--HTML5语义化标签

零基础HTML教程(32)--HTML5语义化标签

文章目录 1. div时代2. div的缺点3. 语义化标签4. 语义化标签有哪些5. 实战演练6. 小结 1. div时代 我是2009年开始学习网页开发的&#xff0c;那时候HTML里面到处是div。 这么说吧&#xff0c;那时候div就是网页的骨架&#xff0c;支撑着网页的主结构。 2. div的缺点 div作…
阅读更多...
使用J-Link Commander / JFlash 烧写固件程序(以STM32F103C8T6为例)

使用J-Link Commander / JFlash 烧写固件程序(以STM32F103C8T6为例)

使用JFlash 烧写流程 运行JFlash, 点击Project Settings 配置Jlink为SWD方式,选择连接设备为STM32F103C8T6, 点击确定. 选择要烧录的Bin文件 设置bin文件烧录地址, 点击OK(地址要在0x08000000-0x0800FFFF范围内) Note : STM32F103C8T6 Flash大小为 64KB&#xff0c; 地址范围…
阅读更多...
重生奇迹mu再生宝石怎么用有什么用

重生奇迹mu再生宝石怎么用有什么用

重生奇迹mu再生宝石有2个用处&#xff1a; 1、在玛雅哥布林处给380装备加PVP属性4追4以上的380级装备,守护宝石一颗,再生宝石一颗,成功得到PVP装备,失败宝石消失,装备无变化&#xff1b; 2、给非套装点强化属性用法跟祝福,灵魂,生命一样直接往装备上敲,成功得到随机强化属性一…
阅读更多...
八. Django项目之电商购物商城 -- 添加邮箱

八. Django项目之电商购物商城 -- 添加邮箱

Django项目之电商购物商城 – 添加邮箱 一. 用户中心 添加邮箱功能在用户中心中 , 先完善用户中心功能 1. 视图 # 用户中心 class UserInfoCenterView(LoginRequiredMixin,View):def get(self , request):context {username : request.user.username,mobile : request.use…
阅读更多...
队列的实现以及队列如何实现栈

队列的实现以及队列如何实现栈

一、队列的定义 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 FIFO(First In First Out) 入队列&#xff1a;进行插入操作的一端称为 队尾 出队列&#xff1a;进行删除操作的一端称为 队头 …
阅读更多...
20240507 ubuntu20.04+ros noetic 跑通lioslam

20240507 ubuntu20.04+ros noetic 跑通lioslam

任务&#xff1a;跑通lioslam 主要参考博客 IMU激光雷达融合使用LIO-SAM建图学习笔记——详细、长文、多图、全流程_ubuntu_AIDE回归线-GitCode 开源社区 (csdn.net) 1.不要用这一句 wget -O ~/Downloads/gtsam.zip https://github.com/borglab/gtsam/archive/4.0.0-alpha2…
阅读更多...
【Spring】初识 Spring AOP（面向切面编程）

【Spring】初识 Spring AOP（面向切面编程）

目录 1、介绍AOP 1.1、AOP的定义 1.2、AOP的作用 1.3、AOP的核心概念及术语 2、AOP实现示例 3、EnableAspectJAutoProxy注解 1、介绍AOP 1.1、AOP的定义 AOP&#xff08;Aspect Orient Programming&#xff09;&#xff0c;直译过来就是面向切面编程&#xff0c;AOP 是一…
阅读更多...
Windows Python 安装准备

Windows Python 安装准备

首先安装配置 1. 环境的安装和配置： 运行环境: 官方提供了cpython解释器 编辑环境： 课程初级阶段：推荐大家使用： 记事本工具（UE、notepad++、editplus、sublime、vscode） 中期阶段IDE的使用，pycharm 2. 安装python环境： 在官方下载python解释器 www.python.org …
阅读更多...
Ubuntu18.04--虚拟机配置Samba并从Windows登录

Ubuntu18.04--虚拟机配置Samba并从Windows登录

前言&#xff1a; 本文记录我自己在Windows上安装 Virtualbox &#xff0c;并在Virtualbox中安装 Ubuntu-18.04 虚拟机&#xff0c;在Ubuntu-18.04虚拟机里安装配置Smaba服务器&#xff0c;从 Windows 宿主系统上访问虚拟机共享samba目录的配置命令。 引用: N/A 正文 虚拟…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023