CSS---如何引用样式表

Cascading Style Sheet 层叠样式表

html的属性值是不带单位的;

css的属性值是有单位的,以像素(px)为单位,通常情况下必须带单位;

1.如何在html结构中引入css样式

①行内样式(临时做测试用)

每一个html标签都有style属性,例

<div style="300px; height:300px; bgcolor:red"></div>   //这是一个高300像素,宽300像素,背景是红的div盒子;
<p style="solor:blue; font-size:14px; "></p>   //表示段落中的文字颜色为蓝色,字体大小为14像素

内嵌样式表(常用)

在<head>标签中加入<style>标签,例:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: rgba(255,0,0,0.8);
        }
    </style>
    
<title>初始文档</title>
</head>
<body>
    <div></div>
</body>
</html>

③外部样式表(常用),例:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./***.css">
    <title>初始文档</title>
</head>
<body>
    <div></div>
</body>
</html>

④导入样式表

导入样式表起到管理css样式表的作用,适合大型、超大型的网站;

格式:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>初始文档</title>
    <style type="text/css">
        @import url(***.css);
        div{
            width: 100px;
            height: 100px;
            background: rgba(255,0,0,0.8);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

使用导入样式表时,@import是样式标签,所以必须放到css文件中的最顶端,或者放到内嵌样式表的最顶端;

常用的样式表有内嵌式外部样式

原文地址:https://www.cnblogs.com/wells33373/p/8126613.html