今天聊聊CSS

CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，所以称之为层叠样式表（Cascading Stylesheet）简称CSS。

在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。

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是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。

元素选择器—如果设置 HTML 的样式，选择器通常将是某个html 元素，比如 、<h1>、、<a>，甚至可以是 html 本身：

h1 {color:blue;}
p {color:silver;}

<h1 class="important">This heading is very important.</h1>

.important {color:red;}

<p id="red">这个段落是红色。</p>

#red {color:red;}

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

HTML:
<p>Hello World, and wish you have a good day!</p>

CSS:
p:first-letter {
    font-size: 5em;
}

如果不创建一个元素，我们可以通过设置的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素

用CSS实现这个效果

用到了一些基本样式，实现代码可访问我的Github

**我是半生不熟喜欢照自己的怪念头行事
喜欢一切意外想把生活过成诗的样子
若哪天有幸相遇请别诧异其实我并不是个乖孩子 **