CSS基础样式

L_X_zhao

已于 2024-06-14 20:29:27 修改

阅读量431

点赞数 13

文章标签： css 前端

于 2024-06-13 22:07:32 首次发布

本文链接：https://blog.csdn.net/L_X_zhao/article/details/139665223

版权

CSS

一、CSS书写位置

（1）行内式：直接在标签中书写样式，优势：书写方便；缺点：当代码过长时，不利于代码的后期维护；在正式开发中不建议使用！

<div style="color: red;">这是一段普通的文字</div>

（2）内嵌式：在head中添加syle标签，在其中书写各个标签是样式，优势：样式集中，便于管理；缺点：当代码过多时，css和HTML写在同一个页面总体代码过长；正式开发不建议使用。

<head>   
 <style>
        .box{
            width: 100px;
            height: 100px;
            color: blue;
            border: solid 3px red;
        }
    </style>
</head>


<body>
    <div class="box">一个小盒子</div>
</body>

（3）链入式：css与html文件各成一体，便于管理与后期代码的维护，推荐使用

<!-- style.css 中写的是关于本html的样式 -->
<link rel="stylesheet" href="css/style.css">





<div class="box">一个小盒子</div>

二、字体样式

学习了字体样式，我们就可以对字体进行美化，让他们变得更加的漂亮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{
        /* 设置字体颜色 */
        color: rgba(107, 206, 30,0.5);
        /* 设置字体大小 */
        font-size: 40px;
        /* 设置字体粗细 */
        font-weight: 300;
        /* 设置字体美化 */
        font-family: "华文彩云";
    }
    </style>
</head>
<body>
    <div>本人喜欢玩部落冲突</div>
</body>
</html>

三、文字首行缩进

使用text-indent：2em表示首行缩进两个字符，在开发中比较实用。

<head>
 <style>
        .a{
            text-indent: 2em;
        }
 </style>
</head>



<body>
      <div class="a">首行缩进</div>
</body>

四、文字水平居中对齐

首先对文本添加一个div盒子，并设置class类选择器，利用内嵌式对盒子设置对齐方式。

垂直居中对齐：line-height的属性值设置成和盒子高度一致，即可实现。

水平居中对齐：text-align:的属性值设置为center，即可实现；

当属性值设置为right实现右对齐；

当属性值设置为left实现左对齐；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="one">
        这是一段文字
    </div>
</body>
</html>

五、对文本加线

text—decoration：文本加线，后面可以赋多个值，用于多种效果，用空格隔开

none：无线

underline：下划线

overline：上划线

line—through：删除线

其中a标签默认有下划线，我们可以对a标签设置text-decoration：none将其去掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">点击跳转</a>
</body>
</html>

实训面试小总结

今天实训课上进行了模拟面试，我有幸去其他小组进行面试模拟，其中也受益匪浅，每当小组结束以后，老师都会对其有针对性的进行点评，让我们了解在以后的面试过程中会出现的各种问题，提前给我们进行讲解，这也是一种锻炼，我从中总结一下几点：

1、我们要以平等的心态去迎接每一场面试，公司和面试者是双向选择的关系。

2、一定要提前准备好各种工作，以便于应对突发情况。

3、行为举止一定大方得体，有礼貌，实事求是，积极进取。

4、在技术方面一定要有扎实的基础，遇到忘记或者不会的知识一定如实回答。

总之，想要得到公司HR的认可，不仅要有过硬的技术，还需要善于沟通，便于团队合作。

L_X_zhao

关注

13
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础样式

（1）行内式：直接在标签中书写样式，优势：书写方便；缺点：当代码过长时，不利于代码的后期维护；在正式开发中不建议使用！（2）内嵌式：在head中添加syle标签，在其中书写各个标签是样式，优势：样式集中，便于管理；缺点：当代码过多时，css和HTML写在同一个页面总体代码过长；正式开发不建议使用。（3）链入式：css与html文件各成一体，便于管理与后期代码的维护，推荐使用。
复制链接

扫一扫