当前位置：首页 > news >正文

CSS样式的4种引入方法

news 2024/9/25 5:19:38

1.行内样式

1.只能影响标签内的样式

2.行内样式可以应用在<body>标记内的所有子标记包括<body>标记在内，但是不能用在<head><title><meta>中

3，行内样式的标记优先级最高

语法：直接再标记内写style属性

<html style="属性1:属性值1;属性2:属性值2;属性3:属性值4;"></html>

样例：

为字体颜色位置为红色，和对齐方式为居中

<p style="color:red; text-align: center;">My aunt Jennifer is an actress.</p>

效果：

2.内嵌式

1，用<style>标记设置样式的方法称为内嵌式样式

2.<style>标记用来声明样式

3.type属性表示CSS的MIME编码

4.注意是奖<style>标记放到head中

语法：

<style>选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>

样例：

效果：

3.链接式

1.链接式：是指引用外部独立的CSS文件，定义了外部样式之后，网站中的所有网页都可以应用次样式，这个方法最为常用

2.href:表示外部样式表文件的路径

rel:表示浏览器应用的CSS文件

type:属性表示CSS的MIME编码

语法：注意这个是写到head中

<link rel="stylesheet" href="路径名" type="text/css">

样例：

先建一个css文件，为class选择器写一个样式

然后直接用类选择器，为其设置属性值为p2

效果：

4.导入式

1.与<link>标记类似，使用@import可以导入外部样式，但是@import只能放在<style>标记中使用，而且必须放在其他css样式之前

语法：

<style>@import url(外部样式的路径);
</style>

样例：

在建一个a.css文件，写入类选择器p3

再加上，下面箭头指向的语句

效果：

完整code:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 导入式 */@import url(a.css);h1{text-align: center;color: red;}/* 内嵌式样式  */.p1{color: blue;text-align: center;}</style><!-- 链接式 --><link rel="stylesheet" href="CSS样式的4种引入方式.css" type="text/css">
</head><body><h1>Always young</h1><!-- 行内样式 --><p style="color:red; text-align: center;">My aunt Jennifer is an actress.</p><!-- 内嵌式样式 --><p class="p1">She must be at least thirty-five years old.</p><!-- 链接式 --><!-- 直接用类选择器p2 --><p class="p2">in spite of this,she often appears on the stage as a young girl. </p><!-- 导入式 --><!-- 直接用类选择器p3 --><p class="p3">Jennifer will have to take part in a new play soon.</p><!-- 后面的语句都是用的内嵌式的类选择器 --><p class="p1">This time,she will be a girl of seveteen.</p><p class="p1">In the play,she must appear in a bright red dress and long black stockings.</p><p class="p1">Last year in another play,she had to wear short socks and a bright orange-coloured dress.</p><p class="p1">If anyone ever asks her how old she is,she always answers'Darling,it must be terrible to be grown-up'</p><p class="p1"></p><p class="p1"></p></body>
</html>