CSS
html：内容
css：样式
css优势：
1、内容与样式相分离
2、cs样式更加丰富
3、提高浏览器的加载速度，节约网络带宽，减少代码量
4、利于SEO（搜索引擎）优化
基本语法
css在head标签中选
选择器
{
样式名：样式值/ * css中注释* /
样式名：样式值
样式名：样式值
…
}
颜色：支持英文单词或十六进制（三位或六位#112233）
三种选择器的选择器名;
标签选择器：标签
类选择器：.类名
id选择器：#id名
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*标签选择器*/
h1
{
color:#aabbcc;
font-size:40px;
}
p
{
color:#aaaaaa;
font-size:20px
}
/*类选择器，可以用于多个元素*/
.mystyle{
background-color:lightgrey;
}
/*id选择器，只能用于一个元素，虽然HTML容错性强，不报错，但是语法是错误的*/
#my3{
font-size:60px;
}
</style>
</head>
<body>
<h1>h1标签</h1>
<p><b>这里分段</b></p>
<h1 class="mystyle">h2标签</h1>
<h1 class="mystyle">h3标签</h1>
<h1 id="my3">h4标签</h1>
</body>
</html>
CSS引入方式
建议：在开发时使用内部样式，编写完毕后改造成外部，不推荐行内样式
- 行内样式
- 一次只作用于一行
<h4 style="color:red;background-color:pink";>行内样式</h4>
- 内部样式
在head标签里写
<style type="text/css">
.........
</style>
- 外部样式
将css语句独立移动到css文件，在html头标签中用下面语句来引用：
a、链接式link
<link href="css文件名" type="text/css" rel="stylesheet"/>
b、导入式@import
@import url<"css文件名">
推荐link不推荐import
css文件单独封装：
@charset "UTF-8";
/*标签选择器*/
h1
{
color:#aabbcc;
font-size:40px;
}
p
{
color:#aaaaaa;
font-size:20px
}
/*类选择器，可以用于多个元素*/
.mystyle{
background-color:lightgrey;
}
/*id选择器，只能用于一个元素，虽然HTML容错性强，不报错，但是语法是错误的*/
#my3{
font-size:60px;
}
优先原则：行内>外部>内部
选择器优先级：id>类>标签
2023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
