HTML学习笔记7——字体、文本样式，以及一点伪类语法

松光鱼

于 2024-07-29 11:46:22 发布

阅读量287

点赞数 3

分类专栏： HTML 文章标签： html 学习笔记

本文链接：https://blog.csdn.net/qq_68268403/article/details/140766997

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

字体样式

设置字体的类型，风格，大小，粗细等

属性	样式	示例
font-family	设置字体（宋体、楷体等设置电脑上有的字体）	font-family:"隶书";
font-size	字体大小（像素 px）	font-size:12px;
font-style	字体风格（倾斜、加粗等）	font-style:italic;
font-weight	字体加粗（100最细，900最粗）	font-weight:bold;
font	设置以上所有的属性（顺序风格、加粗、大小、字体）	font:italic bold 30px "宋体"；

代码示例

html

<!DOCTYPE html>    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本装饰</title>
    <link rel="stylesheet" href="./222.css">     
    <!-- <style>
        @import url(./222.css);
    </style> -->
</head>
<body>
    <h1>相知于冬雪，风雨奕同周</h1>
    <p class="sqhy">向全世界安利最好的诗情画奕</p>
    <p class="sqhy">诗情画奕szd</p>
    <p id="kkk">4781</p>
    <p>我<span class="show">"是"</span>谁</p>
</body>
</html>

css

h1{
    color:red;
    font-size: large;
    font-family: "楷体";
    font-weight: 800;   
}

.sqhy{
    color:brown;
    font-style: italic;
    font-family: "宋体";    
}

#kkk{
    color:blueviolet;
}

效果展示

文本样式

属性	含义	示例
color	设置文本颜色	color:red; 颜色红色
text-align	设置元素水平对齐方式	text-align: center; 水平居中
text-indent	设置首行文本缩进	text-indent: 2cap;
line-height	设置文本行高	line-height: 40px;
text-decoration	设置文本装饰	text-decoration: none; 无、取消下划线等装饰

代码示例

<!DOCTYPE html>    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本装饰</title>
    <link rel="stylesheet" href="./222.css">     
    <!-- <style>
        @import url(./222.css);
    </style> -->
    <style>
        p{
            text-align: center;  /*居中对齐*/
            height: 40px;
            width: 500px;
            background-color: aquamarine;  /*设置背景颜色*/
            line-height: 40px;  /*行高与前边的height相同就可以上下居中*/
            text-decoration: underline red;   /*文本装饰 红色下划线,默认与字体颜色一致*/
            text-decoration: none;
        }
        h6{
            background-color: aquamarine;
            height: 75px;
            width: 100px;
            text-indent: 2cap;  /*首行缩进*/
        }
    </style>
</head>
<body>
    <h1>相知于冬雪，风雨奕同周</h1>
    <p class="sqhy">向全世界安利最好的诗情画奕</p>
    <p class="sqhy">诗情画奕szd</p>
    <p id="kkk">4781</p>
    <p>我<span class="show">"是"</span>谁</p>
    <h6>巴拉巴拉巴拉巴拉额符合UI哦会哦反而赫然个不择然而8一般v尽快十点半儿童昂热二号</h6>
</body>
</html>

h1{
    color:red;
    font-size: large;
    font-family: "楷体";
    font-weight: 800;
    text-align: center;
    height: 40px;
    width: 500px;
    background-color: aquamarine;
    line-height: 40px;  /*行高与前边的height相同就可以上下居中*/
}

.sqhy{
    color:brown;
    font-style: italic;
    font-family: "宋体";
    text-align: center;
}

#kkk{
    color:blueviolet;
    text-align: center;
}

效果展示

伪类语法

标签名：伪类名{声明；}

a:hover{
	color:#B46210;
	text-decortaion:underline;
}

伪类

伪类名称	含义
a:link	未单击访问时超链接样式
a:visited	单击访问后超链接样式
a:hover	鼠标悬浮其上的超链接样式
a:active	鼠标单击未释放的超链接样式

鼠标形状

值	说明	图
default	默认光标
pointer	超链接的指针
wait	等待的效果
help	指示可用的帮助
text	指示文本
crosshair	十字

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类语法</title>
    <style>
        /*单击访问后*/
        a:visited{           
            color: black;
            text-decoration: line-through;
            font-size: 40px;
        }
        /*鼠标悬浮其上*/
        a:hover{              
            color: aquamarine;
            text-decoration: overline;
            font-size: 40px;
            cursor: pointer;
        }
        /*鼠标单击未释放*/
        a:active{             
            color:aqua;
            text-decoration: underline;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <a href="https://www.iqiyi.com/?vfm=f_588_wrb&fv=ac30238882b84c8c">点我跳转</a>
</body>
</html>

效果不展示，自己挨个试就能理解了，上手操作还是更容易理解的