文本标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>small于big标签</title>
</head>
<body>
<p>我是p中的<small>small标签</small></p>
<p>我是p中的<big>big标签</big></p>
<p><cite>《三国演义》</cite>是罗贯中写的</p>
<!--q标签表示短引用(行内引用)-->
<p>你是<q>张圈</q>吗</p>
<!--blockquote表示长引用 (块引用)-->
<div>
曾子曰:<blockquote>吾日三省吾身</blockquote>
</div>
<!--sup表示上标-->
<p>8<sup>3</sup></p>
<p>张圈<sup><a href="#">[1]</a></sup></p>
<!--sub表示下标-->
<p>O<sub>2</sub>o</p>
<!--del删除横线-->
<p><del>2000</del>
<br>500</p>
<!--ins下划线-->
<p>身高<ins>180cm</ins></p>
<!--pre 保留所有格式-->
<pre>
i = 0
while i>5:
print(i)
</pre>
<pre>
<!--code 写代码-->
<code>
while True:
print('world')
</code>
</pre>
</body>
</html>
运行结果
列表:
1. 无序列表
- 使用ul和li来创建一个无序列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
效果
2. 有序列表
- 使用ol和li来创建一个无序列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
</body>
</html>
效果
3.定义列表
- 使用dl、dd、dt来创建一个定义列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列表</title>
</head>
<body>
<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
</body>
</html>
效果
单位：
- 长度单位
- 像素px
像素是我们在网页中使用得最多的一个单位 一个像素就相当于屏幕中的一个小点 我们的屏幕实际上就是由这些像素点构成的 但是这些像素点是不能直接看见的 - 不同显示器一个像素的大小也不相同 显示效果越好、越清晰，像素就越小，反之像素越大 - 百分比%
也可以将单位设置为一个百分比的形式 这样浏览器将会根据其父元素的样式来计算该值 - 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变 - 在我们创建一个自适应的页面时，经常使用百分比作为单位 - em
em和百分比类似，它是相对于当前元素的字体大小来计算的 - 1em = 1font-size - 使用em时，当字体大小发生改变时，em也会随之改变 - 当设置字体相关的样式时，经常会使用em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: blue;
}
.box1{
width: 50%;
height: 25%;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
效果
颜色的单位:
- 在CSS可以直接使用颜色的单词来表示不同的颜色
- 红色：red
- 蓝色：blue
- 绿色：green
- 可以使用RGB值来表示不同的颜色
例如：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
- 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
- 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字 使用百分数最终也会转换为0-255之间的数 0%表示0 100%表示255
- 可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色，每组表示一个颜色 第一组表示红色的浓度，范围00-ff 第二组表示绿色的浓度，范围00-ff 第三组表示蓝色的浓度，范围00-ff。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色的单位</title>
<style type="text/css">
/*单词：red blue green
RGB：三原色(红浓度，绿浓度，蓝浓度)
0~255
0%~100%
16进制: 00~FF #红，黄，蓝
红色：#FF0000
*/
.box{
width: 100px;
height: 100px;
/*background-color: red;*/
/*background-color: rgb(45,56,89);*/
/*background-color: rgb(100%,72%,22%);*/
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
字体的样式：
通过
font-family可以指定文字的字体 当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的样式</title>
<style type="text/css">
/*默认16px*/
p{
color: red;
font-size: 40px;
font-family: 华文隶书;
}
</style>
</head>
<body>
<p class="p1">秦失其鹿</p>
<p id="p2">天下共逐之</p>
</body>
</html>
效果
字体分类：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体的分类</title>
<style type="text/css">
p{
font-family: Arial,华文隶书,华文彩云,Serif;
}
</style>
</head>
<body>
<p style="font-size: 50px;font-family: serif">衬线字体,我是文字,ABCabc,123一</p>
<p style="font-size: 50px;font-family: sans-serif">非衬线字体,我是文字,ABCIabci,123一</p>
<p style="font-size: 50px;font-family: monospace">等宽字体,我是文字,ABCIabci,123一</p>
<p style="font-size: 50px;font-family: cursive">草书字体,我是文字,ABCIabci,123一</p>
<p style="font-size: 50px;font-family: fantasy">虚幻字体,我是文字,ABCIabci,123一</p>
</body>
</html>
效果
字体的样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
.p1{
color: red;
font-family: 华文隶书;
/*设置一个文字大小*/
font-size: 40px;
/*设置文字斜体*/
font-style: italic;
/*设置文字加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p2{
color: blue;
font-size: 50px;
font-style: italic;
font-family: 华文彩云;
font-variant: small-caps;
}
.p3{
font: italic small-caps bold 60px "华文楷体";
}
</style>
</head>
<body>
<p class="p1">我是p标签ABCDabcd</p>
<p class="p2">我是p标签ABCDabcd</p>
<p class="p3">我是p标签ABCDabcd</p>
</body>
</html>
效果
行间距：
- 在css中只能通过调整
行高与字体大小来调整行间距.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行间距</title>
<style type="text/css">
.p1{
line-height: 45px;
font-size: 25px;
font-family: 华文隶书;
}
.box{
width: 200px;
height: 200px;
background-color:mediumspringgreen;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box">
<center><a href="#">超链接</a></center>
</div>
<p class="p1">秦孝公据崤函之固，拥雍州之地，君臣固守以窥周室，有席卷天下，包举宇内，囊括四海之意，并吞八荒之心。当是时也，商君佐之，内立法度，务耕织，修守战之具，外连衡而斗诸侯。于是秦人拱手而取西河之外。 孝公既没，惠文、武、昭襄蒙故业，因遗策，南取汉中，西举巴、蜀，东割膏腴之地，北收要害之郡。诸侯恐惧，会盟而谋弱秦，不爱珍器重宝肥饶之地，以致天下之士，合从缔交，相与为一。当此之时，齐有孟尝，赵有平原，楚有春申，魏有信陵。此四君者，皆明智而忠信，宽厚而爱人，尊贤而重士，约从离衡，兼韩、魏、燕、楚、齐、赵、宋、卫、中山之众。于是六国之士，有宁越、徐尚、苏秦、杜赫之属为之谋，齐明、周最、陈轸、召滑、楼缓、翟景、苏厉、乐毅之徒通其意，吴起、孙膑、带佗、倪良、王廖、田忌、廉颇、赵奢之伦制其兵。尝以十倍之地，百万之众，叩关而攻秦。秦人开关延敌，九国之师，逡巡而不敢进。秦无亡矢遗镞之费，而天下诸侯已困矣。于是从散约败，争割地而赂秦。秦有余力而制其弊，追亡逐北，伏尸百万，流血漂橹；因利乘便，宰割天下，分裂山河。强国请服，弱国入朝。 延及孝文王、庄襄王，享国之日浅，国家无事。 及至始皇，奋六世之余烈，振长策而御宇内，吞二周而亡诸侯，履至尊而制六合，执敲扑而鞭笞天下，威振四海。南取百越之地，以为桂林、象郡；百越之君，俯首系颈，委命下吏。乃使蒙恬北筑长城而守藩篱，却匈奴七百余里；胡人不敢南下而牧马，士不敢弯弓而报怨。于是废先王之道，焚百家之言，以愚黔首；隳名城，杀豪杰；收天下之兵，聚之咸阳，销锋镝，铸以为金人十二，以弱天下之民。然后践华为城，因河为池，据亿丈之城，临不测之渊，以为固。良将劲弩守要害之处，信臣精卒陈利兵而谁何。天下已定，始皇之心，自以为关中之固，金城千里，子孙帝王万世之业也。 秦王既没，余威震于殊俗。然陈涉瓮牖绳枢之子，氓隶之人，而迁徙之徒也；才能不及中人，非有仲尼，墨翟之贤，陶朱、猗顿之富；蹑足行伍之间，而倔起阡陌之中，率疲弊之卒，将数百之众，转而攻秦；斩木为兵，揭竿为旗，天下云集响应，赢粮而景从。山东豪俊遂并起而亡秦族矣。 且夫天下非小弱也，雍州之地，崤函之固，自若也。陈涉之位，非尊于齐、楚、燕、赵、韩、魏、宋、卫、中山之君也；锄懮棘矜，非铦于钩戟长铩也；谪戍之众，非抗于九国之师也；深谋远虑，行军用兵之道，非及向时之士也。然而成败异变，功业相反，何也？试使山东之国与陈涉度长絜大，比权量力，则不可同年而语矣。然秦以区区之地，致万乘之势，序八州而朝同列，百有余年矣；然后以六合之家，崤函为宫；一夫作难而七庙隳，身死人手，为天下笑者，何也？仁义不施而攻守之势异也。
</p>
</body>
</html>
效果
盒子模型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.box{
/*内容区的大小 */
width: 100px;
/*使用width来设置盒子内容区的宽度*/
height: 100px;
/*使用height来设置盒子内容区的高度*/
background-color: chartreuse;
/*border-width: 20px;*/
/*border-width:边框的宽度*/
/*border-color:边框颜色*/
/*border-style:边框的样式*/
border-width: 20px;
border-top: 10px;
border-top-color: #FF0000;
border-bottom-color: aqua;
border-left-color: blue;
border-right-color: #ffff77;
border-style: solid;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果
边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style type="text/css">
.box{
width: 100px;
height: 200px;
background-color: blue;
border-color: #FF0000;
border-style: solid;
}
.box1{
width: 250px;
height: 250px;
background-color: #ffff77;
/*简写*/
border: blue solid 20px;
/*右边框为空*/
border-right: none;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box"></div>
</body>
</html>
