css样式style写法

阅读量: 174 编辑

css样式style写法

  • CssHtmlJavaScript 是前端必学的三个基本技术

  • Html主要用于页面的内容展示,JavaScript主要用于页面元素之间的逻辑处理,Css主要是修饰的作用,比如颜色、位置、大小、效果等等

  • 就好比装修一个房子,Html就是房子中的家具、灯具、房间布局等等,JavaScript类似于隐藏起来的水电管线,比如通过开关(Html)可以控制(JavaScript)灯的亮与灭(Html)。而Css相当于房子内的装修的颜色、布局、物品的位置等等,主要起到修饰的作用

一、Css的三种写法

第一种,是直接写在 Html 的标签中,通过 style 属性编写,比如

<div style="color: red;">
 这是div
</div>

第二种,是直接写在 style 标签中,通过 class 属性选择器来使用,比如

<head>
    <style type="text/css">
        .mystyle{
            color: red;
            font-size: 50px;
            background-color: yellow;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div class="mystyle">
        这是div
    </div>
</body>

第三种,是直接写在一个 .css 文件中,然后在 .html 文件中引入即可

文件:02.css

.mydiv{
    color: red;
    font-size: 50px;
    background-color: yellow;
    border: 1px solid green;
    margin-top: 100px;
}

文件:02.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>css文件</title>
        <link href="./02.css" rel="stylesheet" type="text/css">

    </head>
    
    <body>
        <div class="mydiv">这是link的样式表</div>
    </body>
    
</html>