前端网页学习4（css三种样式表和Chrome调试工具）

最新推荐文章于 2024-05-22 19:36:03 发布

养羊得亿

最新推荐文章于 2024-05-22 19:36:03 发布

阅读量118

点赞数 1

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

本文链接：https://blog.csdn.net/qq_40551957/article/details/113470179

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

三种样式表

1) 行内样式表

<div style=”color:pink”></div>

简单，但是作用范围是单个标签
2) 内部样式表（嵌入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css体验学习</title>
    <style>
        /* 内部样式 */
        p {
            color: red;
            font-size: 12;
        }
    </style>
</head>
<body>
    <p>文本</p>
</body>
</html>

作用范围是整个HTML页面
style标签实际上可以在任意位置
3) 外部样式表
1新建Css文件
2链接css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style008.css">
    <!-- 链接外部css文件 -->
</head>
<body>
    gaoyang
    <p>gaoyang</p>
    <div>gaoyang</div>

</body>
</html>

3作用范围是所有链接了css的HTML
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

Chrome调试工具

打开浏览器F12/右键检查
Element（元素）
小技巧
a) Ctrl+滚轮调大小
b) 箭头定位
c) Ctrl+0复原浏览器大小
d) 没有样式（类错误）
e) 黄色三角感叹号/划掉说明代码错误

养羊得亿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端网页学习4（css三种样式表和Chrome调试工具）

三种样式表1) 行内样式表<div style=”color:pink”></div>简单，但是作用范围是单个标签2) 内部样式表（嵌入）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