CSS零基础学习札记(一)
日期：2014-05-17 浏览次数：20677 次
CSS零基础学习笔记(一)
为什么需要样式表？
1、HTML标签的外观样式比较单一
2、样式表可以美化网页，使页面更漂亮
3、样式表可以在多个页面中共享使用，提高工作效率
4、样式表能实现内容与样式的分离，方便团队开发
CSS基本语法：
一、<div>标签
二、样式规则：
选择器{ 属性:属性值;}
三、样式表的基本结构：
四、选择器的分类：
1、标签选择器
2、类选择器
3、id选择器
五、选择器的集体声明
为什么需要样式表？
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
