css学习01

最新推荐文章于 2024-09-10 22:58:41 发布

鼬君夏纪

最新推荐文章于 2024-09-10 22:58:41 发布

阅读量71

点赞数 1

分类专栏：网络前端代码的学习文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_47654910/article/details/128104664

版权

网络前端代码的学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css是写在`style`标签里面

在这里插入图片描述

01 体验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>Document</title>
    <style>
        /* css注释 */
        /* 这里写的都是css */
        /* 选择器{css属性} */
        /* 选择器：查找标签 */
        p{
            /* 文字颜色变成红色 */
            color: red;
            /* 字变大 px像素 */
            font-size: 30px;!
            /* 设置背景颜色 */
            background-color: green;
            /* 添加高度宽度 */
            width: 400px;
            height: 100px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

css学习

02 css引入方式

css的引入方式（3种）：
- 内嵌式
- 外嵌式
- 行内式

内嵌式	书写位置	作用范围	使用场景
内嵌式	css写在style标签中	当前页面	小案例
外联式	css写在单独的css文件当中，通过link标签引入	多个页面	项目中
行内式	css写在标签的style属性中	当前标签	配合js使用
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>
    <!-- 关系为样式表 -->
    <link rel="stylesheet" href="./my.css">
</head>

<body>
    <p>这是一个p标签</p>
    <div style="color: green;font-size: 30px;">这是一个div标签</div>
    <div></div>
</body>

</html>

css代码

/* 选择器 {} */
p{
    color: red;
}

样式
Snipaste_2022-11-29_14-18-39

03 类选择器

自我理解：通过类名实现对同一标签不同内容进行美化

<!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>
        .red{
            color:red;
        }
        .size{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 类选择器 类：定义和使用才能生效 -->
    <p>ppppppppp</p>
    <p class="red">这个p是什么颜色</p>
    <div class="red">这个标签也要变成红色</div>
    <div class="red size">这个标签也要变成红色也要变大</div>
</body>
</html>

效果图

Snipaste_2022-11-29_14-37-22

04 id选择器

结构：ID属性值{css属性名：属性值;}
作用：id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签只能有一个id属性值
一个id选择器只能选中一个标签

注意：id选择器是用来配合js使用的
代码部分

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=id, initial-scale=1.0">
   <title>Document</title>
   <style>
       /* 定义id选择器 */
       #bule{
           color: skyblue;
       }
   </style>
</head>
<body>
   <div id="bule">id选择器</div>
</body>
</html>

效果图
Snipaste_2022-11-29_14-55-16

05 选择器-通配符

结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意点
1. 开发过程中使用极少，只有在特殊情况才会用到
2. 可能用于去除标签默认的margin和pading

06 文字基本样式

字体粗细
字体倾斜
字体样式

代码

<!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-weight: 700;
            /* 字体倾斜 */
            font-style: italic; 
        }
        h1{
            font-weight: 400;
            /* 字体不倾斜 */
            font-style: normal;
            /* 字体样式 */
            font-family: 宋体;
        }
        p{
            /* 所有的样式可以写在一个font里面去 */
            font: italic 700 66px 宋体;
        }

    </style>
</head>
<body>
    <div>这是div</div>
    <h1>这是h1标题</h1>
    <p>这是个p</p>
</body>
</html>

Snipaste_2022-11-29_15-32-53

07 综合案例1

<!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;
        }
        /* 类选择器 */
        .center{
            text-align: center;
        }
        /* 设置颜色类 */
        .color1{
            color: red;
        }
        .color2{
            color: #87ceed;
            font-weight: 700;
        }
        /* 段落首行缩进 */
        .suojin{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">时间: 2021-01-26</span>
            <span class="color2">来源：区科协</span>
              <a href="">收藏本文</a>
        </p>
        <!-- 加一根线 -->
        <hr>
        <p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
        <p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
        <p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
    </div>
</body>
</html>

Snipaste_2022-11-29_16-50-58

08 综合案例2

<!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;
        }
        .goods{
            width: 234px;
            height: 300px;
            background-color: #fff;
            /* 标签居中 */
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }
        img{
            width: 200px;
        }
        .title{
            font-size: 14px;
            line-height: 25px;
        }
        .info{
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .money{
            font-size: 14;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <!-- div用来网页布局，一个页面可以使用无数次  如果使用div，尽量使用类修饰 -->
    <div class="goods">
        <img src="./md图片存放/Snipaste_2022-11-29_16-50-58.png" alt="" >
        <div class="title">九号平衡车</div>
        <div class="info">成年人玩具</div>
        <div class="money">1999元</div>
    </div>
    
</body>
</html>