前端学习(三)之CSS

一、什么是CSS

html定义网页的结构和信息(骨架血肉)
css定义网页的样式(衣服)
js定义用户和网页的交互逻辑(动作)

通过CSS,可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式,

从而实现更精美的页面设计。

二、CSS语法

选择器{

属性1:属性值1;

属性2:属性值2;

}

注意:这里声明的所有属性和值都以键值对的形式出现(用:而不是=)

三、三种导入方式

1、内联样式:利用元素标签中的style属性

2、内部样式表:在head中定义

3、外部样式表:单独放进一个CSS文件中,在head中链接这个文件

(好处:能在多个页面中重复使用相同的样式)

优先级:内联样式>内部样式表>外部样式表

注意:优先级高的会覆盖掉优先级低的样式

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS学习</title><link rel="stylesheet" href="./css/style.css"><style>/* p标签选择器 */p{ color: blue;font-style: 16px;}/* h2标签选择器 */h2{color: green;}</style></head><body><h1 style="color:red">这是一个一级标题标签,使用内联样式</h1><h2>这是一个二级标题,使用内部样式</h2><h3>这是一个三级标题,使用外部样式</h3>
</body></html>

使用外部样式时:

1、先创建css文件

2、然后将链接添加到HTML文档的head中(link->href填写文件的相对路径即可)

四、选择器

 选择器的类型:

1、元素选择器:选择特定的元素标签

2、类选择器

3、ID选择器

4、通用选择器:表示对所有的元素进行一个选择

5、子元素选择器:选择直接位于父元素内部的子元素(嵌套)

6、后代选择器(包含选择器)

  注意:子代属于后代

优先级:id>类名>标签名

7、并集选择器(兄弟选择器):选择相邻的下一个标签

8、伪类选择器:选择元素的特定状态或位置,不仅仅是元素本身的属性

("伪类"的概念源自于它们不是真正的类(class),而是在选择器中表现得像类一样的特殊标记或状态)

可用于用户交互:比如鼠标悬停在一个元素上,是悬停状态

9、伪元素选择器:创建一个虚拟元素并且样式化他们,而不选择实际存在的元素

(伪元素选择器选择的是元素的虚拟部分或特定位置的内容,这些内容在HTML源码中不存在,是CSS创建的)

选择器类型使用格式
元素选择器元素标签{ }
类选择器.类名{ }
ID选择器#ID名{ }
通用选择器*{ }
子元素选择器父 > 子{ }
后代选择器祖 空格 后代{ }
兄弟选择器eg: h3 + p{ } 选择相邻的下一个p标签
伪类选择器标签名、类名或ID名 :选择条件 { } eg: #element:hover{}
伪元素选择器标签名、类名或ID名 ::选择条件 { }
css常见属性含义

background-color

字体背景颜色
font字体的复合属性

font-size

字体大小

font-weight

字体粗细

font-family

字体(楷体:'kaiti' )
line-height行高
   <!-- font复合属性 --><h1 style="font:bolder 50px 'kaiti'">这是一个font复合属性示例</h1><!-- 调整行高 --><p style="line-height:40px">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 学习2</title><style>/* 元素选择器 */h2{color:aqua;}/* 类选择器:.类名 */.highlight{background-color: yellow;}/* ID选择器:#ID值 */#header{font-size: 35px;}/* 通用选择器:* */*{font-family: 'kaiti';font-weight: bolder; /* front-weight: 字体宽度 */}/* 子元素选择器:用元素名、类名、id名(id名>类名>标签名)都可以,只要能选择到要选的元素 *//* 将p换成.son就能发挥作用*/.father > .son{color:yellowgreen;}/* 后代选择器 */.father p{color:brown;front-size:larger;}/* 相邻元素选择器 */h3 + p{background-color: red;}/* 伪类选择器 */#element:hover{background-color: blueviolet;}/* 选中父元素中的第一个子元素: first-child第n个子元素: nth-child(n)链接状态: active *//* 伪元素选择器 ::after ::before表示在选中元素的之前或之后插入虚拟内容*/</style>
