跟着pink老师前端入门教程-day05

七、CSS的引入方式

根据CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类

1. 行内样式表(行内式)

内部样式表(内嵌样式表)是写到HTML页面内部,将所有的CSS代码抽取出来,单独放到一个<style>标签中

    <style>/* style标签理论上可以放在HTML文档的任何地方,但一般放在文档的<head>标签中*/div {color: antiquewhite;}</style>

2. 内部样式表(嵌入式)

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式,适合修改简单样式,使用行内样式表设定 CSS,通常也被称为行内式引入

<p style="color: aqua;">哈哈哈</p>

style 其实就是标签的属性,在双引号中间,写法要符合 CSS 规范 ,可以控制当前的标签设置样式。只有对当前元素添加简单样式的时候,可以考虑使用

3. 外部样式表(链接式)

实际开发都是外部样式表,适用于样式较多的情况,核心是:样式单独写到CSS文件,之后把CSS文件引入到HTML页面中使用

使用外部样式表设定CSS,通常也被称为外链式链接式引入,这种方式是开发中最常用的方式

引入外部样式表分为两步:

1. 新建一个后缀名为CSS的样式文件,把所有CSS代码都放入此文件中

2.在HTML页面中,使用<link>标签引入这个文件

<link rel="stylesheet" href="css文件路径">

总结

八、Emmet语法

Emmet语法的前身是Zen coding,他使用缩写来提高html/css的编写速度,Vscode内部已经集成

1. 快速生成HTML结构语法

1.生成标签 直接输入标签名 按tab健即可 比如 div 然后tab键,就可以生成 <div></div>

2.如果想要生成多个相同标签 加上*就可以了比如 div*3 就可以快速生成3个div

3.如果有父子级关系的标签,可以用>。比如ul>li就可以了

4.如果有兄弟关系的标签,用 +就可以了 比如 div+p

5.如果生成带有类名或者id名字的,直接写demo 或者#two tab 键就可以了

6.如果生成的div类名是有顺序的,可以用自增符号$

7. 如果想要在生成的标签内部写内容可以用{ }表示

2. 快速生成CSS样式语法

1.比如w200 按tab 可以生成 width: 200px;

2.比如lh26 按tab 可以生成 line-height:26px;

九、CSS的复合选择器

在CSS中,可以根据选择器的类型把选择器分为基础选择器复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

复合选择器由两个或多个基础选择器通过不同的方式组合而成的。其中包括后代选择器、子代选择器、并集选择器、伪类选择器

1. 后代选择器(重要)

后代选择器又称为包含选择器,可以选择父元素里面子元素

写法:外层标签写在前面,内层标签写在后面,中间用空格分隔

语法:元素1 元素2

当标签发生嵌套时,内层标签就成为外层标签的后代。

<head><style>/*语法:元素1 元素2 { 样式声明 }*//* 述语法表示选择元素 1 里面的所有元素 2 (后代元素)。 */ol li {color: antiquewhite;}</style>
</head>
<body><ol><li>后代选择器</li><li>后代选择器</li><li>后代选择器</li></ol>
</body>

 注意:

元素1和元素2中间用空格隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2可以使儿子、孙子,只要是元素1的后代即可

元素1和元素2可以是任意基础选择器

2. 子代选择器(重要)

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,就是选亲儿子元素

语法:元素1>元素2

注意:

元素1和元素2中间用大于号隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2必须是亲儿子

3. 并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明

并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分

语法:元素1,元素2{样式声明}

注意:

元素1和元素2中间用逗号隔开,逗号可以理解为的意思

4. 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,书写最大的特点是用冒号(:)表示

1. 链接伪类选择器(记忆法:love hate 或者 lv 包包 hao)

为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
a:link选择所有未被访问过的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接(鼠标按下未弹起的链接)

因为a链接在浏览器中具有默认样式,所以实际工作中都需要给链接单独指定样式

    <style>/* a:link 未访问的链接 */a:link {color: blue;}/* a:visited 已经点击过/访问过 */a:visited {color: orange;}/* a:hover 鼠标经过 */a:hover {color: skyblue;}/* a:active 鼠标点击不松开 */a:active {color: green;}</style><body><a href="#">百度</a></body>
<style>  /* 链接伪类选择器实际工作开发中的写法 *//* a 是标签选择器 所有的链接 */ a { color: gray;}/* :hover 是链接伪类选择器 鼠标经过 */a:hover { color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */}
</style>  

2. :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标,一般情况下<input>类表单元素才能获取,因此这个选择器主要针对表单元素

总结

十、CSS 的元素显示模式

10.1 什么是元素显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解其特性可以更好地布局我们的网页

