CSS3学习随记1⃣️

CSS3

关于怎么在html文件中使用CSS,总共有4种方法:行内样式、内嵌样式、链接样式和导入样式。

1.行内样式

最直观的样式,但是维护难度大。


<html>
<head>
    <meta charset="utf-8">
    <title>CSS学习之行内样式title>
head>
<body>
<p style="color:red">这里使用的是行内样式p>
body>
html>

行内样式

2.内嵌样式

内嵌样式是指把< style>标签内嵌到< head>标签中


<html>
<head>
    <meta charset="utf-8">
    <title>CSS学习之内嵌样式title>
    <style>
        --可以看到CSS标签在这里-->
        p {
            color: #39f;
            font-size: 30px;
        }
    style>
head>
<body>
<p>这里使用的是内嵌样式p>
body>
html>

内嵌样式

3.链接样式

链接样式是最常见的样式,它优点有很多,瘦身html文件、同一个css文件能被多个不同的html文件使用等


<html>
<head>
    <meta charset="utf-8">
    <title>CSS学习之链接样式title>
    
    <link rel="stylesheet" type="text/css" href="text.css">
head>
<body>
<p>这里使用的是链接样式p>
body>
html>

p {
    color: #994422;
    font-size: 20px;
}

这里写图片描述

4.导入样式

与链接样式不同的是,导入样式会在html初始化时,将css文件导入到html文件中,作为html文件的一部分


<html>
<head>
    <meta charset="utf-8">
    <title>CSS学习之导入样式title>
    <style type="text/css">
        @import "text.css"
    style>
head>
<body>
<p>这里使用的是导入样式p>
body>
html>
--text.css-->
p {
    color: #003728;
    font-size: 23px;
    font-style: italic;
}

这里写图片描述

你可能感兴趣的:(CSS3)