初学者前端开发学习（二）初识css

css基础补充

对于觉得菜鸟教程html很好理解，css却看不懂，这篇作为承上启下的css基础补充。
首先从名声入手，css的英文为Cascading Style Sheets，译为层叠样式表。html与css几乎不会分开。有了html你可以完成想要表现在页面上的东西，加上css就可以让页面更美观。

css语法

css的写法由两部分组成 选择器和声明。

/*其中.header是选择器 ， color,background是.header代表的元素的属性。red,blue是你想为这个属性赋予的值。*/.header {color : red;background :blue}

class命名

第一步，当我们创建好了一个标签，并添加了class属性，第一个问题就是命名。暂时需要记住的是：

• 以字母开头，具有实际意义的名字。
• 为避免冲突，增加-或_作为单词间的分割。
  比如

/*以自己熟悉的单词，或容易辨识的缩写来命名。*/class="nav" //导航class="content-left"//内容左侧

css选择器种类

元素选择器具有很多种类。在前期我们主要使用的这一种，叫类选择器。
类选择器，由名称看，自然就是我们定义的标签属性-class的值。
如：

<!--我们根据这里的header，编写css语法--><div class="header"></div>/*相对应的css语法*/.header {width : 100px; height : 100px;}

如何使用css

使用css有三种方式

• 内部样式
• 外部样式
• 内联样式
  这个已经知道，就不细说了。

css样式类型

css样式很多，作为初学者我们不需要全部都掌握，先一点一点积累，在这里只做个别的例子解析。

样式

这类样式是最直接的修改，改变的是html元素的外观。

/*样式基本的定义,属于纯记忆内容切种类繁多，这里不做过多介绍，之关注基本写法*/color: red;color : #000000;background : black;

盒子模型

盒子模型主要涉及三个属性

• border
• margin
• padding
  按单词意思，border是指元素的边框，margin是元素的外边距，padding是元素的内边距。用下图来配合理解：
  

其中html元素显示的位置是黑色实体块，红色部分表示border，红色绿色线之间的距离表示margin，黑色块和红色线之间的距离表示padding。

定位