<!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> -->