1.️️前言~

Hello, Hello~ 亲爱的朋友们,这里是E绵绵呀️️。

如果你喜欢这篇文章,请别吝啬你的点赞️️和收藏。如果你对我的内容感兴趣,记得关注我以便不错过每一篇精彩。

当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正️️。让我们共同努力,一起进步!

加油,一起CHIN UP!

个人主页:E绵绵的博客
所属专栏:

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练,巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我,提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点,提升数据库管理能力

6.html5知识点专栏

        学习前端知识,更好的运用它

7. css3知识点专栏

        在学习html5的基础上更加熟练运用前端

持续更新中,敬请期待️️

2.Emmet语法

它是前端开发者提高编码效率的强大工具。通过掌握其简洁的缩写语法,你可以更快速地编写HTML和CSS代码,专注于项目的核心逻辑和设计 

虽然它并不是每个编译器或开发环境都内置支持的,但它在许多现代的代码编辑器和集成开发环境(IDE)中都能找到。比如vscode,sublime text;

创建基本HTML结构:

提醒一下,如果直接.demo或者#two默认是 div标签。

使用自增符号 $ 的示例 :

 使用{}的示例:

 以上都是html结构标签快速生成,下面是css的快速生成

CSS 基本采取简写形式即可:
1.比如w200 按tab 可以生成 width: 200px;

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

总之该快捷生成都输入首字母。

3.复合选择器 

 后代选择器

后代选择器用空格分隔,选择某个元素内的所有后代元素。

注意后代选择器不只是可以有两个基础选择器,还可以有多个基础选择器,如div p span

子元素选择器 

子元素选择器是 CSS 中的一种选择器,用于选择某个元素的直接子元素。子选择器使用 > 符号来连接父元素和子元素。

 并集选择器

并集选择器用于将多个选择器组合在一起,以便对它们应用相同的样式规则。这种方法可以减少代码冗余,提高CSS的可维护性和效率。

 

任何形式的选择器都可以作为并集选择器的一部分,包含其他复合选择器和简单选择器。

伪类选择器

伪类链接选择器 

常用的链接伪类选择器

  1. :link
  2. :visited
  3. :hover
  4. :active

 

 

 

 为了确保生效,请按照LVHA的循顺序声明:link-:visited-:hover-:active

 一般我们日常用的多的是 hover选择器,所以一般工作中多是用这种代码:

 伪类focus选择器

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

input:focus{
background-color:yellow;
}

 当鼠标选中该表单,该表单背景颜色会变为黄色。

 4.元素显示模式

网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页,这时候就要用到元素显示模式。
元素显示模式就是元素(标签)以什么方式进行显示,分为三种:块元素,行内元素,行内块元素。

块元素 

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


块级元素的特点:
比较霸道,自己独占一行。
高度,宽度、外边距以及内边距都可以控制。
是一个容器及盒子,里面可以放行内元素或者块级元素


注意:
文字类的元素内不能使用块级元素

如<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>

同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素 

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。

行内元素的特点:


相邻行内元素在一行上,一行可以显示多个。
高、宽直接设置是无效的,
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意:
链接里面不能再放链接
有个特殊情况 链接<a>里面可以放块级元素如图片,但是给 <a>转换一下块级模式最安全

行内块元素 

在行内元素中有几个特殊的标签,<img />、<input />、<td>,它们同时具有块元素和行内元素的特点。我们称它们为行内块元素。

行内块元素的特点:  

可以和相邻行内元素或行内块元素在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)。
高度,行高、外边距以及内边距都可以控制(块级元素特点)。

元素显示模式的转换 

特殊情况下,我们需要元素模式的转换,简单理解: 一个模式的元素需要另外一种模式的特性比如想要增加链接 <a>的触发范围。 

转换为块元素:display:block

转换为行内元素:display:inline

转换为行内块元素:display :inline-block

 

5.单行文字在块元素中垂直居中的原理

要让单行文字在块元素中垂直居中,我们只要将文字行高等于块元素的高度。


行高的上空隙和下空隙把文字挤到中问了,是如果行高小于盒子髙度,文字会偏上,如果行高大于盒子高度,则文字偏下。

6.背景 

背景颜色 

设置元素的背景颜色,可以使用颜色名称、十六进制、RGB、RGBA、HSL 等颜色值。

在这里我们还要讲个背景颜色半透明设置:

颜色设置中的rgba() 允许你为颜色添加透明度(alpha 通道,第四个参数),透明度值范围从 0(完全透明)到 1(完全不透明)。

背景图片 

background-image属性描述了元素的背景图像。实际开发常见于logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)

.element {
    background-image: url('images/background.jpg');
}

其中地址可以是相对地址也可以是绝对地址。

背景图片平铺 

 如果需要在HTML 页面上对背景图像进行平铺,可以使用 background-repeat 属性。

背景图片位置 

当参数是方位名词。

方位名词关键字

  • 水平关键字: left, center, right
  • 垂直关键字: top, center, bottom

如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和 top left 效果一致

如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

当参数是精确单位,精确单位一般指的是百分比或者px
如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标

如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中

其中精确单位都是从左到右,从上到下。

/* 背景图像位于元素的 25% 水平位置和 75% 垂直位置 */
.element {
    background-position: 25% 75%;
}
/* 背景图像距离左边缘 50px,距离上边缘 100px */
.element {
    background-position: 50px 100px;
}

如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值是y坐标 

背景图片固定 

background-attachment 属性用于指定背景图像是否随着页面内容的滚动而滚动。其常用值包括:

  • scroll(默认):背景图像会随着内容滚动。
  • fixed:背景图像固定在视口,不随内容滚动。

要实现固定背景图片,关键在于将 background-attachment 设置为 fixed

背景属性复合写法 

为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background中。

从而节约代码量当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:

background:背景颜色, 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部