1.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>举头望明月，低头思故乡</p>
<p>举头望明月，低头思故乡</p>
<p>举头望明月，低头思故乡</p>
</body>
</html>
运行结果
image.png
2。css语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS语法</title>
<style type="text/css">
/*
css注释
*/
p{
color:red;
font-size:40px;
}
</style>
</head>
<body>
<p>今天天气真不错，阳光明媚</p>
</body>
</html>
运行结果
image.png
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<h1>这是一个网页</h1>
<p>
我是<em>em用法 里面斜体</em>
</p>
<strong>
我是strong,粗标签
</strong>
<p>
<i> 我是i标签 斜体字</i>
<b> 我是b标签 粗体字</b>
</p>
<p>
我是p标签的内容
<small> 我是 small 标签中的内容</small>
</p>
<p>
<cite>《小白》 </cite>书名号包住
</p>
<p>
子曰:<q> 学而时习之，不亦说乎！ 双引号</q>
</p>
<div>
子曰: <blockquote>学而时习之，不亦说乎！ 内容占一行</blockquote>
</div>
<p> 2<sup>2</sup></p>
<p>
搜索上方
小豪<sup><a href="#">[3]</a> </sup>
</p>
<p>
在下面
小豪<sub><a href="#">[2]</a></sub>
</p>
<p>
<del>40000.88</del><br>
8000<br>
</p>
<p>
小面加线
小小<ins>好厉害</ins>
</p>
没在一行 pre和code一起用
<pre>
<code>
小小
小小
小小
</code>
</pre>
</body>
</html>
运行结果
image.png
4.列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 列表</title>
</head>
<body>
<!-- 无序列表ul li-->
<ul>
<li>小小 </li>
<li>斧王 </li>
<li>战士 </li>
</ul>
<!--有序列表ol li-->
<o1>
<li>结构 </li>
<li>表现 </li>
<li>行为 </li>
</o1>
<!--定义列表dl dt dd-->
<p>
菜谱
</p>
<ul>
<li>鱼香肉丝 </li>
<ol>鱼</ol>
<ol>香</ol>
<ol>肉</ol>
<li>麻辣香锅 </li>
<ol>麻 </ol>
<ol>辣 </ol>
<ol>食材 </ol>
</ul>
<dl>
<dt>鲁班</dt>
<dd>智商250，跑的慢 </dd>
<dd>站撸王</dd>
<dt>项羽 </dt>
<dd>媳妇虞姬，血多皮厚</dd>
<dd>打不死 </dd>
</dl>
</body>
</html>
运行结果
image.png
5.单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单位</title>
<style type="text/css">
.box{
width: 400px;
height:400px;
background-color:red;
}
.box1{
font-size: 100px;
/*lem = lfont-size = 20px*/
width: 2em;
height: 50%;
background-color:yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
运行结果
image.png
6.颜色单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜色单位</title>
<style type="text/css">
.box{
width: 400px;
height:400px;
/*background-color:red; */
/*background-color:rgb(178,50,50); */
/*background-color:rgb(100%,50%,50%); */
background-color:#ff0000;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果
image.png
7.字体颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体颜色</title>
<style type="text/css">
.pl{
color:red;
font-size: 20px;
/*font-family: arial; 这是什么字体，上面是字体颜色 */
font-family: 超体
}
</style>
</head>
<body>
<p class="pl">
我的字体有颜色，还会变
</p>
</body>
</html>
运行结果
image.png
8。字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style type="text/css">
p{
font-family:华文彩云，arial,微软雅黑，serif;
background-color: gold;
}
</style>
</head>
<body>
<p style="font-size: 50px； font-family:serif;">
衬线字体：我是小小，石头人。
</p>
</body>
</html>
运行结果
image.png
9.字体其他样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体其他样式</title>
<style type="text/css">
/*单个的字体样式 第一种方法*/
.pl{
color: red;
font-size:30px;
font-family:微软雅黑;
font-style:italic;
font-weight: bold;
font-variant: small-caps;
}
/*字体的样式*/
.p2{
font-size: 50px;
font-family:宋体;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
/*前面可以不写，40px 和什么字体必须写 这是全部的第二中方法*/
.p3{
font:bold italic small-caps 40px "宋体";
}
</style>
</head>
<body>
<p class="pl">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
运行结果
image.png
10.行间距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行间距</title>
<style type="text/css">
/*行高*/
.pl{
line-height: 40px;
font-size: 20px;
}
.box{
height: 200px;
background-color: #bfa;
line-height: 200px
}
</style>
</head>
<body>
<div class="box">
<a href="#">我是一个超链接</a>
</div>
<p class="pl">
覆盖重定向追加重定向ln 源文件 目标文件 相当于复制 硬连接 如果源文件删除 不影响连接文件ln -s 源文件 目标文件 如果源文件删除 连接文件失效管道| 把显示的内容放进一个管子里面 然后怎么输出 more帮助文档ls --helpman lsA 绝对速度90km/hB 相对A速度0km/h 绝对路径：/home/python/Desktop/0103.txt绝对路径是从根目录开始算相对路径从当前位置开始找/home/python/Desktop 目前路径01/03.txt就是相对路径1个字节 有8位0000 0000 最小值 0 1米 = 100厘米
</p>
</body>
</html>
运行结果
image.png
今天学习的内容，学了好多，自己有好多没有学会，没有学明白 ，自己下步好好复习复习，学一学，看一看，做一做，努力努力。
网友评论