博客

最新推荐文章于 2024-09-12 16:25:48 发布

无梦相赠X

最新推荐文章于 2024-09-12 16:25:48 发布

阅读量172

点赞数 2

文章标签： css javascript

本文链接：https://blog.csdn.net/weixin_54603642/article/details/112794590

版权

课堂笔记

引入样式

1.行内样式

   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8">
   		<title></title>
   	</head>
   	<body>
   		<p class="red" style="color: gold;">北国风光 </p>
   	</body>
   </html>

2.内嵌样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css优先级</title>
		<style type="text/css">
			.red{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="red" >北国风光 </p>
	</body>
</html>

3.外链样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css优先级</title>
		<link rel="stylesheet" href="./style02.css">
	</head>
	<body>
		<p class="red">北国风光，千里冰封，万里雪飘</p>
	</body>
</html>

.red{
	color:green;
}

rel：指定资源跟页面的关系
href：资源的地址

4.导入样式

@import "./sheet.css";

## css选择器

通配符选择 * *{ color:red}
id 选择器    # #myp {color:orange;}
class 选择器  . .name{ color :red;}
类型  标签名 p {font-size:48px;}
```html
<!DOCTYPE html>
<html>
 <head>
 	<meta charset="utf-8">
 	<title>css的选择器</title>
 	<style>
 		/* *通配符选择器，代表是页面中的任意元素 */
 		* {color:red;}
 		/* 通过标签名作为选择器，选择到一个类型的元素 */
 		p {color:green;}
 		/* .+类名 代码的类选择  */
 		.odd{ background-color: orange;}
 		/* #+id名称 id选择器 */
 		#myli{ background-color: black;}
 		
 	</style>
 </head>
 <body>
 	<h1>css的选择器</h1>
 	<p>应用css样式</p>
 	<ul>
 		<li id="myli">包含选择器</li>
 		<li class="odd">id选择器</li>
 		<li>class 类选择器</li>
 		<li class="odd">类型 标记选择器</li>
 		<li>通配符选择器</li>
 	</ul>
 </body>
</html>
```

css颜色表示法

单词表示法
十六进制表示法
RGB三原色表示法（范围0-255）

无梦相赠X

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
博客

课堂笔记引入样式1.行内样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p class="red" style="color: gold;">北国风光 </p> </body&gt
复制链接

扫一扫