前端笔记css（1）----css使用方法

最新推荐文章于 2022-08-09 14:06:48 发布

一粒程序米

最新推荐文章于 2022-08-09 14:06:48 发布

阅读量207

点赞数

分类专栏：前端CSS

本文链接：https://blog.csdn.net/weixin_43449246/article/details/117519981

版权

前端CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css基础</title>
		
		<!-- 外部样式：把css代码写在一个独立的css文件中 在head标签引用-->
		<link rel="stylesheet" type="text/css" href="css基础.css"/>  
		 
	</head>
	<body>
		<h1>一粒程序米</h1>
		<ul>
			<li>可爱</li>
			<li>善良</li>
			<li>有趣</li>
		</ul>
		<p>滑稽</p>
		<h2><del>好吃懒做</del>不存在的</h2>
		<h3 style="color:red;">三分钟热度</h3> <!-- 行内样式：在开始标签内添加style样式属性 -->
	</body>
</html>	

<!-- 笔记：
css引用放在html的head标签内，格式为
 <style type="text/css">
	选择器 {声明(属性:值)}
</style>

例如：
 <style type="text/css">
	h1 {color:pink;font-size:100px;}  意思是把h1的颜色改成粉红色,文字大小改成200PX
</style> -->

<!-- 也可以多个选择器使用同一个样式 -->
<!-- <style type="text/css">
	选择器1,选择器2,... {声明(属性:值)}
</style> -->

 <!-- css的注释格式 -->
<!-- 
 /* 注释 */
 -->
 
 <!-- 引用方式：4种 -->
 
 <!-- ①行内样式：在开始标签内添加style样式属性 -->
<!-- 如：<h3 style="color:red;">三分钟热度</h3> -->
<!-- 不便于HTML代码维护，不建议大量的使用 -->


 <!-- ②内部样式(嵌入样式):把css样式写在head标签内的style标签里 -->
<!-- 如：<head>
		<meta charset="utf-8">
		<title>css基础</title>
		<style type="text/css"> /* 内部样式(嵌入样式):把css样式写在head标签内的style标签里 */
			h1,p,h2 {font-size:50px;}
			ul {color:blue;font-size:50px;}
			h1{color:pink;}
		</style>
	</head> -->
<!-- 有些低版本的浏览器可能识别不到嵌入样式，导致后期把这个样式显示了出来，影响了页面的显示，
 高版本的浏览器会忽略style里的HTML注释标签-->
<!-- 所以一般会在style样式外面加一个HTML的注释   <style> 注释	</style> -->
<!-- 如： -->
 <style type="text/css">                               
			<!--h1,p,h2 {font-size:50px;}-->
			<!--ul {color:blue;font-size:50px;}-->
			<!--h1{color:pink;}--> 
		
 </style> 

<!-- ③外部样式：把css代码写在一个独立的css文件中  命名：名字.css -->
<!-- 引用外部css文件：和内部样式的位置一样，放在head标签里面 -->
<!-- <link rel="stylesheet" type="text/css" href="css基础.css"/> -->
<!-- 更好实现HTML与css分离，即页面与样式分离，便于维护 -->

<!-- ④导入式：@import "外部css样式" -->
<!-- 两种方法：
1.在style里使用双引号
 <style type="text/css"> 
		
	@import "css基础.css"
		
</style> 
2.在style里使用URL
 <style type="text/css"> 
		
	@import url(css基础.css)
		
</style> -->