0613 HTML-day2

最新推荐文章于 2024-10-07 17:45:00 发布

青柠味的脉动1

最新推荐文章于 2024-10-07 17:45:00 发布

阅读量580

点赞数 17

文章标签： html 前端

本文链接：https://blog.csdn.net/zxt20020625/article/details/139720004

版权

01.字体

(1)字体样式

font-size 设置字体大小

1.浏览器的字体大小默认是16px

2.字体的大小可以继承

3.1em和父元素字体大小一样 2em是父元素字体大小的2倍

<style>
        .con {
            font-size: 30px;
        }
       
        .father {
            font-size: 30px;
        }

        span {
            font-size: 16px;
        }

        span {
            font-size: 2em;
        }
    </style>
<body>
    <div class="con">一退休大爷花了六块钱，竟买到“军事机密”</div>
    <div class="father">
        <span>鸟巢</span>
        <span>你好</span>
    </div>
</body>

(2)字体家族

font-family 字体家族

浏览器默认的字体是微软雅黑

<style>
        div {
            font-family: 宋体，楷体;
        }
        
        .wrap {
            font-family: Arial, 楷体;
        }
    </style>
<body>
    <div class="con">一天，张大爷在小区附近散步时，在一家废品收购站门口看到两个蛇皮袋子，里面装满了刚收购回来的纸质书本。张大爷饶有兴致地上前翻看，发现书籍崭新，还是涉及军事方面的，便花六块钱挑了四本。</div>
    <p>一天，张大爷在小区附近散步时，在一家废品收购站门口看到两个蛇皮袋子，里面装满了刚收购回来的纸质书本。张大爷饶有兴致地上前翻看，发现书籍崭新，还是涉及军事方面的，便花六块钱挑了四本。</p>
    <div class="wrap">hello world 你好呀</div>
</body>

(3)字体的粗细

font-weight设置字体粗细 norma（正常）bold（粗体）bolder（更粗）lighter（更细）同样也可以通过调节数字的形式来调节大小如:font-weight: 700;

<style>
       
        
        .con1 {
            font-weight: bold;
        }
        
        .con2 {
            font-weight: bolder;
        }
    
        .con3 {
            font-weight: lighter;
        }
        
        .con4 {
            font-weight: 700;
        }
        
        strong {
            font-weight: normal;
            font-weight: 400;
        }
    </style>
<body>
    <div class="con1">一天，张大爷在小区附近散步时</div>
    <div class="con2">一天，张大爷在小区附近散步时</div>
    <div class="con3">一天，张大爷在小区附近散步时</div>
    <div class="con4">一天，张大爷在小区附近散步时</div>
    <strong>你好</strong>
</body>

(4)字体风格

font-style字体风格

比如说一个斜体字你想让他变成正常的字体那么就可以通过类标记来实现

又想使用em加重语气,又不想让字体是斜体时,这是字体风格样式

style>
        /* 重点变成正常体 */
        
        em {
            font-style: normal;
        }
        /* 变成斜体 */
        
        h2 {
            font-style: italic;
        }
    </style>
<body>
    <!-- 又想使用em加重语气,又不想让字体是斜体时,这是字体风格样式 -->
    <em>DATA</em>
    <h2>刘亦菲很漂亮</h2>
</body>

(5)字体简写

我们可以通过一个font来实现对字体的大小、风格、样式、样式..的改变

<style>
        .con {
            font: italic 700 32px 楷体;
        }
    </style>
<body>
    <div class="con">耿爽:希望美国停止</div>
</body>

02.color样式设置

color设置的方法有

直接写颜色的英文，例如：blue（蓝色）、red（红色），总共可以表示17种颜色。
RGB表示法，使用红色(R)、绿色(G)、蓝色(B)的值设定颜色。例如：rgb(204,213,9) 或 rgb(100,100,100)。每个颜色的值范围在0~255之间。
比值表示法，使用百分比设定RGB值。例如：rgb(10%,10%,50%)。

十六进制表示法，使用十六进制颜色代码设定颜色。例如：#21439c 或 #03c（表示 #0033cc）或 #a（表示 #aaaaaa）。十六进制颜色代码以#开头，后跟6位十六进制数字，分别代表红、绿、蓝三色

