前端学习-CSS-01-CSS基础认知

学习时间：2022.11.06

CSS基础认知

CSS初识

<!-- 01-CSS初识.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>CSS初识</title>
    <style>
        /* CSS注释 */
        /* 这里写的都是CSS */
        /* 选择器{CSS属性} */
        /* 选择器作用：查找标签 */
        p {
            /* 文字颜色变为蓝色 */
            color: blue;
            /* 字变大 px指像素 */
            font-size: 60px;
            /* 背景颜色 */
            background-color: aqua;
            /* 改变宽度高度 */
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

01-CSS初识代码在浏览器中的显示

CSS引入方式

引入方式 书写位置 作用范围 使用场景
内嵌式 style标签中 当前页面 小案例
外联式 独立的CSS文件中，通过link标签引用 多个页面 项目
行内式 标签的style属性中 当前标签 配合js使用

内嵌式

CSS初识部分代码即内嵌式

外联式和行内式

<!-- 02-CSS外联式和行内式.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>
    <!-- 这里链入外部css文件 -->
    <!-- stylesheet是样式表 -->
    <link rel="stylesheet" href="./02-外联式.css">
</head>
<body>
    <p>这是一个p标签</p>
    <!-- 这里用行内式 -->
    <div style="color: blue;">这是一个div标签</div>
</body>
</html>


/* 02-外联式.css */
p {
    color: green;
    font-size: 40px;
}

02-CSS外联式和行内式代码在浏览器中的显示

posted @   ayubene  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
· 前端学习-CSS-05-背景相关属性
· 前端学习-CSS-03-字体和文本样式
· CSS基础
· 前端基础之CSS基础
· 关于我和前端的那些事(1)
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示