css字体相关
字体样式
<!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>
文本样式
<!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>
设置鼠标形状
<!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>
背景重复方式
<!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>
背景定位
<!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] | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
[list-style-image] | 将图象设置为列表项标志。 |
[list-style-position] | 设置列表中列表项标志的位置。 |
[list-style-type] | 设置列表项标志的类型。 |
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>
线性渐变
<!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>