CSS基础

最新推荐文章于 2025-06-10 12:41:12 发布

哼哧哼哧敲代码

最新推荐文章于 2025-06-10 12:41:12 发布

阅读量130

点赞数

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/qq_68645460/article/details/127538327

版权

上一周一直在摆烂，惭愧惭愧

一般我们在学习的时候，写一些小的例子，scc都是放在head中的主要是非常的方便。

记住哈

选择器标签选择器

选择器主要是选择给网页的哪一些内容做出变化，也就是哪一些内容需要css的修饰

标签选择器主要是对网页内所选择的所有标签进行改变

body {
            background-color: #f5f5f5;
        }

body就是标签

类选择器就是在名字前面放一个“ . ”,然后再从标签中调用即可

id选择器主要是配合js使用，一般推荐使用类选择器

一般很少使用，后期会有用到的地方目前记住即可

css字体

对文字进行操作基本是 font- 。。。

这里就是对粗细进行操作

样式

family会列举很多字体，主要是怕浏览器不适配，所以会有很多字体

常见的字体如下

还有需要注意的是 css是覆盖的如果你对一个对象同时施加了两个相同属性的操作（例如颜色）

那么他会显示最后一次的操作，会覆盖掉前面的操作

这个连写目前不是很熟悉，需要后期加深了解

文本缩进，就是文章开头的两个空格！

这个效果不仅限于文本，图片什么的yeok

文本修饰

none 可以给超链接的字去掉下划线

行高再连写的时候是再size后＋/

<!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 {
            background-color: #f5f5f5;
        }
        .div {
            background-color: #fff;
            /* margin 是令div居中 */
            margin: 0 auto;
            width: 234px;
            height: 320px;
            /*text align是令div中的内容居中 */
            text-align: center;
        }
        .tupian {
            width: 160px;
        }
        .name {
            font-size: 14px;
            line-height: 25px;
        }
        .info {
            font-size: 12px;
            color: #ccc;
            line-height: 30px;
        }
        .level {
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <!-- div标签就是用来网页布局的，一个页面可能用无数次 ，尽量使用类名控制-->
    <div class="div">
        <img src="../1.jpg" alt="" class="tupian">
        <div class="name">姓名:江南</div>
        <div class="info">系别:空间系</div>
        <div class="level">等级:半步吞星</div>
    </div>
</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 {
            width: 800px;
            height: 600px;
            /* background-color: pink; */
            margin: 0 auto;
        }
        h1 {
            text-align: center;
        }
        .p {
            text-align: center;
        }
        .colorOne {
            color: #808080;
        }
        .colorTwo {
            color: #87ceeb;
            font-weight: 700;
        }
        a {
            /* 超链接去下划线 */
            text-decoration: none;
        }
        .pp {
            /* 段落内容首行缩进 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1>标题</h1>
        <p class="p"> 
            <span class="colorTwo">作者：李德</span>
            <span class="colorOne">日期 2022.10.26</span>
            <a href="#">学习练习收藏</a>
        </p>

        <hr>
        <p class="pp">学习内容</p>
        <p class="pp">学习内容</p>
        <p class="pp">学习内容</p>
    </div>
</body>
</html>

这个主要是网页文章的处理

今天的讲解也是有点摆烂，有点小疲惫，虚了

被封在家里好久，十分的难受！！！！1！！！！！！