1、CSS是什么
CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，所以称之为层叠样式表（Cascading Stylesheet）简称CSS。
在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
2、CSS作用
CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。
3、基本样式
-
font-size字体大小 -
font-size:12px对象文字大小为12px -
float浮动
*Float:left靠左浮动 -
Float:right靠右浮动 -
width宽度 -
Width:20px对象宽度20px -
height高度-
Height:20px对象高度20px
-
-
margin外边距 -
Margin:1px 2px 3px 4px对象上距离1px；右为2px；下为3px；左为4px -
padding内补距 -
Padding:1px 2px 3px 4px对象内距离边上为1px；右为2px；下为3px；左为4px -
border边框 -
Border:1px solid #111对象边框为1px宽黑实线 -
font-family字体 -
font-family"黑体"; 对象文字字体为黑体 -
font-weight文字加粗 -
font-weight:bold对象文字被加粗 -
line-height行高 -
line-height:20px对象内上下2排文字行高为20px（包括文字自身占用高度） -
text-decoration文字装饰（下划线、删除线） -
text-decoration:underline对象文字加下划线 -
background背景属性 -
background:#FFF url(bg.png) repeat-x 0 0对象背景色为白色、背景图片为bg.png按X轴分析重复显示并距离顶部和左为0像素 -
text-align内容左中右对齐
更多样式请 查看CSS手册
4、基本选择器
CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。
-
元素选择器—如果设置 HTML 的样式，选择器通常将是某个
html元素，比如<p>、<h1>、<em>、<a>，甚至可以是html本身：
h1 {color:blue;}
p {color:silver;}
-
类选择器—为了将类选择器的样式与元素关联，必须将
class指定为一个适当的值
<h1 class="important">This heading is very important.</h1>
.important {color:red;}
- ** id选择器**—选择器可以为标有特定 id 的 HTML 元素指定特定的样式，选择器以 "#" 来定义
<p id="red">这个段落是红色。</p>
#red {color:red;}
5、伪元素
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
-
伪元素包括这些
-
::after—可以在元素的内容之后插入新内容 -
::before—可以在元素的内容前面插入新内容 -
::first-letter—用于向文本的首字母设置特殊样式 -
::first-line—用于向文本的首行设置特殊样式 -
::selection—定义用户鼠标已选择内容的样式 -
::backdrop—用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色 -
举个栗子
HTML:
<p>Hello World, and wish you have a good day!</p>
CSS:
p:first-letter {
font-size: 5em;
}
如果不创建一个<span>元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素
6、完成一个需求
用CSS实现这个效果
用到了一些基本样式，实现代码可访问我的Github
7、更多资源与工具
- CSS在线验证： http://codebeautify.org/cssvalidate (该网站上还有很多别的工具）
- 学习CSS布局：http://learnlayout.com/
- CSS基础教程：http://www.w3school.com.cn/css/index.asp
- CSS3新特性（了解即可）：http://www.w3school.com.cn/css3/
- CodeForDream上提供的CSS课程：http://www.codefordream.com/courses/css_basic/sections
**我是半生不熟 喜欢照自己的怪念头行事
喜欢一切意外 想把生活过成诗的样子
若哪天有幸相遇 请别诧异 其实我并不是个乖孩子 **
网友评论