HTML学习笔记6——导入css样式

最新推荐文章于 2024-04-25 14:21:48 发布

松光鱼

最新推荐文章于 2024-04-25 14:21:48 发布

阅读量568

点赞数 16

分类专栏： HTML 文章标签： html 学习笔记 css 前端

本文链接：https://blog.csdn.net/qq_68268403/article/details/137127961

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css（Cascading Style Sheet）层叠样式表

CSS的特点：内容与表现分离；丰富的样式；方便修改；减少网页代码量

<!-- 语法规则-->
<!-- 在head中建个style样式（双标签），在中样式中写选择器写声明。 -->
    <style>
        选择器{
            声明；
            属性：值；
            特征：各种特征；
        }
    </style>

HTML导入css

内联样式——选择器，作用于外部

标签选择器	p{font-size:16px;color:red;}
类选择器	.class{font-size:20px;color:#096;}
ID选择器	#mingzi{font-size:20px;color:black;}

1、标签选择器用一般的段落标签p，标题标签h都可以；

2、类选择器使用时要在标签中定义类名class="tonglei"，调用时.tonglei{}，用于多个、一类；

3、ID选择器要定义id="zzc",调用时#zzc{}，用于一个、特殊。

作用于内部

在标签内部，叫内部样式，只作用于这一个标签，优先级大于内敛样式。

<h1 style="font-size:50px;color:red;">内容</h1>

代码示例

<!DOCTYPE html>    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识CSS</title>

    <style>
        /* 标签选择器 */
        h1{
            color:red;
            font-size: large;
        }
        /* 类选择器 */
        .jmm{
            color:brown;
        }
        /* ID选择器 */
        #kkk{
            color:blueviolet;
        }
    </style>

</head>
<body>
    <h1>相知于冬雪，风雨奕同周</h1>
    <!-- 作用于内部 -->
    <h2 style="font-size: large;color:red;">椰汁糕</h2>
    <p class="jmm">向全世界安利最好的诗情画奕</p>
    <p class="jmm">诗情画奕szd</p>
    <p id="kkk">4781</p>
</body>
</html>

效果展示

外联样式——主体和样式分开

新建两个文件，一个是.html用来写主题，一个是.css用来添加样式

导入1	在head中	<link rel="stylesheet" href="./css文件名.css">
导入2	在head中的style中	@import url(./css文件名.css);

link是链接式，属于XHTML。

@import是导入式，属于css2.1,对不符合css2.1的浏览器无用，所以不常用。

代码示例

<!DOCTYPE html>    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导入css</title>
    <link rel="stylesheet" href="./222.css">
    <!-- <style>
        @import url(./222.css);
    </style> -->
</head>
<body>
    <h1>相知于冬雪，风雨奕同周</h1>
    <p class="jmm">向全世界安利最好的诗情画奕</p>
    <p class="jmm">诗情画奕szd</p>
    <p id="kkk">4781</p>
</body>
</html>

222.css中

效果展示

优先级

内部样式最大，内联和外联取决于在html中谁在下面写，在下面的起作用，上面的被覆盖。

总结说距离标签越近的优先级越大。

松光鱼

关注

16
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记6——导入css样式

2、类选择器使用时要在标签中定义类名class="tonglei"，调用时.tonglei{}，用于多个、一类；@import是导入式，属于css2.1,对不符合css2.1的浏览器无用，所以不常用。内部样式最大，内联和外联取决于在html中谁在下面写，在下面的起作用，上面的被覆盖。新建两个文件，一个是.html用来写主题，一个是.css用来添加样式。在标签内部，叫内部样式，只作用于这一个标签，优先级大于内敛样式。1、标签选择器用一般的段落标签p，标题标签h都可以；总结说距离标签越近的优先级越大。
复制链接

扫一扫