这里是云端源想IT,帮你轻松学IT”
嗨~ 今天的你过得还好吗?
睡眠等同于希望
每次醒来都是一个新的开始
一个新的希望
- 2024.03.22 -
在Web开发的世界中,CSS(层叠样式表)是构建视觉吸引力和定义网页布局的不可或缺的工具。
掌握如何恰当地引入CSS样式以及理解它们的优先级规则,对于前端开发者来说至关重要。今天,我们就来深入探讨CSS的四种引入方式,以及选择器的优先级之谜,了解常用的CSS样式及使用方法!
CSS(层叠样式表)为网页提供了丰富的样式定义,允许开发者通过多种方式将样式应用到HTML文档中。以下是四种主要的CSS引入方式:
1.1 行内样式
这是最直接也最简单的方法,通过在HTML元素的style属性中直接编写CSS规则。
示例:
<p style="color: red; font-size: 20px;">这是一段红色的文字。</p>
这种方式的优点是简单快捷,但缺点是它使得HTML代码与样式混合,不够纯净,且不利于样式的复用和维护。
1.2 内嵌样式
在一个HTML文档中使用<style>标签将CSS规则嵌入到HTML的head部分。这种方式适用于定义特定于某一页面的样式。
示例:
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
1.3 外部样式
这是最常用的方法,它通过<link>标签将外部的CSS文件链接到HTML文档中。这种方法的优势在于可以在多个页面间共享同一个样式文件,有助于保持代码的整洁和一致性。
示例:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
其中,mystyle.css的内容可能如下:
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
1.4 导入样式
使用@import语句在CSS文件中导入另一个CSS文件。尽管这种方法可以分离样式表,但它通常不被推荐使用,因为其加载时序可能会影响页面渲染效率。
示例:
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: 'Roboto', sans-serif;
}
1.5 样式单优先级
作用域范围:外部样式表>内部样式表>行内样式表
优先级:
2.1 字体样式
normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”(倾斜与斜体非常相似,但支持较少)
font-weight 属性指定字体的粗细
示例:
<!DOCTYPE html>
<html>
<head>
<style>
.sp1{
color: darkorange;
font-size: 20px;
font-weight: bolder; /* bolder 字体是否加粗*/
font-style: italic; /* italic 字体是否倾斜*/
font-family: "宋体"; /* 设置字体样式*/
}
.sp2{
/* 简写 */
/* 顺序不能能变:style-weigth-size-family */
font:italic bolder 15px 宋体 ;
color:rgb(28, 235, 97);
}
</style>
<body>
<span>
编程学习,从云端源想开始!
</span><br>
<span>
让知识触手可及
</span>
<p>让知识触手可及</p>
</body>
</html>
2.2 文本样式
color: 字体颜色
text-align: center; - - 文本对齐方式
text-decoration:none; - - 文本的线
text-shadow: pink 5px 5px 2px; - - 文本的阴影 【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】
line-height: - - 行高 (文本在标签内所占的高度)
width:
height:
border: 1px #ffffff solid; - - 盒子边框【边框粗细-颜色-边框线样式】
示例:
<style>
.p{
color: rgb(0, 255, 21); /* 字体颜色 */
text-align: center; /* 文本对齐方式 */
text-decoration:none; /* 文本的线 */
text-shadow: pink 5px 5px 2px; /* 文本的阴影 【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】*/
line-height: 400px; /* 行高 (文本在标签内所占的高度)*/
width: 400px;
height: 300px;
border: 1px rgb(76, 14, 223) solid; /* 盒子边框【边框粗细-颜色-边框线样式】 */
}
</style>
</head>
<body>
<p>欢迎来到云端源想!</p>
<a href="https://www.baidu.com"></a>
</body>
2.3 背景样式
width: 500px;
height: 1200px;
background-color: pink; - - 背景颜色
background-image: url(…/img/background.jpg); - - 背景图片
background-repeat: no-repeat; - - 背景图片是否平铺
background-position: left top; - - 指定背景图片的位置
background-attachment: fixed; - - 背景图片是否随着标签滚动 【fixed-固定 scroll-滚动】
示例:
<style>
.d{
width: 500px;
height: 1200px;
background-color: pink; /* 背景颜色 */
background-image: url(../img/background.jpg); /* 背景图片 */
background-repeat: no-repeat; /* 背景图片是否平铺 */
background-position: left top; /* 指定背景图片的位置 */
background-attachment: fixed; /* 背景图片是否随着标签滚动 【fixed-固定 scroll-滚动】 */
}
</style>
</head>
<body>
<div>
</div>
2.4 列表样式
<!DOCTYPE html>
<html>
<head>
<style>
li{
background-color: lemonchiffon;
/*列表样式:常用取值:none-无样式 square-正方形 circle-空心圆 decimal-数字*/
list-style-type: circle;
/*列表样式为自定义图片*/
list-style-image: url(../img/2.jpg);
/*列表样式的放置位置*/
list-style-position: inside;
/*列表样式缩写*/
list-style: square url(../img/2.jpg) inside;
/*常用的列表样式*/
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
2.5 边框样式
<!DOCTYPE html>
<html>
<head>
<style>
.border{
/*边框宽度*/
border-width: 2px;
/*边框颜色*/
border-color: red;
/*边框样式:solid 实线 dotted 点线 dashed 虚线*/
border-style: dashed;
/*边框样式缩写:样式 颜色 宽度*/
border:solid green 5px;
/*边框可以为4个方向分别设置*/
border-top: dashed black 4px;
border-right: dashed #FF00FF 4px;
border-bottom: dotted darkblue 4px;
border-left: solid fuchsia 5px;
/*没有边框*/
border: none;
/*常用的细边框样式*/
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div class="border">这是一个带有边框的元素</div>
</body>
</html>
2.6 盒子模型
所有的html元素可以看做是盒子,在css中,"box model"是用来设计和布局时使用。
CSS盒子模型本质是一个盒子,封装周围的html元素,它包括:边框、边距、填充、实际内容。
盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。
想要快速入门前端开发吗?推荐一个前端开发基础课程,这个老师讲的特别好,零基础学习无压力,知识点结合代码,边学边练,可以免费试看试学,还有各种辅助工具和资料,非常适合新手!点这里前往学习哦!云端源想
示例:
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* border:边框,分4个方向,同理margin、padding也分为四个方向
* margin:元素与元素之间对的距离
* padding:内容与边框之间的距离
* 设置的时候顺序:上 右 下 左
*/
.div{
border: solid red 10px;
/*四个方向上的元素与元素之间的距离都是50px*/
margin: 50px;
/*两个值的时候:第一个参数表示上下距离都是50px,第二个参数表示左右距离都是100px*/
margin: 50px 100px;
padding: 50px;
/*
一个元素真正的宽度=width+左右padding值+左右的border值
一个元素的真正高度=height+上下的padding值+上下的border值
* */
}
</style>
</head>
<body>
<div>111111111112222222222223333333333333333</div>
</body>
1)盒子的宽高
元素的实际宽度和高度:
2)设置宽度=元素实际宽度,box-sizing属性。
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* box-sizing:确认元素的大小
content-box: 实际宽度=width+左右的psdding值+上下的border值
实际高度=height+上下的padding值+上下的border值
border-box:实际宽度=width;实际高度=height
padding和border不会影响元素的实际宽高
* */
.box{
width: 100px;
height: 200px;
border: 5px solid;
padding: 5px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div>你好中国</div>
</body>
CSS的世界博大精深,以上只是冰山一角,希望通过这些基础的常用样式可以帮助你快速进入CSS世界的大门。
掌握CSS的引入方式和选择器优先级是构建高效、可维护网站的关键。通过这些知识,你可以更好地管理和优化你的样式代码,创造出既美观又专业的网页设计。现在,准备好迈入CSS的世界,开启你的创意之旅吧!
我们下期再见!
END
文案编辑|云端学长
文案配图|云端学长
内容由:云端源想分享
TML提交按钮是一种HTML表单元素,允许用户将表单数据提交到服务器。提交按钮通常与表单元素(如文本框和下拉列表)一起使用,以便用户可以输入并提交信息。在HTML中,提交按钮通常使用标签来定义。
如何编写HTML提交按钮代码?
要创建HTML提交按钮,您需要使用标签,并将type属性设置为“submit”。例如,以下代码会创建一个名为“submit”的提交按钮:
```
```
在这个例子中,“action”属性指定了表单数据提交到的URL,“method”属性指定了提交表单的HTTP方法(通常是POST或GET)。按钮的“value”属性指定了按钮上显示的文本。
如何自定义HTML提交按钮样式?
默认情况下,HTML提交按钮的样式取决于用户的操作系统和浏览器。但是,您可以使用CSS样式表来自定义按钮的外观。例如,以下代码将创建一个红色的提交按钮:
```
```
在这个例子中,我们使用了style属性来设置按钮的背景颜色和文本颜色。您还可以使用其他CSS属性来自定义按钮的大小、边框等。
如何使用JavaScript处理HTML提交按钮?
您可以使用JavaScript来添加交互性和验证表单数据。例如,以下代码将在用户单击提交按钮时弹出一个提示框:
```
```
在这个例子中,我们使用了onsubmit属性来指定当表单提交时要运行的JavaScript函数。此函数返回true或false,如果返回false,则表单将不会提交。在这个例子中,我们使用confirm()函数显示一个提示框,并在用户单击“确定”时返回true。
总结
HTML提交按钮是Web表单中的重要元素,允许用户将表单数据提交到服务器。您可以使用标签来创建提交按钮,并使用CSS样式表自定义外观。您还可以使用JavaScript添加交互性和验证表单数据。通过掌握HTML提交按钮的知识,您可以创建复杂的Web表单,并收集和处理用户数据。
原文出处>>>
https://blog.csdn.net/u014158743/article/details/136240947
01-复合选择器
定义:由两个或多个基础选择器,通过不同的方式组合而成。
作用:更准确、更高效的选择目标元素(标签)。
后代选择器
后代选择器:选中某元素的后代元素。
选择器写法:父选择器 子选择器 { CSS 属性},父子选择器之间用空格隔开。
<style>
div span {
color: red;
}
</style>
<span> span 标签</span>
<div>
<span>这是 div 的儿子 span</span >
</div>
子代选择器
子代选择器:选中某元素的子代元素(最近的子级)。
选择器写法:父选择器 > 子选择器 { CSS 属性},父子选择器之间用 > 隔开。
<style>
div > span {
color: red;
}
</style>
<div>
<span>这是 div 里面的 span</span>
<p>
<span>这是 div 里面的 p 里面的 span</span>
</p>
</div>
并集选择器
并集选择器:选中多组标签设置相同的样式。
选择器写法:选择器1, 选择器2, …, 选择器N { CSS 属性},选择器之间用 , 隔开。
<style>
div,
p,
span {
color: red;
}
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>
交集选择器
交集选择器:选中同时满足多个条件的元素。
选择器写法:选择器1选择器2 { CSS 属性},选择器之间连写,没有任何符号。
<style>
p.box {
color: red;
}
</style>
<p class="box">p 标签,使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签,使用了类选择器 box</div>
注意:如果交集选择器中有标签选择器,标签选择器必须书写在最前面。
伪类选择器
伪类选择器:伪类表示元素状态,选中元素的某个状态设置样式。
鼠标悬停状态:选择器:hover { CSS 属性 }
<style>
a:hover {
color: red;
}
.box:hover {
color: green;
}
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>
超链接伪类
选择器作用:link选择尚未被访问的超链接。:visited选择已被访问过的超链接。:hover鼠标悬停在超链接上时应用的样式。:active超链接被点击时应用的样式,通常用于短暂的样式变化,以示被点击。:focus超链接获取焦点时应用的样式,通常用于键盘导航时给予用户视觉反馈。
提示:如果要给超链接设置以上四个状态,需要按 LVHA 的顺序书写。
经验:工作中,一个 a 标签选择器设置超链接的样式, hover状态特殊设置
a {
color: red;
}
a:hover {
color: green;
}
02-CSS特性
CSS特性:化简代码 / 定位问题,并解决问题
继承性
层叠性
优先级
继承性
继承性:子级默认继承父级的文字控制属性。
描述属性效果设置文字大小font-size控制文字的大小。设置文字样式font-style控制文字的样式,如斜体(italic)或正常(normal)。设置行高line-height控制行与行之间的距离,实现单行文字的垂直居中。设置字体族font-family指定用于显示文本的字体系列,可以是单个字体名称或一系列备选字体。设置文字对齐方式text-align控制文本在盒子中的水平对齐方式,如左对齐、右对齐、居中等。设置文本缩进text-indent控制段落的首行缩进。设置文本修饰线text-decoration添加文本的修饰线,如下划线、删除线等。设置文字颜色color控制文本的颜色。
层叠性
特点:
相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性
不同的属性会叠加:不同的 CSS 属性都生效
<style>
div {
color: red;
font-weight: 700;
}
div {
color: green;
font-size: 30px;
}
</style>
<div>div 标签</div>
注意:选择器类型相同则遵循层叠性,否则按选择器优先级判断。
尝试一下>>>
优先级
优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。
<style>
div {
color: red;
}
.box {
color: green;
}
</style>
<div class="box">div 标签</div>
基础选择器
规则:选择器优先级高的样式生效。
公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
(选中标签的范围越大,优先级越低)
复合选择器-叠加
叠加计算:如果是复合选择器,则需要权重叠加计算。
公式:(每一级之间不存在进位)
(行内样式,id选择器个数,类选择器个数,标签选择器个数)
规则:
从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较
!important 权重最高
继承权重最低
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重叠加巩固练习</title>
<style>
/* (0, 0, 2, 1) */
.c1 .c2 div {
color: blue;
}
/* (0, 1, 0, 1) */
div #box3 {
color:green;
}
/* (0, 1, 1, 0) */
#box1 .c3 {
color:orange;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色的?
</div>
</div>
</div>
</body>
</html>
尝试一下>>>
03-Emmet 写法
Emmet写法:代码的简写方式,输入缩写 VS Code 会自动生成对应的代码。
以下是关于HTML标签的Emmet写法的表格:
说明标签结构Emmet写法创建一个div标签<div></div>div创建一个带有class的div标签<div></div>div.classname创建一个带有id的div标签<div id="idname"></div>div#idname创建一个段落标签<p></p>p创建一个带有文本内容的段落标签<p>Text</p>p{Text}创建一个带有链接的标签<a href="#"></a>a[href="#"]创建一个列表项标签<li></li>li创建一个无序列表标签<ul></ul>ul创建一个有序列表标签<ol></ol>ol创建一个图片标签<img src="" alt="">img[src=""][alt=""]
这些Emmet写法可以帮助快速生成HTML标签结构。
以下是关于CSS的Emmet写法的表格:
说明CSS结构Emmet写法创建一个带有class的样式表<link rel="stylesheet" href="style.css">link:css创建一个内联样式表<style></style>style创建一个选择器为.classname的样式规则.classname {}.classname创建一个选择器为#idname的样式规则#idname {}#idname创建一个选择器为tagname的样式规则tagname {}tagname向选择器为.classname的样式规则中添加属性.classname { property: value; }.classname { property: value; }向选择器为#idname的样式规则中添加属性#idname { property: value; }#idname { property: value; }向选择器为tagname的样式规则中添加属性tagname { property: value; }tagname { property: value; }
这些Emmet写法可以帮助快速编写CSS样式规则。
04-背景属性
背景图
网页中,使用背景图实现装饰性的图片效果。
属性名:background-image(bgi)
属性值:url(背景图 URL)
div {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
}
提示:背景图默认有平铺(复制)效果。
平铺方式
属性名:background-repeat(bgr)
属性值效果repeat默认值,背景图像在水平和垂直方向上重复。repeat-x背景图像在水平方向上重复,垂直方向不重复。repeat-y背景图像在垂直方向上重复,水平方向不重复。no-repeat背景图像不重复,仅在盒子内显示一次。space背景图像沿着盒子的边缘平铺,且图像之间有空白间隔,使得图片不会重叠。round背景图像沿着盒子的边缘平铺,且图像会被缩放以适应整数倍的尺寸。
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
}
背景图位置
属性名:background-position(bgp)
属性值:水平方向位置 垂直方向位置
关键字
以下是关于背景图位置的关键字的表格:
关键字位置top图片顶部对齐bottom图片底部对齐left图片左侧对齐right图片右侧对齐center图片居中对齐top left图片左上角对齐top right图片右上角对齐bottom left图片左下角对齐bottom right图片右下角对齐
这些关键字可以帮助你控制背景图在元素中的位置。
坐标
水平:正数向右;负数向左
垂直:正数向下;负数向上
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}
提示:
关键字取值方式写法,可以颠倒取值顺序
可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方向为居中
背景图缩放
作用:设置背景图大小
属性名:background-size(bgz)
常用属性值:
关键字
cover:等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白
百分比:根据盒子尺寸计算图片大小
数字 + 单位(例如:px)
div {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
}
提示:工作中,图片比例与盒子比例相同,使用 cover 或 contain 缩放背景图效果相同。
背景图固定
作用:背景不会随着元素的内容滚动。
属性名:background-attachment(bga)
属性值:fixed
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
背景复合属性
属性名:background(bg)
属性值:背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序)
div {
width: 400px;
height: 400px;
background: pink url(./images/1.png) no-repeat right center/cover;
}
尝试一下>>>
05-显示模式
显示模式:标签(元素)的显示方式。
作用:布局网页的时候,根据标签的显示模式选择合适的标签摆放内容。
块级元素
特点:
独占一行
宽度默认是父级的100%
添加宽高属性生效
行内元素
特点:
一行可以显示多个
设置宽高属性不生效
宽高尺寸由内容撑开
行内块元素
特点:
一行可以显示多个
设置宽高属性生效
宽高尺寸也可以由内容撑开
转换显示模式
属性:display
以下是关于转换显示模式的表格:
属性值效果block将元素显示为块级元素,使元素呈现为一个块,独占一行,可以设置宽度和高度,可容纳其他元素。inline将元素显示为内联元素,使元素呈现为行内元素,不独占一行,只占据内容所需的空间,不可设置宽高。inline-block将元素显示为内联块元素,元素呈现为行内元素但可以设置宽度和高度,与其他行内元素在一行显示。none隐藏元素,使元素不可见且不占据空间。flex将元素设置为弹性容器,使其子元素成为弹性项目,可利用弹性布局方式控制元素的排列和对齐方式。grid将元素设置为网格容器,使其子元素成为网格项目,可利用网格布局方式控制元素的排列和对齐方式。inline-flex将元素设置为内联弹性容器,使其子元素成为弹性项目,可利用弹性布局方式控制元素的排列和对齐方式。inline-grid将元素设置为内联网格容器,使其子元素成为网格项目,可利用网格布局方式控制元素的排列和对齐方式。
这些属性值可用于控制元素的显示模式,从而实现不同的布局效果。
*请认真填写需求信息,我们会在24小时内与您取得联系。