CSS的导入方式

CSS导入HTML有三种方式

1、内联样式：在标签内部使用style属性，属性值是css键值对的值

<div style="color.red">Hello CSS</div>

2、内部样式：定义<style>标签，在内部定义css样式

<style type="text/css">
div{
color:red
}
</style>

3、外部样式：定义link标签，引入外部的css文件

<link rel="stylesheet" href="填css文件的路径">  

css文件
div{
color:red
}

CSS选择器

概念:选择器是选取需要设置样式的标签（元素）

div{ color:red; }

分类

1、标签选择器

元素名称{color:red} div{color:red}

2、id选择器

#id属性值{color:red} #name{color:red} <div id="name">hello css</div>

3、类选择器

.clss属性值{color:red} .cls{color:red} <div class="cls">hello css</div>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>

    div{//标签选择器 控制标签为div的标签
        color: red;
    }
    #div2{//id选择器 控制id为div2的标签
        color: blue;
    }
    .cls{//类选择器 控制类属性为cls的标签
        color: pink;
    }

</style>
<div>我是div1</div>
<div id="div2">我是div2</div>
<div class="cls">我是div3</div>
<span class="cls">我是span</span>
</body>
</html>

CSS的导入方式和选择器

CSS的导入方式

CSS导入HTML有三种方式

CSS选择器

案例