元素显示模式:元素(标签)以什么方式进行显示

HTML元素一般分为块元素和行内元素两种类型

10.2 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素

特点:

独占一行

② 高度、宽度、外边距以及内边距都可以控制

③ 宽度默认是容器(父级宽度)的100%

④ 是一个容器及盒子,里面可以放行内或者块级元素

注意:

① 文字类的元素内不能使用块级元素

② <p>,<h1>~h6<>标签主要用于文件类块级元素,因此<p>里面不能放块级元素,特别是不能放<div>

10.3 行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是典型的行内元素。有的地方也将行内元素称为内联元素

特点:

① 相邻行内元素在一行上可以显示多个

② 高宽直接设置是无效的

③ 默认宽度就是他本身内容的宽度

④ 行内元素只能容纳文本或其他行内元素

注意:

链接里面不能再放链接

特殊情况链接<a>里面可以放块级元素,但给<a>转换一下块级模式最安全

10.4 行内块元素

在行内元素中有几个特殊的标签—<img />、<input />、<td>,他们同时具有块元素和行内元素的特点,有些资料称他们为行内块元素

特点:

① 和相邻行内元素(行内块)在一行上,但他们之间会有空白缝隙,一行可以显示多个(行内元素特点)

② 默认宽度就是他本身内容的宽度(行内元素特点)

③ 高度、行高、外边距以及内边距都可以控制(块级元素特点)

总结

10.5 元素显示模式转换

(重点)转换为块元素:display:block;

转换为行内元素:display:inline;

(重点)转换为行内块:display: inline-block;

10.6 单行文字垂直居中代码

解决方法:让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中

height = line-height

原理:

简单理解: 行高的上空隙和下空隙把文字挤到中间了. 是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下
建议再看一次pink老师的视频理解行高
22-单行文字垂直居中的原理_哔哩哔哩_bilibili

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

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

相关文章

【Proteus仿真】【Arduino单片机】智能助眠机系统设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用蜂鸣器闹铃模块、LCD1602显示模块、心率血氧模块、ADC模块、按键模块等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示传感器采…

HackTheBox - Medium - Linux - Mentor

Mentor Mentor 是一台中等难度的 Linux 机器&#xff0c;其路径包括在到达 root 之前在四个不同的用户之间切换。使用可暴力破解的社区字符串扫描“SNMP”服务后&#xff0c;会发现用于“API”端点的明文凭据&#xff0c;该端点被证明容易受到盲目远程代码执行的影响&#xff…

2. 分享三篇早期的FPGA 布局布线论文

1. PathFinder:一种基于协商和性能驱动的FPGA布线器 Larry MCMURCHIE, Carl EBELING. PathFinder: A Negotiation-Based Performance-Driven Router for FPGAs, February 1996[J/OL]. February 1996 针对FPGA布线中存在的布线性能与可布通性之间的矛盾&#xff0c;该文提出了…

JAVA代码学习(中)

2023年将会持续于B站、CSDN等各大平台更新&#xff0c;可加入粉丝群与博主交流:838681355&#xff0c;为了老板大G共同努力。 【商务合作请私信或进群联系群主】 四、继承、多态 继承机制的使用可以复用一些定义好的类&#xff0c;减少重复代码的编写。多态机制可以动态调整对…

2024年1月18日Arxiv最热NLP大模型论文:Large Language Models Are Neurosymbolic Reasoners

大语言模型化身符号逻辑大师&#xff0c;AAAI 2024见证文本游戏新纪元 引言&#xff1a;文本游戏中的符号推理挑战 在人工智能的众多应用场景中&#xff0c;符号推理能力的重要性不言而喻。符号推理涉及对符号和逻辑规则的理解与应用&#xff0c;这对于处理现实世界中的符号性…

如何实现无公网ip远程访问内网本地BUG管理服务【内网穿透】

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…

精通Discord营销:多账号注册与管理,高效打造矩阵

Discord虽然是一个海外小众平台&#xff0c;但在Z世代群体来说却非常受欢迎。通常在游戏行业、年轻化的电商特定品类、软件等业务中&#xff0c;Discord的社群营销可以起到非常卓越的效果。但是&#xff0c;您必须学会管理不同的帐户&#xff0c;以构成矩阵打造社区&#xff0c…

更适合3D项目的UI、事件交互!纯国产数字孪生引擎持续升级中!!!

UI和事件交互是3D可视化项目中最常见的模块&#xff0c;主要用于信息添加、展示&#xff0c;用来确保按照用户需求呈现内容并完成交互。 平时工作在进行UI和交互设计时&#xff0c;经常出现以下问题&#xff1a;UI过于复杂导致3D项目内交互效率低下&#xff0c;或者是结合3D项目…

