字体类型和字体属性调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css字体类型大小</title>
</head>
<style>
.font3 {
font-family: 'Courier New', Courier, monospace;
font-size: 30px;
font-weight: 1000;
}
</style>
<body>
<p class="font3">miaow</p>
</body>
</html>
文本
文本对齐方式: text-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对齐</title>
</head>
<body>
<h2 style="text-align: left;">左对齐</h2>
<h2 style="text-align: center;">居中</h2>
<h2 style="text-align: right;">右对齐</h2>
</body>
</html>
文本外观修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本外观修饰</title>
<style>
.font-waiguan {
text-decoration: overline;
}
</style>
</head>
<body>
<p class="font-waiguan">miaow</p>
<a style="text-decoration: none;" href="http://baidu.com" target="_blank">百度</a>
</body>
</html>
文本缩进: text-indent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本缩进</title>
<style>
p {
/* 像素缩进 */
/* text-indent: 40px; */
/* em指一个字体的像素距离
这里的字体为16px 则2em是32px距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>消息摘要是一个唯一对应一个消息或文本的固定程度的值,他由一个单向hash加密函数对消息进行作用而产生,如果消息中途改变,那么消息的接收着对收到消息的新产生的摘要和原摘要比较,就可以知道消息是否被改变了,故而消息摘要保证了消息的完整性。消息摘要采用单向的hash函数将需要加密的明文“摘要”成一串密文,这一串密文亦称为数字指纹,有固定的长度,且不同的明文摘要成密文,其结果总是不同的。而同样的明文其摘要必定是一致。这样这串摘要便可成为验证明文是否是真身的指纹了。 </p>
</body>
</html>
文本行间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行间距</title>
<style>
div {
line-height: 16px;
}
</style>
</head>
<body>
<div>消息摘要是一个唯一对应一个消息或文本的固定程度的值,他由一个单向hash加密函数对消息进行作用而产生,如果消息中途改变,那么消息的接收着对收到消息的新产生的摘要和原摘要比较,就可以知道消息是否被改变了,故而消息摘要保证了消息的完整性。消息摘要采用单向的hash函数将需要加密的明文“摘要”成一串密文,这一串密文亦称为数字指纹,有固定的长度,且不同的明文摘要成密文,其结果总是不同的。而同样的明文其摘要必定是一致。这样这串摘要便可成为验证明文是否是真身的指纹了。</div>
</body>
</html>
HTML中引入CSS样式的几种方式
- 内联样式:在HTML元素中使用style属性来定义内联样式,例如:
<p style="color: red; font-size: 16px;">这是一段红色的文字</p>
- 内部样式表:在HTML文档的标签中使用
<head>
<style>
p {
color: blue;
font-size: 14px;
}
</style>
</head>
- 外部样式表:将样式定义在一个独立的CSS文件中,然后在HTML文档中使用
<link>
标签引入外部样式表,例如:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
- @import:在CSS文件中使用@import规则引入其他CSS文件,例如:
@import url("styles.css");
- 使用CDN链接:有时候可以直接使用外部的CDN链接引入CSS样式,例如:
<head>
<link rel="stylesheet" href="https://cdn.example.com/styles.css">
</head>