0
点赞
收藏
分享

微信扫一扫

CSS3 基础属性 第一个模块

半夜放水 2022-01-12 阅读 126
css3css前端

第04章-前端核心技术-CSS3基础属性

学习目标

  1. 了解CSS是什么
  2. 掌握CSS的简单使用
  3. 掌握CSS样式创建和引入的方法重点
  4. 掌握CSS背景的使用重点
  5. 掌握CSS文本的样式重点
  6. 掌握CSS连接的样式重点

CSS简介

什么是 CSS

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 定义如何显示 HTML 元素
  • 多个样式定义可层叠为一

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5cLoS24-1641981801630)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220111113902633.png)]

  • 选择器通常是您需要改变样式的 HTML元素。
  • 每条声明由一个属性和一个值组成。
  • 属性（property）是您希望设置的样式属性（style attribute）。
  • 每个属性有一个值。属性和值被冒号分开。

CSS 创建（引入方式）

插入样式表的方法有三种:

  1. 外部样式表(External style sheet)
  2. 内部样式表(Internal style sheet)
  3. 内联样式(Inline style)

外部样式表

外部样式需要创建独立的css文件，并且使用link标签引入，推荐使用

<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

内部样式表

内部样式直接在html文件内部使用style标签引入，通常放在head标签中

<head>
	<style>
 		hr {color:sienna;} 
		p {margin-left:20px;} 
		body {background-image:url("images/back40.gif");} 
	</style> 
</head>

内联样式

内联样式直接在某个标签上通过style属性的引入，必须依赖与某个标签，不通用，但是优先级最高

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

（内联样式）> （内部样式）>（外部样式）> 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

CSS简单选择器

选择器用于选择哪些元素

元素选择器（选一种元素）

p {
    text-align:center;
}

设置HTML文档中所以 p 标签的文字居中对齐。

d 选择器（选一个）

id 选择器可以为标有特定id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器。CSS 中 id 选择器以 # 来定义。

#abc {
   text-align:center;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器（选多个）

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示，在 CSS中，类选择器以一个点.号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

三种选择器优先级

id选择器（选一个） > class选择器（选多个） > 元素选择器 （选一种元素）

CSS 尺寸

尺寸主要指宽度和高度属性

属性描述
height设置元素的高度。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

注：width: 200px; margin: auto;可以让 区块元素 居中。

注：给上级元素添加text-align: center属性可以让 内联元素 居中，因为内联元素等同于文字处理。

CSS 背景颜色

属性描述
background-color设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）

rgb

RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。

  • 红色（R）
  • 绿色（G）
  • 蓝色（B）

hsl

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

  • 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
  • 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
  • 亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
值描述
hue - 色相定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度定义饱和度; 0% 为灰色， 100% 全色
lightness - 亮度定义亮度 0% 为暗, 50% 为普通, 100% 为白

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxB2Zsjf-1641981801633)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220111114714703.png)]

案例05

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#bg{
                height: 200px;
                /* 1.颜色单词 */
                background-color: red;
                /* 2.三位16进制 */
                background-color: #F56;
                /* 3.六位16进制 */
                background-color: #0000FF;
                /* 4.rgb(255,255,255) */
                background-color: rgb(10,255,125);
                /* 5.rgba(255,255,255,1) */
                background-color: rgba(10,255,125,1);
                /* 6.hsl(360,100%,100%) */
                background-color: hsl(0,100%,50%);
                /* 7.hsla(360,100%,100%,1) */
                background-color: hsla(0,100%,50%,0.1);
			}
		</style>
	</head>
	<body>
		<div id="bg"></div>
	</body>
</html>

效果展示

在这里插入图片描述

CSS 背景图片

背景图片包括多个属性，可以分别设置也可以合并设置

属性描述
background-color设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）
background-image设置背景图片（url(img/logo.png)）
background-repeat设置背景图片是否重复（no-repeat、repeat）
background-attachment设置背景图片是否固定（scroll、fixed）
background-position设置背景图片的位置（left、right、top、bottom、center、%、px）
background-size（不可合并）设置背景的大小（px、%、cover、contain）

注意：background属性设置多个背景时，用逗号分隔开来。

background-size属性

值描述
像素设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
百分比将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h2SocguC-1641981801634)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220111111313349.png)]

CSS 文本

文本属性有很多，常用的如下，描述中括号内的内容需要重点记忆

