前端笔记-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的板子&…
阅读更多...
资金流分析下的企业供货关系强度模型

资金流分析下的企业供货关系强度模型

图技术 利用neo4j、networkx、dgl、python做图分析挖掘 【1】最短路径算法dijkstra 【2】基于networkx的隐性集团关系识别模型 【3】基于Neo4j的担保社群型态分析挖掘 【4】基于python求有向无环图中target到其他节点全路径 【5】有向图中任意两点的路径 【6】图基础入门 【7】…
阅读更多...
项目管理中控制质量的工具与技术

项目管理中控制质量的工具与技术

项目管理中控制质量的工具与技术 控制质量的工具与技术包括多种方法&#xff0c;旨在确保产品或服务达到既定的质量标准。关于具体的工具格式和样式&#xff0c;以下是一些示例&#xff1a; 统计技术&#xff1a; 这是一种将质量控制要素的数据转化为实际控制手段的技术。通…
阅读更多...
Visual Studio和Visual Studio Code适用于哪些编程语言

Visual Studio和Visual Studio Code适用于哪些编程语言

Visual Studio和Visual Studio Code都适用于多种编程语言&#xff0c;它们的适用编程语言如下&#xff1a; Visual Studio适用于&#xff1a; C#Visual Basic .NETF#CJavaScriptTypeScriptPythonHTML/CSSJava&#xff08;通过插件支持&#xff09; Visual Studio Code适用于…
阅读更多...
Jtti：哪些方法可以降低美国CN2服务器的延迟?

Jtti：哪些方法可以降低美国CN2服务器的延迟?

降低美国CN2服务器的延迟可以采取多种方法&#xff0c;以下是一些常用的方法&#xff1a; 1.选择优质的网络提供商和服务商&#xff1a;选择具有高质量网络和优质服务的网络提供商和服务商是降低延迟的关键。确保您选择的网络提供商具有可靠的基础设施和优质的网络连接&#xf…
阅读更多...
C++：关于圆形鱼眼半全景图转为等距圆柱投影图

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

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

C++ STL的锁介绍

在 C Standard Template Library (STL) 中&#xff0c;有几个锁的实现&#xff0c;这些都位于 <mutex> 头文件。以下是一些常见的锁及其功能&#xff1a; std::mutex&#xff1a;最基本的互斥锁&#xff0c;不可递归使用。该锁提供了独占的非公平锁定能力。 std::mutex…
阅读更多...
处理浏览器缓存问题

处理浏览器缓存问题

处理浏览器缓存问题 main.js router.onError((error) > {hasRefreshed false;console.log("异常" error.message);let ind0 error.message.indexOf(Loading chunk chunk-)let ind2 error.message.indexOf(failed.)if(ind0 ! -1 && ind2 !-1){console.…
阅读更多...
spring-boot-starter-validation校验框架

spring-boot-starter-validation校验框架

介绍 Spring Boot Starter Validation是一个Spring Boot模块&#xff0c;用于简化应用程序中的验证功能。它包含以下依赖&#xff1a; Hibernate Validator&#xff1a;Hibernate Validator是JavaBean Validation&#xff08;JSR 380&#xff09;规范的参考实现&#xff0c;提…
阅读更多...
信创应用软件之办公流版签

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

信创应用软件之办公流版签 文章目录 信创应用软件之办公流版签概述流式文件版式文件电子签章厂商金山办公永中-永中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…
阅读更多...
部署私有YUM源

部署私有YUM源

需将对应版本DVD下载至本机&#xff0c;并保证本机可访问互联网&#xff0c;下载需要的rpm包。 下载DVD并进行挂载 mkdir /data/iso -pmkdir /data/yum -pcd /datawget http://mirrors.aliyun.com/centos/7/isos/x86_64/CentOS-7-x86_64-Everything-1511.isomount -o loop -t…
阅读更多...
知识付费app源码快速发布app定制开发一站式定制开发平台,开办技术学校的风险有哪些？如何防范？

知识付费app源码快速发布app定制开发一站式定制开发平台,开办技术学校的风险有哪些？如何防范？

现在越来越多的人看好培训行业&#xff0c;投资者们或选择加盟&#xff0c;或选择创业&#xff0c;不管哪一种都是投资&#xff0c;投资就会有风险&#xff0c;那么技术学校在办学过程中&#xff0c;有哪些风险呢? 1、学生人身伤害事故的风险 技术学校的学生&#xff0c;不是同…
阅读更多...
最新文章

Copyright @ 2022~2023