前端笔记-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">来源:央视网|22222222121212</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.rhkb.cn/news/324666.html

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

相关文章

容器监控与日志管理

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、Docker监控工具 二、容器日志工具docker logs 三、第三方日志工具 四、容器日志驱动 五、示例 5.1、查看容器中运行的进程的信息 5.2、查看…

SOCKET编程(4):SOCKET实战

SOCKET实战 Writen()、Readn()函数 send()函数存在需要发送的字符数len小于函数返回的已发送的字符数(ssize_t)的问题 recv()函数存在需要接收的字符数len小于函数返回的已接收的字符数(ssize_t)的问题 解决上述问题通过Writen()、Readn()函数实现 //buff是数据存储地址&a…

在Leaflet中点对象使用SVG和Canvas两种模式的对比

目录 前言 一、关于SVG和Canvas 1、SVG知识 2、Canvas知识 3、优缺点 二、SVG和Canvas在Leaflet的使用 1、相关类图 2、Leaflet的默认展示方式 三、SVG和Canvas实例及性能对比 1、SVG模式及性能对比 2、Canvas优化 总结 前言 众所周知&#xff0c;在Leaflet当中&#…

用于视频识别的快慢网络

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;用于视频识别的快慢网络1、文献摘要2、提出方法2.1、SlowFast模型2.2、SlowFast 提出思想 3、相关方法3.1、时空间卷积3.2、基于光…

深入解析RedisSearch:全文搜索的新维度

码到三十五 &#xff1a; 个人主页 在当今的数据时代&#xff0c;信息的检索与快速定位变得尤为关键。Redis&#xff0c;作为一个高性能的内存数据库&#xff0c;已经在缓存和消息系统中占据了重要地位。然而&#xff0c;Redis并不直接支持复杂的搜索功能。为了填补这一空白&am…

零代码平台助力中国石化江苏油田实现高效评价体系

概述&#xff1a; 中国石化集团江苏石油勘探局有限公司面临着评价体系依赖人工处理数据、计算繁琐且容易出错的挑战。为解决这一问题&#xff0c;他们决定借助零代码平台明道云开发江苏油田高质量发展经济指标评价系统。该系统旨在实现原始数据批量导入与在线管理、权重及评分…

Redis单机安装

1.编译 cd redis安装目录 makemake install2.修改配置文件redis.conf #端口修改 port 6379 #后台进程启动 yes daemonize yes # daemonize no #注释掉 为了可以远程连接 #bind 127.0.0.1 #设置密码 requirepass pwd3.启动 ./redis-server ../redis.conf查看进程 [rootlocal…

【Linux】从零开始认识动静态库 -动态库

送给大家一句话&#xff1a; 我不要你风生虎啸&#xff0c; 我愿你老来无事饱加餐。 – 梁实秋 《我把活着欢喜过了》 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚ଘ(੭ˊᵕˋ)੭…

【小红书采集软件】根据关键词批量爬取小红书笔记正文、笔记链接、发布时间、转评赞藏等

一、背景介绍 1.1 爬取目标 熟悉我的小伙伴可能了解&#xff0c;我之前开发过2款软件&#xff1a; 【GUI软件】小红书搜索结果批量采集&#xff0c;支持多个关键词同时抓取&#xff01; 【GUI软件】小红书详情数据批量采集&#xff0c;含笔记内容、转评赞藏等&#xff0c;支…

用大于meilisearch-java-0.7.0.jar的报错的解决

Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重量级&#xff0c;适合大数据量。 MeiliSearch 设计目标针对数据在 500GB 左右的搜索需求&#xff0c;极快&#xff0c;单文件&#xff0c;超轻量。 所以&#xff0c;对于中小型项目来说…

数组元素翻倍C++

编写一个 C 程序&#xff0c;实现一个功能&#xff0c;即将数组中的每个元素值翻倍。程序应定义一个函数 doubleArray&#xff0c;该函数接收一个整数数组的指针和数组的大小&#xff0c;然后将数组中的每个元素都翻倍。 代码 #include <iostream>void doubleArray(int…

Rust使用HashSet对Vec类型的元素进行去重

在Rust语言中&#xff0c;对Vec类型的元素进行去重&#xff0c;一种常见的方法是使用一个HashSet来帮助我们快速检查元素是否已经存在。以下是使用HashSet对Vec进行去重的示例代码&#xff1a; use std::collections::HashSet;fn main() {let vec_numbers vec![1, 2, 2, 3, 4…

Softing工业推出的edgeConnector将Allen-Bradley控制器集成到工业边缘应用中

2024年4月17日&#xff08;哈尔&#xff09;&#xff0c;Softing宣布扩展其基于Docker的edgeConnector产品系列&#xff0c;推出了新软件模块edgeConnector Allen Bradley PLC&#xff0c;可方便用户访问来自ControlLogix和CompactLogix控制器数据。 &#xff08;edgeConnector…

i春秋-Test

题目 解题 参考WP https://blog.csdn.net/qq_40654505/article/details/107142533/目录扫描 复现wp payload为&#xff1a; search.php?searchtype5&tid&areaeval($_POST[cmd])使用蚁剑连接 http://eci-2ze4iyhwj7xvb68bsb2t.cloudeci1.ichunqiu.com:80/search.ph…

TikTok机房ip好还是住宅ip好?

住宅ip比较好&#xff0c;机房数据中心IP高效、低价&#xff0c;所以使用的人多且用处复杂&#xff0c;这类ip极大可能存在滥用的黑历史&#xff0c;通过此类ip访问tiktok&#xff0c;被禁止的可能性更高&#xff0c;更容易被拉入黑名单。所以我们推荐tiktok独享原生ip搭建节点…

AI写作推荐-写文ai-AI在线写作生成器-3步完成写作任务

AI写作利器&#xff1a;推荐几款神助攻文案创作工具 随着技术的进步&#xff0c;人工智能&#xff08;AI&#xff09;已达到高级水平&#xff0c;在众多领域展现其强大能力。 在文本创作的领域&#xff0c;人工智能&#xff08;AI&#xff09;应用已显著地提升了写作效率和创意…

java--io流(二)

一、打印流&#xff08;PrintStream[字节]、PrintWriter[字符]&#xff09; &#xff08;基本上可以代替前面所学的字节、字符输出流&#xff09;&#xff0c;二者关于打印数据功能相同&#xff08;都方便且高效&#xff09;&#xff0c;但是关于数据写出不同&#xff0c;前者…

上位机图像处理和嵌入式模块部署(树莓派4b和qt应用全屏占有)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们都知道&#xff0c;嵌入式应用一般都是为了某一个特定应用而存在的。也就是说&#xff0c;和pc不同&#xff0c;这个嵌入式板子一般都是为了解…

图像ISP——AGC参数解析

前言 AWB和AGC是两种常见的自动调整功能。AWB用于自动调整图像的白平衡&#xff0c;以确保颜色在不同光照条件下仍然看起来自然。而AGC则用于自动调整图像的增益&#xff0c;以在不同的亮度条件下保持适当的曝光。 代码例程 static AWB_AGC_TABLE_S g_stAwbAgcTable {/* bvali…

Android解放双手的利器之ViewBinding

文章目录 1. 背景2. ViewBinding是什么3. 开启ViewBinding功能4. 生成绑定类5. 使用ViewBinding5.1Activity 中使用5.2 Fragment 中使用5.3 ViewHolder 中使用 6. ViewBinding的优点7. 与 dataBinding 对比 1. 背景 写代码最繁琐的是什么&#xff1f;重复的机械操作。我们刚接…