属性描述
color设置文本颜色（纯文字）
direction设置文本方向（ltr：[left to right]；rtl）
unicode-bidi设置文本是否被重写（bidi-override）
letter-spacing设置字符间距 （像素单位px，百分比单位）
word-spacing设置字（单词间的空格）间距（像素单位px，百分比单位）
white-space设置元素中空白的处理方式（pre：保留空格和换行；pre-line：只保留换行；nowrap：不保留空格和换行；normal：默认）
vertical-align设置元素的垂直对齐（表格、图片、内联元素）（top、middle、bottom）
text-align水平对齐元素中的文本（内联子元素）（left、right、center）
text-decoration向文本添加上、中、下划线（overline、line-through、underline、none）
text-indent缩进元素中文本的首行（像素单位px，百分比单位）
text-transform控制元素中的字母（lowercase、uppercase）

CSS3 文字阴影

语法：

text-shadow: h-shadow v-shadow blur color;

注意： text-shadow属性设置多重阴影文本，用逗号分隔开来。

属性值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。

CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size/line-height指定文本的字体大小
font-style指定文本的字体斜体（斜体：italic）
font-weight指定字体的粗细（100：不加粗；900：加粗【bold】）。
font-variant以小型大写字体或者正常字体显示文本。（small-caps）

font属性合并写法的顺序：

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size/line-height
  5. font-family

如果行高和高度一样，可以简单的让单行文字垂直居中。

height:50px;
line-height:50px;

字体系列

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。多个字体系列是用一个逗号分隔指明：

p{
	font-family:"楷体","微软雅黑";
}

CSS单位

绝对单位：（像素单位）

设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;} 像素
p {font-size:14pt;} 像素点

相对大小：(可变单位)

  1. Em：相对于直接上级的元素的字体大小来设置大小
  2. Rem：相对于html的元素字体大小来设置大小
  3. 百分比：相对于元素自身的大小来设置大小
  4. vw : 1vw 等于视口宽度的1%
  5. vh : 1vh 等于视口高度的1%
  6. vmin : 选取 vw 和 vh 中最小的那个
  7. vmax : 选取 vw 和 vh 中最大的那个

浏览器默认大小和普通文本段落一样，是16像素（16px=1em）。

如果上级元素的字体大小为20px，则（20px=1em）。

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

上面的例子，em的文字大小是与前面的例子中像素一样。

不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

CSS 超链接属性

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接 ：蓝色
  • a:visited - 用户已访问过的链接 ：紫色
  • a:hover - 当用户鼠标放在链接上时 ：鼠标悬浮
  • a:active - 链接被点击的那一刻 ：红色

注意： a:hover 必须在 a:link 和 a:visited 之后写，需要严格按顺序才能看到效果。

注意： a:active 必须在 a:hover 之后。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RPluEprX-1641981801634)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220111173514834.png)]

CSS后代选择器

后代选择器（descendant selector）又称为包含选择器。使用符合空格

后代选择器可以选择作为某元素后代的元素。

举例来说，如果您希望只对 ul 元素中的 li元素应用样式，而不对ol元素中的li元素应用样式，可以这样写：

作业

制作如下艺术字效果

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业1制作艺术字</title>
		<link rel="stylesheet" type="text/css" href="../css/work1.css"/>
	</head>
	<body>
		<div id="div1">
			<span id="">
				大草原真美！
			</span>
		</div>
	</body>
</html>


#div1{
	height: 100px;
	width: 25%;
	background-color: darkcyan;
	line-height: 6.25rem;
	text-align: center;
	font-size: 4vw;
	color: white;]
	-ms-text-autospace: ;
	text-shadow: 4px 4px 4px #D2691E ;
}

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RKoA1pLt-1641981801635)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220112175420492.png)]

制作如下按钮效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业2制作按钮</title>
		<link rel="stylesheet" type="text/css" href="../css/work2.css"/>
	</head>
	<body>
		<div id="content">
			<div id="top" class="c1">	
			</div>
			<div id="button">
				按钮
			</div>
			<div id="bottom" class="c1">				
			</div>
		</div>
	</body>
</html>


