CSS-style的三种方式(内联、嵌入、外部)

最新推荐文章于 2024-05-07 06:25:59 发布

我自是年少韶华倾负

最新推荐文章于 2024-05-07 06:25:59 发布

阅读量3.3w

点赞数 18

本文链接：https://blog.csdn.net/qq_38345598/article/details/79181842

版权

一、内联式

一般都写在特定的标签元素里面来实现对元素的修改。例如将人生应该奋斗不止的字体颜色设置为红色

<p style="color: red;">人生应该奋斗不止</p>

并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

二、嵌入式

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如下面的代码将文字设置为粉色：

<!DOCTYPE  HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
	<head>
		<meta http-equiv="content-type"content="text/html; charset=UTF-8" />
		<title>这是演示实例</title>
		<style type="text/css">
			p{
				color:pink;
			}
		</style>
	</head>
	<body>
		<p >人生应该奋斗不止</p>
	</body>
	</htmL>

三、外部式

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />

<!DOCTYPE HTML>
		<html>
		<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>嵌入式css样式</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<!---
		   href后面跟的是css的文件    rel="stylesheet" type="text/css"为固定格式
		  --->
		   
		</head>
		<body>
			 <pre>吉日兮辰良，穆将愉兮上皇。 
		     <span>抚长剑兮玉珥，璆锵鸣兮琳琅。</span> 
		      瑶席兮玉瑱， 盍将把兮琼芳。 
		<span>蕙肴蒸兮兰藉， 奠桂酒兮椒浆。 </span> 
		扬枹兮拊鼓， 疏缓节兮安歌，陈竽瑟兮浩倡。 
		<span>灵偃蹇兮姣服，芳菲菲兮满堂。 </span> 
		五音纷兮繁会， 君欣欣兮乐康。 ！</pre>
		</body>
		</html>

四、选择器(标签选择器，类选择器，ID选择器,全部选择器,子选择器)

定义：每一条css样式声明（定义）由两部分组成，形式如下：

选择器{
样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码中的“body”就是选择器。

1标签选择器(就是直接对标签进行修改) ----权值为1

标签选择器其实就是html代码中的标签。如代码中的<html>、<body>、<h1>、<p>、<img>。

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

2类选择器(.+类选择器的名字+修改)-------权值为10

<head>
	
	   <style type="css/text">
	     .color
		 {
		 color:red;
		 
		 }
		 </style >
	<head>
	<body>
	<p class="color">人生应该奋斗不止</P>
	</body>

3ID选择器(#+ID选择器的名字+修改)------权值为100

在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

   <head>
         <style type="css/text">
            #color
               {
			    color:red;
				}
		</style>
	</head>
		<body>
		<p id="color">人生应该奋斗不止</p>
		
		</body>

4全部选择器(*+修饰)//对于全部的标签元素进行修改

<head>
         <style type="css/text">
		    *{color:red;
			}
		</style >
	  </head>
	  <body>
	  <p>人生应该奋斗不止</p>

5子选择器(父类名字+>+子类名字或父类名字+空格+子类名字）

<style type="text/css">
				.first span{color:red;}

				.food>li{
					border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/	
				}
		</style>

6伪选择符(对于标签的状态的某种修饰，比如鼠标滑过标签)

 a:hover{color:red;}

ID选择器与类选择器的比较

相同点：可以应用于任何元素
不同点：1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

我自是年少韶华倾负

关注

18
点赞
踩
54

收藏

觉得还不错? 一键收藏
0
评论
CSS-style的三种方式(内联、嵌入、外部)

一、内联式一般都写在特定的标签元素里面来实现对元素的修改。例如将人生应该奋斗不止的字体颜色设置为红色人生应该奋斗不止并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：这里文字是红色。二、嵌入式嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。如下面的代码将文字设置为粉
复制链接

扫一扫