HTML-CSS的引用方式_html 引用css-优快云博客

本文链接：https://blog.youkuaiyun.com/XIsdearestY/article/details/147401943

CSS（cascading style sheets,层叠样式表单）简称样式表，是用于（增强）控制网页样式。样式就是格式，在网页中，如文字的大小、颜色以及图片位置等

样式配置的优先级：行内样式>id选择器的样式>类选择器的样式>标签选择器的样式

（注！！）在没有优先级存在的情况下，样式配置遵循后来居上原则（层叠）

1.行内样式

行内样式是各种引用CSS方式中最直接的一种，也叫内联样式。

格式为：

<标签 style="属性：属性值；属性：属性值...">

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css应用样式</title>
</head>
<body>
    <p style="font-size:20px;color: brown;">就这？</p>
</body>
</html>

运行结果：

2.id选择器样式

id选择符用来对某个单一元素定义单独的样式。每个id选择符只能在HTML页面中使用一次，针对性更强。定义id选择符时要在id名称前加上一个“#”号。

格式为：

<style type="text/css">

#id名1{属性：属性值；属性：属性值}

</style>

代码示例：

<!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>
        #ay{color: green;}
    </style>
</head>
<body>
     <p style="font-size:20px;" id="ay">就这？</p>
</body>
</html>

运行结果：

3.类选择器的样式

class类选择符是用来定义HTML页面中需要特殊表现的样式，也称为自定义选择符。样式表中的类选择符必须在class属性值前加“.”。

格式为：

<style type="text/css">

.类名称1{属性：属性值；属性：属性值}

</style>

代码示例：

<!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>
        /* #ay{color: green;} */
        .ay1{color: red;}
    </style>
</head>
<body>
     <p style="font-size:20px;" id="ay" class="ay1">就这？</p>
</body>
</html>

运行结果：

4.标签选择器

标签选择符是指以文档对象模型作为选择符，即选择某种HTML标签为对象来设置其样式规则。标签选择符就是网页元素本身，定义时直接使用元素名称。

格式为：

{

/*css代码*/

}

其中,E网页元素，自行选择元素即可。

代码示例：

<!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>
        /* #ay{color: green;} */
        /* .ay1{color: red;} */
        body{
            color: blue;
        }
    </style>
</head>
<body>
     <p style="font-size:20px;" id="ay" class="ay1">就这？</p>
</body>
</html>

运行结果：