#content{
	width: 200px;
	-webkit-user-select: none;
	cursor: pointer;
	background-color: #DCDCDC;
}
#top{
	height: 5px;
	background-color: aqua;
}
#button{
	height:80px;
	line-height: 80px;
	text-align: center;
	font-size: 40px;
	letter-spacing: 20px;
	text-indent: 10px;
	text-shadow: 2px 2px 2px #D2691E;
	color: red;
}	
#bottom{
	height:5px;
	background-color:#D2691E;
}
#content:hover .c1{
	background-color: #DC143C;
	font-size: 40px;
}
#content:active{
	background-color: #00FFFF;
	font-size: 20px;
}

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8T2hfIE-1641981801635)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220112175506475.png)]

制作如下按钮button效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业3按钮</title>
		<link rel="stylesheet" type="text/css" href="../css/work3.css"/>
	</head>
	<body>
		<div id="content">
			<button type="button" id="button1">红色按钮</button>
			<button type="button" id="button2">绿色按钮</button>
			<button type="button" id="button3">蓝色按钮</button>
		</div>
	</body>
</html>


#content{
	height: 6.25rem;
	width: 100%;
	text-align: center;
	
}
#button1{
	height: 50px;
	width: 200px;
	background-color: red;
	color: white;
	font-size: 20px;
	-webkit-user-select: none;
	cursor: pointer;
}
	
#button2{
	height: 50px;
	width: 200px;
	background-color: green;
	color: white;
	font-size: 20px;
	-webkit-user-select: none;
	cursor: pointer;
}
#button3{
	height: 50px;
	width: 200px;
	background-color: blue;
	color: white;
	font-size: 20px;
	-webkit-user-select: none;
	cursor: pointer;
}
#button1:hover{
	background-color: #D2691E;
	color: #0000FF;
}
#button1:active{
	background-color: #DCDCDC;
	font-size: 10px;
	color: #808080;
}
#button2:hover{
	background-color: #D2691E;
	color: #0000FF;
}
#button2:active{
	background-color: #DCDCDC;
	font-size: 10px;
	color: #808080;
}
#button3:hover{
	background-color: aquamarine;
	color: antiquewhite;
}
#button3:active{
	background-color: #00FFFF;
	font-size: 10px;
	color: #008B8B;
}

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ao85qotJ-1641981801636)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220112175738468.png)]

实现如下菜单效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业4目录栏</title>
		<link rel="stylesheet" type="text/css" href="../css/work4.css" />
	</head>
	<body>
		<div id="content">
			<dl>
				<dt class="dt">|系统设置</dt>
				<dd class="dd"><sup><b>L</b></sup>版本设置</dd>
				<dd class="dd"><sup><b>L</b></sup>标题设置</dd>
				<dd class="dd"><sup><b>L</b></sup>头部设置</dd>
				<dd class="dd"><sup><b>L</b></sup>底部设置</dd>
				<dt class="dt">用户管理</dt>
				<dd class="dd"><sup><b>L</b></sup>用户列表</dd>
				<dd class="dd"><sup><b>L</b></sup>用户分类</dd>
			</dl>   
		</div>
	</body>
</html>


#content{
	width: 25%;
	background-color: #DCDCDC;
	font-size: 2vw;
	-webkit-user-select: none;
	cursor: pointer;
}
	
.dt{
	font-weight: bold;
	background-color: #A9A9A9;
}
.dt:hover{
	background-color: #DC143C;
	font-size: 2vw;
	color: #008B8B;
}
.dt:active{
	background-color: #0000FF;
	font-size: 2vw;
	color: #7FFFD4;
}
	
.dd{
	border: #00008B 1;
}
.dd:hover{
	background-color: #00008B;
	font-size: 2.2vw;
	color: #008B8B;
}
.dd:active{
	background-color: #00FFFF;
	font-size: 2vw;
	color: #DC143C;
}

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vh6aMxLM-1641981801637)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220112180001110.png)]

实现如下进度条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业5色条</title>
		<link rel="stylesheet" type="text/css" href="../css/work5.css"/>
	</head>
	<body>
		<div id="div1">
			<div class="div11">	
					50%
			</div>
		</div>
		<br>
		<div id="div2">
			<div class="div11">
				50%
			</div>
		</div>
		<br>
		<div id="div3">
			<div class="div11">
				50%
			</div>
		</div>
	</body>
</html>


	
#div1{
	background-color:rgb(0,0,360);
	height: 20px;
}
		
#div2{
	height: 20px;
	background-color: red;
}
	
