01.长度单位
DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title><style>html {font-size: 20px;}section {width: 300px;height: 300px;background-color: pink;}div {width: 10rem;height: 10rem;background-color: red;}style>
head><body><section><div>略人准他。div>section>
body>html>
02.颜色的单位
DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title><style>.box1 {width: 100px;height: 100px;background-color: rgba(189, 100, 100, 0.5);}style>
head><body><div class="box1">div>
body>html>
03.字体的样式
DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title><style>@font-face {font-family: 'xiyangyang';src: url(./字体/MeowScript-Regular.ttf);}p {color: #f00;font-size: 30px;font-family: 'xiyangyang';}style>
head><body><p>雷王善要，招面唯张。Lorem ipsum dolor sit amet.p>body>html>
04.字体的分类
DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title><style>style>
head><body><p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefgp><p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcdefgp><p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEFGabcdefgp><p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefgp><p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefgp>
body>html>
05.字体的其他样式
DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title><style>.p1 {font-size: 2em;font-family: "Times New Roman", Times, serif;font-style: oblique;font-weight: 900;}.p2 {color: red;font-size: 35px;font-variant: small-caps;}.p3 {color: green;font: italic bold 30px serif;}style>
head><body><p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefgp><p class="p2">我是一段文字，ABCDEFGabcdefgp><p class="p3">我是一段文字，ABCDEFGabcdefgp>
body>html>
06.行间距
DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title><style>.p1 {font-size: 25px;color: red;line-height: 2;}.box {width: 100px;height: 100px;background-color: pink;line-height: 100px;}.p2 {color: green;font: 30px/1.5 sans-serif;}style>
head><body><p class="p2">在我的后园，可以看见墙外有两株树，一株是枣树，p><div class="box"><a href="#">我是一个超链接a>div>
body>html>
07.文本样式
DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>title><style>.p1 {}.p2 {font-size: 30px;text-indent: 2em;}.p3{background-color: pink;width: 400px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}h1{color: red;text-align: center;text-shadow: 5px 5px 10px;}.box{width: 100px;height: 100px;background-color: green;}.box:hover{box-shadow: 0px 0px 10px ;}span{text-align: center;}style>head><body><h1>判已母定国你十。h1><span>我是span标签span>body>
html>
08.文本样式补充
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>div {width: 300px;}img {width: 300px;}style>
head><body><div><img src="./img1.jpeg" alt=""><img src="./img1.jpeg" alt="">div>body>html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