</head><body><h1>不同类型的CSS选择器</h1><h2>这是一个元素选择器示例</h2><!-- h3.类名,按Tab键,立即生成h3标签结构 --><h3 class="highlight"> 这是一个类选择器示例</h3><!-- 同理,h4#id值,不写h4则默认是div--><h4 id="header">这是一个ID选择器示例</h4><div class="father"><p class="son">这是一个子元素选择器示例</p><div><p class="grandson"> <!-- 这里son和grandson算一个叔侄关系 -->这是一个后代选择器示例</p></div></div><p>这是一个普通的p标签</p><h3>这是一个相邻兄弟选择器示例</h3><p>这是另一个p标签</p><h3 id="element">这是一个伪类选择器示例</h3></body></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>.block{background-color: aqua;width:200px;height:100px;}.inline{background-color: red;}.inline-block{width:100px; }.span-inline-block{display:inline-block;background-color: blueviolet;width: 300px;height: 100px;}</style></head><body><!-- 块级元素和行内块元素可以调整宽高,行内块元素仅设置宽度则按比例压缩 --><!-- 一行可以有多个行内块元素,但不能有多个块级元素(独占一行) --><!-- 行内元素的宽度和高度由所包含的内容决定 --><!-- 块级元素 --><div class="block">这是一个块级元素</div><!-- 行内元素 --><span class="inline">这是一个行内元素</span><!-- 行内块元素 --><img src="你的名字.jpg" alt="" class="inline-block"><br><!-- display可以把块元素、行内元素转换成行内块元素 --><div style="display:inline;background-color: blue;">这是一个转换成行内元素的div标签</div><span class="span-inline-block">这是一个转换成行内块元素的span标签</span></body></html>

六、盒子模型

盒子模型是CSS中一种常用于布局的基本概念 ,描述了文档中的每个元素都可以被看成是一个矩形的盒子,其中包含了内容(content)、内边距(padding)、文本边框(border)、外边距(margin)。

盒子模型相关属性: 

属性名说明
内容盒子包含的实际内容(文本、图片等)
内边距(padding 复合属性)内容与盒子边界之间的空间
边框(border 复合属性)盒子的边界
外边距(margin 复合属性)盒子边界与其他元素之间的空间

 理解盒子模型,能更精确地控制元素在页面中的位置和大小

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>.demo{background-color:blueviolet;display:inline-block;border: 5px solid yellowgreen;padding: 50px;margin:40px;}.border-demo{background-color: yellow;width:300px;height:200px;border-style: solid dashed dotted double;  /* 边框样式 */border-width: 10px 5px;   /* 边框宽度:上右下左顺时针顺序,缺失的会自动寻找对应的值 */border-color:aquamarine;/* 只想给单一的一个边框设置样式时,也可以用复合属性: border-left:15px solid brown; *//*  left right top bottom */}  </style>
</head><body><div class="demo">B站搜索林丽丽</div><div class="border-demo">这是一个边框示例</div>
</body></html>

七、浮动

 本质上,都是摆盒子

自适应布局:网页可以在手机端和电脑端访问,适应不同的设备

浮动:可以改变元素的默认排列顺序(比如:让多个块级元素在同一行内排列显示),让网页布局更加灵活多变

        浮动的元素:相互贴靠在一起,没有缝隙

        行内块元素:彼此之间有缝隙,不如浮动方便

浮动是相对父元素进行浮动的,只会在父元素的内部进行移动;占满一行之后,再去占下一行

浮动的三大特性:
1、脱标:脱离标准流

2、一行显示,顶部对齐

3、具备行内块元素的特性,但没有缝隙

注意:

子元素浮动,会使父元素出现坍塌(“不规则”)

最常用的清除浮动的方式:

(1)给父元素添加overflow:hidden

overflow: 溢出内容处理

