### css轻松第一课
1. 学习写css需要一个好用的编辑器:推荐sublime
2. css基础5问
*你知道css不能独立存在吗
*你知道HTML和css之间的联系吗
*你知道id和class有什么不同吗
*你知道div以及span的差异吗
*css对浏览器的兼容性:主要兼容IE,Firefox,chrome三款主流浏览器。
**话外**:W3C和浏览器厂商的设计差异导致了需要考虑浏览器的兼容。
3. **大概需要掌握常用的9种选择器:**
id或者class选择器;
*通用选择器;
标签选择器:例如:`h1{}、p{}`
后代选择器:例如:`h1 p{}`
属性选择器:例如:`h2[class]`,`h2[class=title]`,`input[type='']`
子选择器:例如:`div >#child {}`;
伪类选择器:a:hover,a:visted,a:link,a:active,a:first-child,a:lang(E)
伪元素选择器:X:first-line, X:first-letter,
4. 常见的css语句汇总
* 文本属性一览:
font-size:11px; 文字大小,单位可以有px,pt,em,%
font-family:arial,sans-serif; 文本字体,如果第一种字体浏览者的计算机没有安装,会自动显示第二种字体,建议最终都以sans-serif字体结尾
font-style:italic; 文字为斜体
font-weight:bold; 文字为粗体
color:#999; 文字颜色,可以用颜色代码,也可以用颜色的英文表示。
letter-spacing:0.1em; 文字间距,单位可以有px,pt,em
line-height:18px; 文字行距
text-align:left; 文字对齐方式。left:置左;right:置右;center;置中;jusity:左右对齐
text-decoration:none; 文字线段。none:无;underline:底线;overline:顶线;line-through:删除线
* 框线属性一览:
border:1px solid #ccc; 框线的设置依序为:框线宽度(1px)框线样式(solid)框线颜色(#ccc)
border-top:1px solid #ccc; top为框线上方,可以改成bottom,left,right。
框线样式:实线:solid;虚线:dotted;双线:double;凹框:inset;凸框:outset
* 背景样式一览:
background-color:#000; 背景颜色
background-image:url('images/bg.gif'); 背景图片
background-attachment:fixed; 背景固定,不随滚动条移动。设置scroll则相反。
background-repeat:repeat; 背景重复,也可改成no-repeat,repeat-x,repeat-y。
background-position:50% 50%; 背景图片在X轴和Y轴的定位点。除了用%表示外,也可用top,bottom,left,right,center。
* 列表符号样式一览:
list-style-type:none; 隐藏条目符号
除了none以为还有decimal(阿拉伯数字),disc(实心圆形),circle(空心圆形),square(实心方形)
list-style-image:url('list.gif'); 图片形式
* 边界与间距
边界(margin)以及间距(padding)是大家最常用来调整图层的语法。
margin控制的是整个图层,而padding控制的是图层中的对象。
1. 学习写css需要一个好用的编辑器:推荐sublime
2. css基础5问
*你知道css不能独立存在吗
*你知道HTML和css之间的联系吗
*你知道id和class有什么不同吗
*你知道div以及span的差异吗
*css对浏览器的兼容性:主要兼容IE,Firefox,chrome三款主流浏览器。
**话外**:W3C和浏览器厂商的设计差异导致了需要考虑浏览器的兼容。
3. **大概需要掌握常用的9种选择器:**
id或者class选择器;
*通用选择器;
标签选择器:例如:`h1{}、p{}`
后代选择器:例如:`h1 p{}`
属性选择器:例如:`h2[class]`,`h2[class=title]`,`input[type='']`
子选择器:例如:`div >#child {}`;
伪类选择器:a:hover,a:visted,a:link,a:active,a:first-child,a:lang(E)
伪元素选择器:X:first-line, X:first-letter,
4. 常见的css语句汇总
* 文本属性一览:
font-size:11px; 文字大小,单位可以有px,pt,em,%
font-family:arial,sans-serif; 文本字体,如果第一种字体浏览者的计算机没有安装,会自动显示第二种字体,建议最终都以sans-serif字体结尾
font-style:italic; 文字为斜体
font-weight:bold; 文字为粗体
color:#999; 文字颜色,可以用颜色代码,也可以用颜色的英文表示。
letter-spacing:0.1em; 文字间距,单位可以有px,pt,em
line-height:18px; 文字行距
text-align:left; 文字对齐方式。left:置左;right:置右;center;置中;jusity:左右对齐
text-decoration:none; 文字线段。none:无;underline:底线;overline:顶线;line-through:删除线
* 框线属性一览:
border:1px solid #ccc; 框线的设置依序为:框线宽度(1px)框线样式(solid)框线颜色(#ccc)
border-top:1px solid #ccc; top为框线上方,可以改成bottom,left,right。
框线样式:实线:solid;虚线:dotted;双线:double;凹框:inset;凸框:outset
* 背景样式一览:
background-color:#000; 背景颜色
background-image:url('images/bg.gif'); 背景图片
background-attachment:fixed; 背景固定,不随滚动条移动。设置scroll则相反。
background-repeat:repeat; 背景重复,也可改成no-repeat,repeat-x,repeat-y。
background-position:50% 50%; 背景图片在X轴和Y轴的定位点。除了用%表示外,也可用top,bottom,left,right,center。
* 列表符号样式一览:
list-style-type:none; 隐藏条目符号
除了none以为还有decimal(阿拉伯数字),disc(实心圆形),circle(空心圆形),square(实心方形)
list-style-image:url('list.gif'); 图片形式
* 边界与间距
边界(margin)以及间距(padding)是大家最常用来调整图层的语法。
margin控制的是整个图层,而padding控制的是图层中的对象。