第四章 css常用样式

斑马有点困

已于 2022-06-08 16:30:25 修改

阅读量65

点赞数

分类专栏： # web前端笔记文章标签： css css3 html

于 2022-05-30 15:14:28 首次发布

本文链接：https://blog.csdn.net/qq_36827283/article/details/125047026

版权

笔记同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

css常用样式

字体样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9XlDqiMt-1653894678043)(D:\课件\笔记\css字体相关.assets\image-20220530080959847.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>font</title>
		<style>
			h1{
				/*字体类型*/
				font-family: 华文彩云;
			}
			.s1{
				/* 字体大小 */
				font-size: 30px;
				/*字体样式*/
				font-style: oblique;
				/*宽度  100~900*/
				font-weight: bold;
			}
			.s2{
				/*字体属性的顺序：字体风格→字体粗细→字体大小→字体类型*/
				font: italic bold 30px "楷体";
			}
		</style>
	</head>
	<body>
		<h1>黄晓明突然登上热搜，被曝与离异女网红恋爱，杨颖粉丝跪求放过！</h1>
		<p>随着<span class="s1">《乘风破浪的姐姐》</span>第三季热播，各路姐姐持续霸屏热搜，
		节目粉直呼看不够，但也有网友觉得审美疲劳，想吃吃其他明星的“瓜”。
		眼看着内娱很久无“<span class="s2">瓜</span>”可吃了，有着“老好人”之称的黄晓明突然登上热搜，瞬间引起了围观。</p>
		
		
	</body>
</html>

文本样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0fS9El6f-1653894678046)(D:\课件\笔记\css字体相关.assets\image-20220530083850460.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>font</title>
		<style>
			h1{
				/*字体类型*/
				font-family: 华文彩云;
			}
			.s1{
				color: #F90;
			}
			.s2{
				
				text-decoration: line-through;
			}
			p{
				text-align: center;
				
			}
			a{
				/*去除a标签的下划线*/
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<h1>黄晓明突然登上热搜，被曝与离异女网红恋爱，杨颖粉丝跪求放过！</h1>
		<p>随着<span class="s1"><a href="#">《乘风破浪的姐姐》</a></span>第三季热播，各路姐姐持续霸屏热搜，
		节目粉直呼看不够，但也有网友觉得审美疲劳，想吃吃其他明星的“瓜”。
		眼看着内娱很久无“<span class="s2">瓜</span>”可吃了，有着“老好人”之称的黄晓明突然登上热搜，瞬间引起了围观。</p>
		
		
	</body>
</html>

超链接伪类

标签名:伪类名{声明;}

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接伪类</title>
		<style>
			/*未单击访问时超链接样式*/
			a:link{
				color: blue;
			}
			/*单击访问后超链接样式*/
			a:visited{
				color: gray;
			}
			/*鼠标悬浮其上的超链接样式*/
			a:hover{
				color: red;
			}
			/*鼠标单击未释放的超链接样式*/
			a:active{
				color: chartreuse;
			}
		</style>
	</head>
	<body>
		<h1><a href="https://www.baidu.com">字体样式</a></h1>
	</body>
</html>

设置鼠标形状

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1cY3VUXK-1653894678047)(D:\课件\笔记\css字体相关.assets\image-20220530101604422.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接伪类</title>
		<style>
			
			h2{
				cursor: wait;
			}
		</style>
	</head>
	<body>
		<h1><a href="https://www.baidu.com">字体样式</a></h1>
		<h2>你好</h2>
	</body>
</html>

div标签

DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这一块区域，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
DIV标签称为区隔标记。
作用：设定字、画、表格等的摆放位置。用来布局网页中的所有元素

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div</title>
		<style>
			.top{
				background: lightblue;
				height: 200px;
				/* width: 600px; */
				/*如果不设置高度，宽度
				默认高度:就是内容的高度
				默认宽度：占用一整行
				*/
			}
			.center{
				background-color: chartreuse;
				height: 800px;
			}
			.bootom{
				background-color: aquamarine;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="top">
			这是顶部
		</div>
		<div class="center">
			中部
		</div>
		<div class="bootom">
			底部
		</div>
	</body>
</html>

背景样式

背景颜色

background-color

.center{
				background-color: chartreuse;
				
			}

背景图像

background-image

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
		<style>
			body{
				background-image: url(img/Snipaste_2022-05-24_16-09-17.png);
			}
		</style>
	</head>
	<body>
	</body>
</html>

背景重复方式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t8oVtxZZ-1653894678048)(D:\课件\笔记\css字体相关.assets\image-20220530104149137.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
		<style>
			body{
				background-image: url(img/game01.jpg);
				background-repeat: repeat-y;
			}
		</style>
	</head>
	<body>
	</body>
</html>

背景

背景定位

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FyyQnc8z-1653894678049)(D:\课件\笔记\css字体相关.assets\image-20220530104507289.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景</title>
		<style>
			body{
				background-image: url(img/game01.jpg);
				background-repeat: no-repeat;
				background-position:40% 200px;
			}
		</style>
	</head>
	<body>
	</body>
</html>

列表样式

属性	描述
[list-style](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_list-style.asp.htm)	简写属性。用于把所有用于列表的属性设置于一个声明中。
[list-style-image](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_list-style-image.asp.htm)	将图象设置为列表项标志。
[list-style-position](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_list-style-position.asp.htm)	设置列表中列表项标志的位置。
[list-style-type](mk:@MSITStore:D:\课件\Web前端 - 副本\W3School离线手册(2017.03.11版).chm::/www.w3school.com.cn/cssref/pr_list-style-type.asp.htm)	设置列表项标志的类型。
marker-offset

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
		<style>
			ul{
				/* list-style-image:url(img/pic1.png) ; */
				/* list-style-position: inside; */
				/* list-style-type: georgian; */
				/*去除样式*/
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>网页</li>
			<li>图片</li>
			<li>资讯</li>
			<li>贴吧</li>
			<li>导航</li>
		</ul>
	</body>
</html>

线性渐变

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yxmypm6b-1653894678049)(D:\课件\笔记\css字体相关.assets\image-20220530111148270.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>渐变</title>
		<style>
			.a{
				height: 200px;
				background-image: linear-gradient(to top,red,yellow,blue);
			}
			.b{
				height: 300px;
				background-image: radial-gradient(red, yellow, green,red);
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b"></div>
	</body>
</html>