CSS基础认知

CSS语法规则

在vscode之中CSS写在“head”之中“title”之下使用“style”标签

<!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>
        .a{
            background-color: cadetblue;
            border: chartreuse;
            border-width: 5px;
            width: 500px;
            height: 500px;
        }
        p{
            color: blanchedalmond;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div class="a">
        <p>helloword</p>
    </div>
</body>
</html>
CSS基础认知插图

CSS初次体验

  • 常见属性
CSS常见属性作用
color文字颜色
font-size字体大小
background-color背景颜色
width宽度
height高度

CSS引入方式

  • 内嵌式

CSS写在style标签中

提示:style标签虽然可以写在页面任意位置,但是通常约定写在head标签中

  • 外链式

CSS写在一个单独的.css文件中

提示:需要通过link标签在网页中引入

  • 行内式

CSS写在标签的style属性中

提示:基础班不推荐使用,之后会配合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=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color: chartreuse; text-align: center; font-size: 30px;">你好</p>
</body>
</html>
CSS基础认知插图1

CSS引入方式特点

引入方式书写位置作业范围使用场景
内嵌式css写在style标签中当前页面小案例
外链式css写在单独的css文件中,通过ink标签引入多个页面项目中
行内式css写在标签的style属性中当前标签配合js使用
© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏 分享
评论 抢沙发

请登录后发表评论