css之文本编辑

文章目录

css之文本编辑

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>体验csstitle>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        /* 给标签改样式 */
      
        /* 类选择器 */
        .red {
            color: red;
        }
        
        /* 类选择器多个类名 */
        .font20 {
            font-size: 20px;
        }

        /* id选择器  样式#定义 结构id来调用 只能调用一次*/
        #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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

效果展示

字体标签

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>
        /* 字体倾斜 加粗 字号16px 字体 */
        div {
            /* font-style: italic; 
            font-weight: 700;
            font-size: 16px;
            font-family: Arial, Helvetica, sans-serif; */
            font: italic 700 16px Arial;
        }
    style>
 
head>
<body>
    <div>三生三世十里桃花，一心一意万行代码div>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果展示

文本属性

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>
        /* color: brown; */
            /* color: #ff0000; */
            /* color: hsl(0, 100%, 50%);  */
            /* 文本对齐 */
            /* text-align: center;*/
            /* 文本缩进 2个字*/
            /* text-indent: 2px; */
            /* 文本修饰 下划线*/
            /* text-decoration: underline; */
            /* 行与行间距 */
        div {
           line-height: 100px;
        }
    style>
head>
<body>
    <div>文本div>
        <p>文本文本p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

效果展示

样式表

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 {
            color: red;
        }
        
    style>
    <link rel="stylesheet" href="style.css">
head>
<body>
    <div>内部样式表,就是在html页面内部写div>
    <p style="color: red;">行内样式表p>
    <h1>外部样式表h1>
    <hr>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果展示

案例

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>
        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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

效果展示

相关阅读:
Arduino驱动ME007-ULS防水测距模组（超声波传感器）
HDFS架构设计理念以及优缺点
 EasyNVR视频边缘计算网关硬件设备拔电关闭后不能自动重启的原因分析
 【springboot】4、容器功能
 postgres源码解析38 表创建执行全流程梳理--3
1、VMware虚拟机及网络配置
 .net MVC下鉴权认证(二)
rst 格式文档编译方案
 企业信用等级评价认证是什么
 js的算法-插入排序（直接插入排序）
原文地址：https://blog.csdn.net/qq_51670115/article/details/126687602