CSS零基础学习札记(一) _HTML/CSS

CSS零基础学习笔记(一)
为什么需要样式表？
1、HTML标签的外观样式比较单一
2、样式表可以美化网页，使页面更漂亮
3、样式表可以在多个页面中共享使用，提高工作效率
4、样式表能实现内容与样式的分离，方便团队开发

CSS基本语法：

一、<div>标签

<!--下面是div标签，只需要对div标签的控制就可以改变div标签内的其他标签-->
<div>
<h1>TEST</h1>
</div>

二、样式规则：
选择器{ 属性:属性值;}

p{
  font-size:12px;      <!--设置p元素的字体大小-->
  font-family:"隶书";   <!--设置p元素的字体-->
}

三、样式表的基本结构：

<style type = "text/css">
p{
  color:#ff0000;
  font-size:24px;
  font-family:"隶书";
}
</style>

四、选择器的分类：
1、标签选择器
2、类选择器
3、id选择器

<!--标签选择器-->
h1{
  color: red;
}
<!--类选择器-->
<html>
<head>
<style type = "text/css">
.green{
  color:#00f00;
  font-family:"宋体";
}
</style>
</head>
<body>

</body>
</html>
<!--id选择器-->
<html>
<head>
<style type = "text/css">
#blue{
  color:#0000ff;
  font-family:"宋体";
}
</style>
</head>
<body>
<p id = "blue">低头思故乡
</body>
</html>

五、选择器的集体声明

<html>
<head>
<style type = "text/css">
h1,#two,.red{
  color:#ff0000;
  font-size:14px;
}
h2,h3{
  color:#0000ff;
  font-size:16px;
  text-decoration:underline;  <!--下划线-->
}
</style>
</head>
<body>
<h1>静夜思</h1>
<h2>床前明月光,</h2>
<p class ="red">疑是地上霜.</p>
<h3>举头望明月，</h3>
<p id ="two">低头思故乡。</p>
</body>
</html>