<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css语法规则</title>
<!--
一、HTML和CSS结合的三种方式
1.行内样式表（不建议使用）
将样式直接写到HTML标签的style属性中
缺点：不易于维护、不可复用、可移植开发
2.内部样式表
在HTML中的head标签中创建style标签
在style标签中利用选择器，去为选中的标签添加样式
语法格式：
选择器{
属性1：属性值1；
属性2：属性值2；
}
选择器：用于选择需要添加样式的标签
{}：称为声明块，需要为元素添加的样式，都写在声明块
样式：样式以键成对的形式呈现，样式名对应着样式值。名和值之间以英文的：连接
以英文的分号；结尾。键直对可以有多个，建议每行写一对。
缺点：仅对当前文档使用，可移植性差
3.外部样式表(推荐使用)
在外部创建一个.css结尾的文件，在该文件中编写css样式表
语法格式：
选择器{
属性1：属性值1；
属性2：属性值2；
}
在需要引入样式的页面的head标签中，利用link标签引入外部样式表
优点：
易于维护
可移植性强
提高复用性
可以利用浏览器的缓存机制，加快网页的加载速度，提高用户体验
"高内聚，低耦合"
-->
<!--内部样式表-->
<!--
/*
css注释
注意：在style标签中属于css，而css和HTML的注释不同
*/
p{
color:orange;
font-size: 30px;
}
h1{
color:blue;
font-size: 80px;
}
-->
<!--外部样式表-->
<link rel="stylesheet" href="./hello.css">
</head>
<body>
<h1>天天好心情</h1>
<p>今天天气不错</p>
<p>挺风和日丽的</p>
<!--行内样式表-->
<!--
<h1 style="color:red;font-size: 30px;">天天好心情</h1>
<p style="color:red;font-size: 30px;">今天天气不错</p>
<p style="color:red;font-size: 30px;">挺风和日丽的</p>
-->
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)