欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-04-27 22:33:07
...

一、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" 的每个元素。
 

 

 

 

 

相关标签： css html

上一篇： 很有头脑

下一篇： 我就想知道他是怎么被抓的？

推荐阅读