css基础

最新推荐文章于 2024-07-12 14:38:32 发布

雪I霁

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量204

点赞数

分类专栏： HTML 文章标签： css 前端

本文链接：https://blog.csdn.net/zcjh_/article/details/121153572

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

引入方式

1.css引入方式

四种

行内样式内嵌样式外链样式导入样式

(1)行内样式

行内样式又叫做标签样式，它是在标签里面加上style属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
</head>
<body>
    <h2 style="color:red;text-align:center">这是一个标题</h2>
</body>
</html>

用style="样式"

样式后用":"

样式与样式间用";"隔开

(2)内嵌样式

样式写在style标签里面（style标签在head标签内）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style type="text/css">
        h2{
        color: blue;
        text-align: center;
        }
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
</body>
</html>

(3)外链样式

第一步：新建一个.css的文件，专门写css样式

第二步：head标签内写入link标签 (link标签可以存在在body标签内，但是不推荐使用)

第三步：link 里href属性将css文件引入（路径（绝对路径和相对路径））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <link rel="stylesheet" type="text/css" href="地址">
</head>
<body>
    <h2>这是一个标题</h2>
</body>
</html>

(4)导入样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style type="text/css">
    @import url("地址");
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
</body>
</html>

雪I霁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础

引入方式1.css引入方式四种行内样式内嵌样式外链样式导入样式(1)行内样式行内样式又叫做标签样式，它是在标签里面加上style属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css样式</title></head><body> <h2 style..
复制链接

扫一扫