<style>
        .con {
            /* 1.预定义的值 */
            color: blue;
            /* 二进制0 1
            八进制0-7
            十进制0-9
            十六进制0-9 a-f A-F */
            /* 2.十六进制表示法0-9 A-F 最小的是0 最大的是f */
            color: #000fff;
            /* 3.rgb red green blue 0-255 */
            color: rgb(255, 255, 255);
            /* 4.rgb alpha 透明度 0-1 透明度的0可以省略*/
            color: rgba(111, 213, 133, 0.5);
        }
    </style>
<body>
    <div class="con">河南省应急管理厅：河南重旱特旱面积不断扩大 323万亩地因旱无法播种</div>
</body>

03.链接伪类选择器

link未访问的连接

visited已访问的连接

hover悬停鼠标移动到目标元素

active已选定的链接

a标签的href不允许删除,如果href内容没有或者不正确,那么建议用#

<style>
       
        a:link {
            color: blue;
        }
      
        a:visited {
            color: aqua;
        }
       
        a:hover {
            color: brown;
        }
       
        a:active {
            color: blueviolet;
        }
    </style>
<body>
    <a href="#">百度一下</a>
    <a href="http://www.mi.com">小米我是米粉</a>
</body>

04.行高

line-height行高的设置

用法如下:在盒子里面通过控制line-height来调节在盒子里面上下的高度

<style>
        /* 单行文本在垂直方向居中-> */
        
        .box {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            line-height: 50px;
            text-align: center;
        }
    </style>
<body>
    <div class="box">你好漂亮</div>
</body>

05.水平对齐方式

width宽度

height高度

border盒子框的调节

text-align:center;水平居中

justify两端对齐

<style>
        .box {
            /* 盒子宽度 */
            width: 500px;
            height: 200px;
            border: 1px solid red;
            /* 水平对齐方式 */
            text-align: left;
            text-align: right;
            /* 水平居中 */
            text-align: center;
        }
        /* justify两端对齐 */
        
        .con {
            width: 100px;
            height: 200px;
            border: 3px solid red;
            text-align: justify;
        }
    </style>
<body>
    <div class="box">不要悲伤不要着急,犹豫的日子总会过去</div>
    <div class="con">不要悲伤不要着急,犹豫的日子总会过去</div>
</body>

06.文本

(1)文本修饰

text-indent首行缩进

text-decoration:line-through;删除线

text-decoration: underline;下划线

text-decoration: overline;上划线

<style>
        /* decoration  */
        
        .text {
            /* 删除线 */
            text-decoration: line-through;
        }
        /* 下划线 */
        
        .text1 {
            text-decoration: underline;
        }
        /* 上划线 */
        
        .text2 {
            text-decoration: overline;
        }
    </style>
<body>
    <span class="text">12222</span>
    <span class="text1">11111</span>
    <span class="text2">11122</span>
</body>

(2)文本修饰的重要使用

text-decoration: none;去掉下划线

text-decoration: underline;当鼠标悬停(经过时)显示下划线

<style>
        a {
            /* 去掉下划线 */
            text-decoration: none;
        }
        /* 当鼠标悬停(经过时)显示下划线 */
        
        a:hover {
            text-decoration: underline;
        }
    </style>
<body>
    <a href="#">百度一下</a>
</body>

(3)文本字符间的间距

letter-spacing字符间距设置

background-color背景颜色的设置

word-spacing单词间距

<style>
        /* 字符间距 */
        
        .con1 {
            letter-spacing: 30px;
            /* 背景颜色 */
            background-color: darkgrey;
        }
        /* 单词间距 */
        
        .con2 {
            word-spacing: 30px;
        }
    </style>
<body>
    <div class="con1">你们好你们好 hello hello</div>
    <div class="con2">你们好你们好 hello hello</div>
</body>

07.文字阴影

text-shadow: 水平位置垂直位置模糊距离阴影颜色

<style>
        .con {
            font-size: 60px;
            /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色 */
            text-shadow: -5px 0px red, ;
        }
    </style>
<body>
    <div class="con">今天又是元气满满的一天</div>
</body>