css样式引入方式和选择器

最新推荐文章于 2023-03-20 21:36:17 发布

周去白

最新推荐文章于 2023-03-20 21:36:17 发布

阅读量64

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wwqwwqwwq352/article/details/117571550

版权

css样式引入方式

引入方式一般有四种

行内样式，内嵌样式，外链样式，导入样式。

行内样式

配合style加上样式

<h1 style="color:red">这是一个标题标签</h1>

内嵌样式

在<head>里面加入<style>

<style type="text/css">
</style>

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
      h1{
      	color: blue;
      }
	</style>
</head>
<body>
	<h1>标签</h1>
</body>
</html>

外链样式

<link rel="stylesheet" type="text/css" href="CSS.css">

link标签放置在head标签内

把css的样式单独写在.css的文件中，通过link标签中的href属性进行引入

导入样式

导入式也是写在head标签内的style标签

@import url("CSS.css");

哪个靠的越近优先级越高

选择器

一般选择器

标签选择器，id选择器，类选择器，通用选择器

优先级：id>类>标签>通用

标签选择器

<style type="text/css">
      h1{
      	color: blue;
      }
	</style>

id选择器

<style type="text/css">
      #name{
      	color: blue;
      }
	</style>
</head>
<body>
	<h1 id="name">标签</h1>
</body>

类选择器

<style type="text/css">
      .name{
      	color: blue;
      }
	</style>
</head>
<body>
	<h1 class="name">标签</h1>
</body>

通用选择器

<style type="text/css">
      *{
      	color: blue;
      }
	</style>
</head>
<body>
	<h1>标签</h1>
</body>

包含选择器

子代选择器，后代选择器，分组选择器

子代选择器

<style type="text/css">
      div>p{
      	color: blue;
      }
	</style>
</head>
<body>
<p>外面的p标签</p>
<div>
    <p>这是里面p标签</p>
</div>
</body>

后代选择器

<style type="text/css">
      div li{
      	color: blue;
      }
	</style>
</head>
<body>
<p>外面的p标签</p>
<div class="user">
   <ul>
   	<li>1</li>
   	<li>2</li>
   	<li>3</li>
   	<li>4</li>
   	<li>5</li>
   </ul>
</div>
</body>

分组选择器

	<style type="text/css">
      .user,#user2,p{
      	color: blue;
      }
	</style>
</head>
<body>
<p>外面的p标签</p>
<div class="user">
   <ul>
   	<li>1</li>
   	<li>2</li>
   	<li>3</li>
   	<li>4</li>
   	<li>5</li>
   </ul>
</div>
<div id="user2">
   <ul>
   	<li>1</li>
   	<li>2</li>
   	<li>3</li>
   	<li>4</li>
   	<li>5</li>
   </ul>
</div>
</body>

伪类选择器

:link -------- 链接点击之前

:visited ------- 链接被访问过后

:hover ------- ”悬停“ 鼠标放到标签上

:active ------ "激活" 鼠标点击标签但是不松手

:focus ------- 某个标签获得焦点时候的样式

更多伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/* 让链接点击之前是红色 */
a:link{
color: red
}
/* 让链接点击之前是橙色 */
a:visited{
color: orange
}
/* 鼠标悬停时候是绿色 */
a:hover{
color: green
}
/* 鼠标点击但是不松手的时候是蓝色 */
a:active{
color: blue
}
</style>
</head>
<body>
<a href="demo04.html">点击</a>
</body>
</html>