设置父元素的 overflow`属性为 auto 或 hidden 会创建一个新的块格式化上下文(Block Formatting Context)。

这样,浮动元素会被完全包裹在父元素的边界内,从而解决浮动引起的高度塌陷问题。

overflow: auto 会自动处理溢出的内容,而 overflow: hidden 会隐藏溢出的部分。

相当于在不同的图层了

(2)伪元素清除法

    .father::after{

            content:"";

            display:table;

            clear:both;

        }

<!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>.father{background-color: aquamarine;/* height: 150px; */border: 3px solid brown;/* overflow: hidden; */}/* 伪元素清除法 */.father::after{content:"";display:table;clear:both;}.left-son{width: 100px;height: 100px;background-color: yellowgreen;float: left;}.right-son{width: 100px;height: 100px;background-color: yellow;float: right;}</style>
</head><body><div class="father"><div class="left-son">左浮动</div><div class="left-son">左浮动</div><div class="left-son">左浮动</div><div class="left-son">左浮动</div><div class="left-son">左浮动</div><div class="left-son">左浮动</div><div class="left-son">左浮动</div><div class="right-son">右浮动</div><div class="right-son">右浮动</div><div class="right-son">右浮动</div><div class="right-son">右浮动</div><div class="right-son">右浮动</div><div class="right-son">右浮动</div></div><p>这是一段文本这是一段文本这是一段文本</p>
</body></html>

八、定位

浮动:灵活,但不易控制(不能精准定位)

定位:可以精准定位,但不够灵活

通常,相对定位用于微调元素的位置,而绝对定位和固定定位用于创建更复杂的布局

绝对定位和固定定位的元素都脱离了正常的文档流,悬浮在最上层的某一位置,故下一行的元素会自动顶上来

绝对定位:相对于元素最近的已经定位的父级元素进行定位,若没有已经定位的父级元素,则相对于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>.box1{height: 350px;background-color: aqua;}.box-normal{width: 100px;height: 100px;background-color: purple;}.box-relative{width: 100px;height: 100px;background-color: pink;position:relative;left:120px;top:40px;}.box2{height: 350px;background-color: yellow;/* margin-bottom: 300px; */}.box-absolute{width: 100px;height: 100px;background-color: yellowgreen;position:absolute;left:120px;}.box-fixed{height: 100px;width: 100px;background-color: brown;position:fixed;right:0;     /* 与右边间距为0 */top:300px;}</style>
</head><body><h1>相对定位</h1><div class="box1"><div class="box-normal"></div><div class="box-relative"></div><div class="box-normal"></div></div><h1>绝对定位</h1><div class="box2"><div class="box-normal"></div><div class="box-absolute"></div><div class="box-normal"></div></div><h1>固定定位</h1><div class="box-fixed"></div>
</body></html>

 

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

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

相关文章

pig4cloud启动流程

环境 SpringBoot版本&#xff1a;2.7.16 SpringSecurity版本&#xff1a;5.7.11 pig4cloud版本&#xff1a;3.7.1-JDK8 流程图 概述 pig4cloud是对SpringSecurity的实现&#xff0c;其工作原理脱离不了SpringSecurity&#xff1b;pig4cloud启动首先SecurityAutoConfigurati…

9.11和9.9哪个大?

没问题 文心一言 通义千问

Puromycin(嘌呤霉素)— pac基因筛选抗生素

Puromycin是由Streptomyces alboniger&#xff08;白黑链霉菌&#xff09;产生的一种氨基糖苷类抗生素&#xff0c;可抑制原核细胞和真核细胞的肽基转移。Puromycin可抑制革兰氏阳性菌、多种动物细胞和昆虫细胞的生长&#xff0c;但是真菌和革兰氏阴性菌对Puromycin具有抗性&am…

大屏系统类优质UI风格

大屏系统类优质UI风格

C 语言回调函数

回调函数的概念 您的理解是正确的。pFunCallBack 是一种函数指针类型&#xff0c;它定义了函数的签名&#xff08;即函数的参数类型和返回类型&#xff09;。当我们说 pFunCallBack pFun&#xff0c;我们是在声明一个变量 pFun&#xff0c;其类型是 pFunCallBack —— 即一个函…

推荐4款高清稳定的远程控制软件。

远程控制软件已经在我们生活中的很多场景里都排上了用场&#xff0c;它可以帮助我们灵活办公&#xff0c;教育学习&#xff0c;游戏娱乐&#xff0c;技术支持等。如果你刚好需要远程控制设备的话&#xff0c;可以看看这4款软件&#xff0c;连接稳定高清&#xff0c;操作简单。 …

Java中的Heap(堆)(如果想知道Java中有关堆的知识点,那么只看这一篇就足够了!)

前言&#xff1a;&#xff08;Heap&#xff09;是一种特殊的完全二叉树&#xff0c;它在诸多算法中有着广泛的应用&#xff0c;本文将详细介绍Java中的堆。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 先让我们看一下本文大…

生成式人工智能落地校园与课堂的15个场景

生成式人工智能正在重塑教育行业&#xff0c;为传统教学模式带来了革命性的变化。随着AI的不断演进&#xff0c;更多令人兴奋的应用场景将逐一显现&#xff0c;为学生提供更加丰富和多元的学习体验。 尽管AI在教学中的应用越来越广泛&#xff0c;但教师们也不必担心会被完全替代…

MySQL(事务、索引)MyBatis

目录 事务 概述 四大特性&#xff08;ACID&#xff09; 索引 结构 语法 MyBatis 数据库连接池 lombok 基本操作--增删改查 根据主键删除 新增 更新 查询&#xff08;根据ID查询&#xff09; 查询&#xff08;条件查询&#xff09; XML映射文件 动态SQL 动态条…

[图解]《分析模式》漫谈16-“我用的”不能变成“我的”

1 00:00:00,720 --> 00:00:02,160 今天&#xff0c;我们来说一下 2 00:00:02,170 --> 00:00:04,850 “我用的”不能变成“我的” 3 00:00:04,860 --> 00:00:11,390 《分析模式》的前言 4 00:00:12,260 --> 00:00:13,410 有这么一句话 5 00:00:14,840 --> 0…

Windows安装go语言开发环境

一、下载安装包 安装包下载地址 下载完毕后双击进行安装。 查看是否安装成功&#xff1a; go version #查看go版本 go env #查看go环境变量正常显示则安装完成。 二、安装vscode 一般开发go语言项目使用vscode工具&#xff1a; 下载地址 下载完毕后双击进行安装。 三…

【鸿蒙学习笔记】UI・常用组件・Button・按钮组件・ButtonType

官方文档&#xff1a;按钮 (Button) 目录标题 ButtonType ButtonType 胶囊类型&#xff08;Capsule&#xff09;・圆形按钮&#xff08;Circle&#xff09;・普通按钮&#xff08;Normal&#xff09;・自定义 Column({ space: 10 }) {Text(Normal).fontSize(20).fontColor(Col…

【人工智能 | 机器学习 | 理论篇】模型评估与选择

文章目录 1. 经验误差与过拟合2. 模型评估方法2.1 模型评估概念2.2 留出法2.3 k 折交叉验证法2.4 自助法2.5 调参与最终模型 3. 性能度量3.1 均方误差3.2 错误率、精度3.3 查准率、查全率3.3 扩展3.4 ROC 与 AUC3.5 代价敏感错误率与代价曲线 4. 比较检验4.1 假设检验4.2 交叉验…

matlab中plot的一些用法

文章目录 一、基本用法二、绘制多个数据集三、设置线型、颜色四、添加标题和标签五、添加图例六、设置轴范围七、绘制网格八、 在同一图中绘制多个子图九、绘制带误差条的图十、绘制半对数图和对数图十一、绘制填充区域图十二、综合案例 一、基本用法 x 0:0.1:10; y sin(x);…

技术成神之路:设计模式(八)责任链模式

介绍 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为设计模式&#xff0c;它允许多个对象依次处理请求&#xff0c;避免请求的发送者和接收者之间的显式耦合。该模式通过将多个可能处理请求的对象连接成一条链&#xff0c;并沿着这条链传递请求…

Cadence23导入板框时的疑难杂症

1.为啥导入板框之后元器件找不到了呢&#xff1f; 因为导入板框的时候没有勾选 增加量 &#xff0c;导致导入的板框新建了一个文件&#xff1a; 2.导入板框之后3D显示还是不没有导入呀&#xff1f; 那是因为导入的板框还带有铜皮属性&#xff0c;需要change命令把其换为板框…

【算法】算法模板

算法模板 文章目录 算法模板简介数组字符串列表数学树图动态规划 简介 博主在LeetCode网站中学习算法的过程中使用到并总结的算法模板&#xff0c;在算法方面算是刚过初学者阶段&#xff0c;竞赛分数仅2000。 为了节省读者的宝贵时间&#xff0c;部分基础的算法与模板未列出。…

51单片机13(动态数码管实验)

一、数码管动态显示原理 1、动态显示是利用减少段选线&#xff0c;分开位选线&#xff0c;利用位选线不同时选择通断&#xff0c;改变段选数据来实现的。 &#xff08;1&#xff09;多位数码管依然可以进行静态的一个显示&#xff0c;那么在前面我们介绍静态数码管的时候&…

Nginx(详解以及如何使用)

目录 1. 什么是Nginx&#xff1f; 2. 为什么使用nginx? 3. 安装nginx 3.1 安装nginx的依赖插件 3.2 下载nginx 3.3 创建一个目录作为nginx的安装路径 3.4 解压 3.5 进入解压后的目录 3.6 指定nginx的安装路径 3.7 编译和安装nginx 3.8 启动nginx 3.9 访问nginx 4. ngin…

【python】Python中闭包的是什么,闭包原理分析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…