前端的第三天（选择器、文本样式、调试工具）

最新推荐文章于 2024-08-16 20:24:29 发布

纸黑墨白

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量90

点赞数

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_56901161/article/details/121164413

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文介绍了前端开发中CSS的基础知识，包括选择器如标签选择器、类选择器、id选择器和通配符选择器的用法，详细讲解了字体和文本样式的设置，如line-height和颜色取值。此外，还探讨了如何利用Chrome调试工具进行网页调试，通过实际的新闻网页和卡片居中案例展示了应用技巧。

摘要由CSDN通过智能技术生成

前端的第三天（选择器、文本样式、调试工具）

在这里插入图片描述

一、基础认知

1.CSS初识

CSS：层叠样式表
在这里插入图片描述

2.CSS引入方式

CSS引入方式

二、基础选择器

1.标签选择器

选择器的作用
在这里插入图片描述

2.类选择器

类选择器

3.id选择器

在这里插入图片描述
类与id的区别

4.通配符选择器

通配符选择器

三、字体和文本样式

1.字体样式

在这里插入图片描述

2.文本样式

在这里插入图片描述

3.line-height行高

在这里插入图片描述

4.颜色常见取值（拓展）

在这里插入图片描述

四、Chrome调试工具

1.Chrome调试工具操作

在这里插入图片描述

2.Chrome调试工具小结

在这里插入图片描述

五、综合案例

1.综合案例1-新闻网页案例

在这里插入图片描述

2.综合案例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>小米官网卡片</title>
    <style>
        .div0 {
            width: 500px;
            height: 350px;  
            margin: 0 auto;
            background-color: #f5f5f5;
        }
        .div1 {
            width: 234px;
            height: 300px;
            background-color: #ffffff;
            margin:0  auto;
        }
        .div2 {
            margin:0 auto;
            text-align: center;
        }
        .img {
            width: 160px;
            height: 160px;
        }
        .div3 {
            font:14px/25px 微软雅黑;
            color: black;
        }   
        .div4 {
            font: 12px/30px 微软雅黑;
            color: #cccccc;
        } 
        .div5 {
            font: 14px 微软雅黑;
            color: #ffa500;
        } 
    </style>
</head>
<body> 
    <div class="div0">
    <div class="div1">
        <div class="div2">
            <br>
            <img class="img" src="./九号平衡车.png">
            <div class="div3">九号平衡车</div>
            <div class="div4">成年人的玩具</div>
            <div class="div5">1999元</div>
        </div>
    </div>
    </div>
</body>
</html>