css样式的引入方式及选择器

最新推荐文章于 2024-07-25 08:14:42 发布

miracle-boy

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量287

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/m0_49137360/article/details/117713225

版权

一、css样式引入方式

1.行内样式

行内样式也成为标签样式结合style，再加上对应样式。
行内样式添加在要修改样式的标签位置

<html>
<head>
<title>行内样式</title>
</head>
<body>
<h1 style="color:blue">标题标签</h1>
</body>
</html>

结果：标题标签

2.内嵌样式

页面样式，使用style标签嵌在head标签里

<style type="text/css">（样式设置）</style>
添加到head部分即可

实例：

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

结果: 标题标签

3.外链样式

外链样式是在head内使用link标签,把css的样式单独写在.css的文件中，通过link标签中的href属性进行引入。

<link rel="stylesheet" type="text/css" href="../css/css.css">
注意：文件的地址根据你css文件位置修改。

外链样式与内嵌样式比较
相同之处：它们都是在head内的。
不同之处：内嵌样式是在style里设置样式，外链样式是在link里引用css文件设置的样式。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外链样式</title>
	<link rel="stylesheet" type="text/css" href="../css/css.css">
</head>
<body>
	<h1>外链</h1>
</body>
</html>

 h1{
        color:orange;
    }

4.导入样式

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

导入样式与外链样式的操作十分相似，它们都是引用css文件设置的样式。

<style type="text/css" >@import url("../css/css.css");</style>

不同是它导入使用的是@import url("…\css\css.css"）引用

5.优先级

理论上认为优先级从高到低为：行内样式 > 内嵌样式 > 外链样式 > 导入样式

实际操作上优先级是：就近原则

二、选择器

基本语法结构：

选择器{

属性：属性值

}

2.1基本选择器

2.1.1标签选择器

标签选择器根据标签名获取。
它在style里要在前加标签名进行选择

div{color:blue}

实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css"> 
div{
color:blue
}  

	</style>
</head>
<body>
	<div id="first">这是一个div</div>
</body>
</html>

结果：这是一个div

2.1.2 id选择器

id选择器根据id属性进行获取。
它在style里对id属性选择时要在前加#进行选择

#first{background: yellow}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css"> 
/* id选择器 ——加#号 */
#first{
	color: yellow
}

	</style>
</head>
<body>
	<div id="first" >这是一个div</div>

</body>
</html>

结果：这是一个div

2.1.3类选择器

类选择器根据class属性进行获取
它在style里对class属性选择时要在前加 . （点）进行选择

.name{color: blue}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css"> 

	.name{
		color: green
	}
	</style>
</head>
<body>
	<div class="name">这是一个div</div>
</body>
</html>

结果：这是一个div

2.1.3通用选择器

通用选择器根据 * 号进行获取。（不建议）
通用选择器是对所有的属性进行选择设置

*	{color: red}

2.1.4基本选择器优先级

上述四种基本选择器是有优先级的！
优先级：id选择器 > 类（class）选择器 > 标签选择器 >通配符选择器

2.2包含选择器

后代选择器 (空格)

子选择器 (>)

相邻兄弟选择器 (+)

通用兄弟选择器 (~)

分组选择器（逗号选择器，使用逗号给多个标签使用样式）

2.3伪类选择器

伪类用于定义元素的特殊状态

同一个标签，不同的状态，有不同的样式，使用冒号表示

:link	链接点击之前
:visited-	链接被访问过
:hover	悬停
:active	鼠标点击标签但不松手
:focus	获得焦点

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
	    a:link{color: blueviolet}
	    a:visited{color:pink }
	    a:hover{color:lightskyblue }
	    a:active{color: indianred}
	</style>
</head>
<body>
	<a href="">链接</a>
</body>
</html

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

2.4伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

属性	描述
::before	伪元素可用于在元素内容之前插入一些内容
::after	伪元素可用于在元素内容之后插入一些内容

css2中的伪元素

属性	描述
:before	伪元素可用于在元素内容之前插入一些内容
:after	伪元素可用于在元素内容之后插入一些内容

2.5属性选择器

[attribute=value]   选择带有 attribute="value" 属性的所有元素
[attribute^=value]   选择其 attribute属性值以 “value” 开头的每个元素。
[attribute$=value]   选择其 attribute 属性值以 "value" 结尾的每个 <a> 元素。
[attribute]   选择带有attribute属性的所有元素
[attribute*=value]   选择其attribute属性值包含子串 "value" 的每个元素。

miracle-boy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css样式的引入方式及选择器

一、css样式引入方式1.行内样式行内样式也成为标签样式结合style，再加上对应样式。行内样式添加在要修改样式的标签位置<html><head><title>行内样式</title></head><body><h1 style="color:blue">标题标签</h1></body></html>结果：标题标签2.内嵌样式页面样式，使用.
复制链接

扫一扫