css之文本编辑
体验css
<!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>体验css</title>
<style>
.red {
color: red;
}
.font20 {
font-size: 20px;
}
#pink {
color: pink;
}
* {
color: black;
}
</style>
</head>
<body>
<div class="red">变红色</div>
<div class="red font20">变红色 字体变大</div>
<div id="pink">第一次调用</div>
<p id="pink">第二次调用</p>
</body>
</html>
- 效果展示
字体标签
<!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>Document</title>
<style>
div {
font: italic 700 16px Arial;
}
</style>
</head>
<body>
<div>三生三世十里桃花，一心一意万行代码</div>
</html>
- 效果展示
文本属性
<!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>Document</title>
<style>
div {
line-height: 100px;
}
</style>
</head>
<body>
<div>文本</div>
<p>文本文本</p>
</body>
</html>
样式表
<!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>Document</title>
<style>
div {
color: red;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>内部样式表,就是在html页面内部写</div>
<p style="color: red;">行内样式表</p>
<h1>外部样式表</h1>
<hr>
</body>
</html>
案例
<!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>Document</title>
<style>
body {
font: 16px/28px 'Microsoft YaHei';
}
h1 {
font-weight: 400;
text-align: center;
}
a {
text-decoration: none;
}
p {
text-indent: 2em;
}
.gray {
color: #888888;
font-size: 24px;
text-align: right;
}
.search {
color: #666;
}
.btn {
font-weight: 700;
}
.pic {
text-align: center;
}
.footer {
color: #888;
font-size: 12px;
}
</style>
</head>
<body>
<h1>我年少，我轻狂，只因我的路上，我无人可挡</h1>
<div class="gray">“我想要给大地多装一些窗子，让那些早已习惯黑暗的眼睛变得习惯光明，哪怕我要闯过那片森林。” ― ―题记
<a href="http://www.zuowenzhitiao.com/">（纸条:文/氯化钾）</a>
<input type="text" val="请输入查询条件" class="search">
<button class="btn">搜索</button>
</div>
<hr>
<p class="pic">
<img src="05-00.jpg" alt="">
</p>
<p>黑暗和恐惧一点一点的吞噬着他，树木在放肆地嘲笑他的孤独。哼，说我孤独？因为只有强者才会孤身一人，而我亦是强者，所以才是孤独的。孤独，是最好的成长良药。世间哪怕只有我一人理解我自己，那又何仿，只能说我是一个独一无二的我。没人理解，我就自己孤身一人走在人生的旅途中，谁怕，我一人就是一支军队！少年的眼神明亮起来，甚至还有些咄咄逼人地逼视着黑暗。</p>
<p>黑暗有些退缩了，但还是不依不饶的贴在少年身上，想要把他拉入无底深渊。脚下的泥潭继续嘲笑着他的迷茫。迷茫？是的，谁没有迷茫过呢？谁不想过着安稳而又稳定的日子呢？自己的一切都是被安排好的，还会迷茫吗？不，我不想，一个人的一生若没有一丝的波涛起伏，那还是人生吗？人生总是要有变化的，若没有一丝变化，那不是人，那是一块冷血的石头！我生来就不是为别人的成功做铺垫的，我是为了自己的理想而来到这个世界上的，我不要不留一物地离开，我一定要成就一番事业。就是因为这我才会迷茫的，而现在，我又迷茫什么呢，既然目标是远方，那么管他什么狂风暴雨，我留给别人的，就只能是我的背影。少年嘴角翘了起来，豪放不羁地大声笑起来，嘲笑这痴心妄想的黑暗。
</p>
<p>黑暗有些疯狂的吞噬着这个少年，周围的污水滩也用嘶哑的声音嘲讽少年的年轻的轻狂，妄想与黑暗对抗。年轻？哼，我是年轻，那又如何，我仍年少，这就是我炫耀的资本，正是因我仍然年少轻狂，才会不屈不饶的奋斗，去拼搏。我还正值青春，你有什么理由打压我，催促我去放弃？我还没见过大好河山;我还没走过天南海北;我还没见过世外桃源;我还没会过世外高人。你凭什么去阻拦我释放年轻的色彩。就算你打败了我的肉体，你也不可能摧毁我的灵魂。即使我再路上遍体鳞伤，我也要用嘶哑的喉咙去歌唱我的青春！少年站了起来，逼视着黑暗。</p>
<p>黑暗彻底疯狂了，撕咬着少年的身体，周围的树林也疯狂了，你被黑暗包围，难道不会害怕吗？害怕？哼，当我迈入这座充满秘密的丛林时就已经把害怕弃置脑外。我曾经也害怕过，害怕自己可能被一个杀人魔迫害;害怕被一个鬼魂杀害;害怕死神的镰刀随时降临到我的头上;害怕自己被别人唾弃;害怕自己被家人抛弃。但太累了，我害怕的东西太多了，让我太累了。既然大多都只是一些子虚乌有的幻想，那我为何还要去害怕呢？没人莫名其妙的追杀我，没有鬼魂莫名其妙纠缠我，朋友家人们都对我很好，我又有什么理由去担惊受怕呢？所谓害怕，只不过是让自己的退缩看起来更光明正大罢了。少年猛地扯掉身上缠绕着的绷带，也扯掉了一身黑暗。</p>
<p>黑暗无助地嘶吼着消失了，而森林随着黑暗，化为乌有。随之而来的，是一片广阔无垠的汪洋和清爽的风。在水天相接的地方，一轮红日冒出了头。少年承载着身后的星光，一步一步换慢的走向汪洋，身后只留一道长长的影子。是啊，黑暗过去了，朝阳升起来了，黎明还会远吗？
</p>
<p class="footer">少年无惧拉满弓</p>
</body>
</html>
- 效果展示
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
