前端笔记-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.hqwc.cn/news/689973.html

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

相关文章

IM 是什么？

IM 是什么？

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

BUU-[极客大挑战 2019]Http

考察点 信息收集 http构造请求数据包 题目 解题步骤 参考文章&#xff1a;https://zhuanlan.zhihu.com/p/367051798 查看源代码 发现有一个a标签&#xff0c;但是οnclick"return false"就是点击后不会去跳转到Secret.php的页面 所以我就自己拼接url http://no…
阅读更多...
conan2 基础入门(01)-介绍

conan2 基础入门(01)-介绍

conan2 基础入门(01)-介绍 文章目录 conan2 基础入门(01)-介绍⭐什么是conan官网Why use Conan? ⭐使用现状版本情况个人知名开源企业 ⭐ConanCenter包中心github ⭐说明文档END ⭐什么是conan 官网 官网&#xff1a;Conan 2.0: C and C Open Source Package Manager 一句话来…
阅读更多...
【TS】入门

【TS】入门

创建项目 vscode自动编译ts 生成配置文件 tsc --init 然后发现终端也改变了&#xff1a;
阅读更多...
IDEA创建springboot项目时不能选择java 8或者java 11等等版本的问题，解决方案

IDEA创建springboot项目时不能选择java 8或者java 11等等版本的问题，解决方案

文章目录 1. Project JDK 和 Java 的区别2. 没有 java 8 或 java 11 等版本2.1 方案一2.2 方案二2.3 方案三 1. Project JDK 和 Java 的区别 我们在利用 idea 创建 spring boot 项目时&#xff0c;会有以上两个选项&#xff0c;这两个选项有什么区别&#xff1f; 答&#xff…
阅读更多...
vivado Kintex-7 配置存储器器件

vivado Kintex-7 配置存储器器件

Kintex-7 配置存储器器件 下表所示闪存器件支持通过 Vivado 软件对 Kintex -7 器件执行擦除、空白检查、编程和验证等配置操作。 本附录中的表格所列赛灵思系列非易失性存储器将不断保持更新 &#xff0c; 并支持通过 Vivado 软件对其中所列非易失性存储器 进行擦除、…
阅读更多...
基于Matplotlib的模型性能可视化工作

基于Matplotlib的模型性能可视化工作

一、项目简介 本项目是科技考古墓葬识别工作的中间过程&#xff0c;因为需要大量复用所以另起一章好了。 主要涉及到数据读取、数据可视化和少量的数据处理过程。 二、相关知识 PandasMatplotlib 三、实验过程 1. 数据探索性分析 1.1 准备工作–导入模块 import pandas…
阅读更多...
工业机器人应用实践之玻璃涂胶（篇三）

工业机器人应用实践之玻璃涂胶（篇三）

工业机器人 接上篇文章&#xff0c;浅谈一下实践应用&#xff0c;具体以玻璃涂胶为例&#xff1a; 了解工业机器人在玻璃涂胶领域的应用 认识工具坐标系的标定方法 掌握计时指令的应用 掌握人机交互指令的应用 掌握等待类指令用法&#xff08;WaitDI、WaitUnitl 等&#xff0…
阅读更多...
微信投票源码系统至尊版 吸粉变现功能二合一

微信投票源码系统至尊版 吸粉变现功能二合一

源码简介 微信投票系统在营销和社交互动中发挥着多方面的作用&#xff0c;它能够提升用户的参与度和品牌曝光度&#xff0c;还是一种有效的数据收集、营销推广和民主决策工具。 分享一款微信投票源码系统至尊版&#xff0c;集吸粉变现功能二合一&#xff0c;全网独家支持礼物…
阅读更多...
vue3专栏项目 -- 三、使用vue-router 和 vuex（下）

vue3专栏项目 -- 三、使用vue-router 和 vuex（下）

一、添加columnDetail 页面 首页有专栏列表&#xff08;ColumnList组件&#xff09;&#xff0c;专栏列表中有很多专栏&#xff0c;然后点击某个专栏就进入专栏详情页&#xff08;ColumnDetail组件&#xff09;&#xff0c;专栏详情页中有很多文章&#xff0c;点击某个文章就进…
阅读更多...
好玩粘土特效软件分享！3个很火的软件！

好玩粘土特效软件分享！3个很火的软件！

在数字艺术日益发展的今天&#xff0c;粘土特效软件以其独特的魅力和强大的功能&#xff0c;成为众多创意人士和艺术家的得力助手。这些软件不仅能够帮助用户轻松实现粘土动画效果&#xff0c;还能为作品增添生动的质感和细节&#xff0c;让创意无限延伸。那么&#xff0c;究竟…
阅读更多...
Android ashmem 原理分析

Android ashmem 原理分析

源码基于&#xff1a;Andoird U Kernel-5.10 0. 简介 ashmem 称为匿名共享内存(Anonymous Shared Memory)&#xff0c;它以驱动程序的形式实现在内核空间中。它有两个特点&#xff1a; 能否辅助内存管理系统来有效地管理不再使用的内存块(pin / unpin)&#xff1b; 通过Bind…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023