简单了解【多智能体强化学习(MARL)】

我们的现实生活中有着许多多智能体共同决策的场景&#xff0c;比如多机械臂协同&#xff0c;多个无人机或多个机器人完成某共同目标。下面介绍单智能体强化学习的进化&#xff0c;多智能体强化学习。 含义 多智能体系统中包含 m 个智能体&#xff0c;智能体共享环境&#xff…

【vsan数据恢复】vsan逻辑架构出现故障的数据恢复案例

VSAN数据恢复环境&#xff1a; 一套有三台服务器节点的VSAN超融合基础架构&#xff0c;每台服务器节点上配置2块SSD硬盘和4块机械硬盘。 每个服务器节点上配置有两个磁盘组&#xff0c;每个磁盘组使用1个SSD硬盘作为缓存盘&#xff0c;2个机械硬盘作为容量盘。三台服务器节点上…

c/c++的指针函数与函数指针

函数 定义&#xff1a; 函数是数学中的一个概念&#xff0c;它是定义在某个数集上的一个特殊的映射关系。函数将输入值&#xff08;或自变量&#xff09;映射到输出值&#xff08;或因变量&#xff09;。函数的输入和输出可以是任何类型的数据&#xff0c;如数字、字符串、数组…

ArcGIS Pro 如何新建布局

你是否已经习惯了在ArcGIS中数据视图和布局视图之间来回切换&#xff0c;到了ArcGIS Pro中却找不到二者之间切换的按钮&#xff0c;即使新建布局后却发现地图怎么却是一片空白。 这一切的一切都是因为ArcGIS Pro的功能框架完全不同&#xff0c;这里为大家介绍一下在ArcGIS Pro…

java中比好用的工具

分享java中比较好用的工具 Objects工具类1.toString 未完待续 这里介绍的版本主要是jdk8&#xff0c;工作中遇到的比较好用的&#xff0c;在此记录分享。后续会更新 Objects工具类 1.toString 介绍 主要解决一些判断是否null值&#xff0c;来做值的判断区分&#xff0c;比如常…

前端react入门day04-useEffect与Hook函数

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 useEffect 的使用 useEffect 的概念理解 useEffect 依赖项参数说明 useEffect — 清除副作用 自定义Ho…

【Python 千题 —— 基础篇】元组的不可修改性

题目描述 题目描述 元组具有不可修改性。现在有一个元组 (1, 2, 3, 5, 6),请尝试将该元组的第一个元素值修改为 0,然后使用 try-except 代码块执行修改该元组元素值的代码部分,如果产生 TypeError,则输出“The tuple cannot be modified”;否则,则输出修改后的元组。 …

CTF - Web 干货

目录 1、php反序列化之pop链构造 2、常见php伪协议的使用 &#xff08;1&#xff09;php://filter &#xff08;2&#xff09;php://input 3、文件上传常规操作 (1) 前端绕过 (2) 修改文件类型 (3) 配合.user.ini 或.htaccess解析 (4) 爆破可解析后缀 (5) 针对Windows…

Baichuan2百川模型部署的bug汇总

1.4bit的量化版本最好不要在Windows系统中运行&#xff0c;大概原因报错原因是bitsandbytes不支持window&#xff0c;bitsandbytes-windows目前仅支持8bit量化。 2. 报错原因是机器没有足够的内存和显存&#xff0c;offload_folder设置一个文件夹来保存那些离线加载到硬盘的权…

【DC-DC】APS54085降压恒流 高辉度调光降压恒流芯片

产品描述 APS54085 是一款 PWM 工作模式,高效率、 外围简单、内置功率 MOS 管&#xff0c;适用于 5-100V 输入的高精度降压 LED 恒流驱动芯片。最大电流 2.0A。 APS54085 可实现线性调光和 PWM 调光&#xff0c; 线性调光有效电压范围 0.52-2.55V. PWM 调光频率范围 100…

Git的rebase命令说明

Git的rebase命令是一个非常强大的工具&#xff0c;用于修改提交历史。它的主要目的是将一系列的提交从一个分支转移到另一个分支&#xff0c;通常用于保持一个清洁和线性的提交历史。以下是关于rebase的更详细的解释&#xff1a; 基本概念 变基的目的&#xff1a;rebase的主要…

React Native实现QQ等级皇冠太阳星星的展示-代码示例

代码 function LevelGetImages(level: number) {let res []const marks [{ mod: 20, image: Images.setting.level_king },{ mod: 15, image: Images.setting.level_queen },{ mod: 10, image: Images.setting.level_moon },{ mod: 5, image: Images.setting.level_star },…