#div3{
	height: 1.25rem;
	background-color: green;
}
.div11{
	background-color:rgba(0,0,0,0.5) ;
	width: 50%;
	text-align: right;
	color: white;
}

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vag2UWa7-1641981801637)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220112180016724.png)]

实现如下效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业六</title>
		<link rel="stylesheet" type="text/css" href="../css/work6.css"/>
	</head>
	<body>
		<div id="div">
			<div id="div1">
				<span id="">
					高薪达人
				</span>
			</div>
			<div id="div2">
				<img src="../image/1.webp" width="100%" height="100%">
			</div>
			<div id="div3">
				<span id="">
					月薪过完，靠脸吃饭
				</span>
			</div>
		</div>
	</body>
</html>


#div{
	height: 360px;
	width: 30%;
	background-color: blue;
	-webkit-user-select: none;
	cursor: pointer;
}
	
#div1{
	height: 20px;
	text-align: center;
}
#div2{
	width: 100%;
	height: 320px;
	
}
#div3{
	height: 20px;
	text-align: center;
}
	
#div:hover{
	background-color: red;
	font-size: 16px;
}
#div:active{
	background-color: #008B8B;
	font-size: 13px;
}

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnWVAZed-1641981801638)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220112180033384.png)]

实现如下通讯录界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业7通讯录</title>
		<link rel="stylesheet" type="text/css" href="../css/work7.css" />
	</head>
	<body>
		<div id="content">
			<div id="top">
				通讯录
			</div>
			<div id="search">
				<input type="text" name="search1" id="search1" value="搜索" />
			</div>
			<img src="../image/1.webp" class="image1">
			<span class="span1">
				新的朋友
			</span>
			<br>
			<div id="div1">
			</div>
			<img src="../image/1.webp" class="image1">
			<span class="span1">
				新的朋友
			</span>
			<div id="div2">
				<span id="span2">
					我的朋友
				</span>
			</div>
			</div>
			<img src="../image/1.webp" class="image1">
			<span class="span1">
				新的朋友
			</span>
			</div>
			<div id="div3">
				<span id="span3">
					这里使用br空出来
				</span>
			</div>
			<div class="div4">
				<div id="">
					<img src="../../image/7.png" class="image2">
					<p>微信</p>
				</div>
				<div id="">
					<img src="../../image/2.png" class="image2" >
					<p>通讯</p>
				</div>
				<div id="">
					<img src="../../image/6.png" class="image2" >
					<p>发现</p>
				</div>
				<div id="">
					<img src="../../image/3.png" class="image2">
					<p>我</p>
				</div>
			</div>
		</div>
	</body>
</html>


	
#content{
	width: 50%;
}	
#top{
	height: 50px;
	background-color: darkblue;
	line-height:50px;
	text-align: center;
	color: white;
	font-size: 20px;
}
	
#search{
	height: 50px;
	line-height: 50px;
	background-color: #DCDCDC;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 5px;
}
#search1{
	text-align: center;
	width: 100%;
	height: 25px;
	color:#808080 ;
}
	
.image1{
	height: 30px;
	vertical-align:middle;
	margin-bottom: 5px;
	margin-top: 5px;
}
#div1{
	height: 1px;
	background-color:#DCDCDC ;
}
#div2{
	height: 20px;
	background-color: #A9A9A9;
	text-indent: 20px;
	margin-bottom: 5px;
}
#div3{
	height: 31.25rem;
	width: 50%;
	background-color: #DCDCDC;
	text-align: center;
}
.div4{
	width: 50%;
	align-content: center;
	text-align: center;
}
.image2{
	text-align: center;
}
.div4>div{
	display: inline-block;
	margin: 0 10%;
}

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BYkyN2PS-1641981801638)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220112180152195.png
)]

举报

相关推荐

【转载】odoo 第一个模块

前端

3、构建第一个项目

QJavaScript前端开发

css3属性

css3csshtml

CSS3基础（一）

html5

靡语IT:Vue - 第一个项目模块

java算法矩阵

css3写一个加载动画

自定义属性微信javascript系统/运维

CSS3动画的常见属性（CSS3）

csscss3htmlcss3动画Linux系统/运维

第一个JAVA

eclipse

第一个博客

微信公众号javascripthtmlJava编程语言

第一个代码

蓝桥杯c语言
0 条评论