CSS学习—day1
摘要：web前端设计三剑客分为是html、CSS、Javascript，前面我们已经对html基础知识做了介绍，它定义了页面基本组成，而CSS则控制网页的样式和布局。
首先，明确一个问题，什么是CSS？
1.CSS指层叠样式表 (Cascading Style Sheets)
2.能定义如何显示HTML元素
3.解决内容与表现分离的问题
4.外部样式表极大提高工作效率
下面，开始正题
- CSS语法
CSS规则由两个主要部分组成：选择器，以及一条或多条声明
选择器 声明1 声明2
h1 {color:blue;text-align:center;}
属性 值 属性 值
CSS声明总是以分号（;）结束，声明总以大括号（{}）括起来：
如h1 {color:blue;text-align:center;}
CSS注释以“/*”开始，以“*/”结束。
CSS Id和Class
以#表示选择器的id
以.表示选择器的class
以p.表示所有p标签class
- CSS创建
样式表的插入：①外部样式表 ②内部样式表 ③内联样式表
外部样式表：适用于样式需要应用到很多页面
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
每个页面使用<link>标签链接到样式表，且位于文档的头部。
mystyle.css样式表不能包含任何的html标签，如
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。
使用<style>标签在文档头部定义，如
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式：相关标签内使用
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
- 背景
背景颜色：body {background-color:#b0c4de;}
背景图片：
body {background-image:url('paper.gif');}图片默认在水平和垂直方向平铺
body {background-image:url('paper.gif');background-repeat:repeat-x;}图片在水平方向平铺
body {background-image:url('paper.gif');background-repeat:no;}图片不平铺
body {background-image:url('paper.gif');background-repeat:no;background-position:right top;}图片不平铺且在右上
属性值顺序
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
