css是Cascading Style Sheets(层叠样式表) 的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助css的强大功能，网页将在您丰富的想象力下千变万化。
首先接受下css的作用：我们把网页比为一个人的话，那么有css的网页就是一个穿着漂亮衣服的人。css对网页的布局和美化起到相当大的作用，没css的网页就是一个没穿衣服的人，大家可以想象下。下面的图片是我把淘宝网的 css禁用后的效果，大家可以看看：
其实没有css的淘宝也是这么的难看，所以css其实也就是网页的必备品。
下面我们把css分下类
css的分类是按照css的位置来分的，分为：
1、行内样式表
行内样式表属于标签级的，既在标签中把css写在 style=""中如：
修饰当前标签内容。
2、内嵌样式表
写在网页内部，一般都写在 网页的<head></head>标签中，用<style type="text/css"包裹。如：
3、外部样式表
外部样式表是把css样式写在外部以css后缀结尾的文件中，在网页的头部<head></head>标签中用<link href="" rel="stylesheet" type="text/css"> 引用。如:
css的语法
css的语法其实很简单 属性：值 这就是css的语法。
还有就是选择器
1、标签选择器
就是标签名{ 属性： 值} 注意，属性和值之间的冒号 是英文的冒号。
这就是一个标签选择器的正规写法。
2、类选择器
所有标签都有一个class属性 classs属性就是表明要使用那个类选择器的。用法如<p style="mycss">内容</p>
3.id选择器
id选择器的声明为： #名称{ } 如：
id选择器在一个网页中一般都是唯一的，因为js中有通过id获取元素的方法。所以一般一个id只对应一个标签。
4.派生选择器
在选择器内的标签中写规定
5.群选择器
如h1,h2{}
h1 标签和 h2标签 共有 color为red这个属性。 写的时候最好没个标签都独占一行，这样容易看，容易查。
6.伪类选择器
这类选择器名称中间都有 : （冒号） 如p:first-line, p:first-letter 等等 p:first-line是设置首行的属性。 P:first-letter是设置每段开始的首字的属性。
下面简单介绍下css中常用的一些属性：
为了做演示我所有的都使用了内嵌样式
1选择字体 font-family:微软雅黑;
未设置属性时
设置后的效果：
2.字体颜色
这个就不演示了，大家自己试试看看吧。但是要注意 字体颜色的设置是用 color：颜色值 并没有 font 这个东西。
3.改变字号
改变字体大小的属性为 font-size,实列如下：
设置好属性后效果如下：
表示页面文本字号的方法有如下几种
-
像素表示
-
百分比表示（100%相当于16px）
-
使用关键字表示 （不常用，想知道的自己去查）
4. em表示
4、粗体和斜体
font-style:italic; （斜体）
font-weight:bold;( 粗体)
是咧如下：
设置完后效果如下：
字体明显变粗变斜了。
5.改变英文大小写
用text-transform:uppercase/lowercase; 属性 实例如下：
效果如下：
6.装饰
装饰用 text-decorcation:underline/overline/line-through 分别为下划线，上划线，删除线。
实例如下：
效果如下：
其他的两种装饰方法如上。
当三种装饰同时出现时可以用 text-decorcation:underline overline line-through;
7字母和字间距
letter-spacing:10px; 改变字间距（中文和单词间距）
word-spacing:10px; 改变英文字母间距。实例如下：
设置完这个属性后，变为：
字间距明显变大。word-spacing的设置方法同上，但是改变的是英文字母间的距。
8.行间距
line-height:200%; 这个属性的值最好采用百分比或小数形式，因为采用百分比不会应为字体大小的改变而改变，可以避免出现诸多错误。 小数的写法就是 line-height:2.0; 效果同上边的写法。实例：
可以看出行间距变大了许多。
9.对齐
对齐采用 text-align : left ; /right/center/justify 分别为 左 右 中间 两端对齐， 两端对齐现在基本上都被许多浏览器给抛弃了。这个属性页很不常用。实例如下：
大家先看下 没设置这个属性时 标题 新闻标题 的位置
代码如下：
属性设置好后效果如下;
可以看到标题居中了，其他两种right和left大家可以自己尝试着做下，看看效果。
10.首行缩进
首行缩进，就是我们在网上看新闻时每段开始都会空两个字，这也是我们中国的习惯。 首行缩进 的设置方法 text-indent:2em; 大家记好了 只要设置为2em就一定是2个字的空间。
实例如下：
效果如下：
大家看出效果了吧 ，我也就不多说了。
二、盒模型
要理解 margin(边距)、padding(填充)和border(边框)三个的概念，就要理解css中非重要的概念之一：盒模型 如下图
从上边的图我们可以看出来：
1.padding是指内容和边框之间的距离。
2.margin是指一个标签与另一个标签之间的距离（既元素与元素之间的距离）.
3.border是指每一个元素的边框。
再次我先说下，大家看待每一个元素时都要想象着它们有一个边框。
设置边框后我们就可以看到，我们先定义一个div(div是一个标签，没什么实际意义)实例如下：
没设置边框之前：
实例代码如下：
效果为：
可以明显的看到有个边框，由于我截图的原因右边没了边框。
border属性的三个值分别代表的意思 1px是指边框的粗细， solid是指边框线的取值（具体的取值大家可以上谷歌上搜） , #000是设置边框的颜色。
我们可以通过 border-top:1px solid red; 来设置上边框线的颜色粗细 和线的形状，依次类推我们可以设置左边框、右边框等等的属性。 实例如下：
效果如下：
可以看到先边框变颜色也变粗了。还可以单独设置指定边框的颜色，用属行border-bottom-color: blue; 效果如下：
下边框变为了蓝色。
padding的用法
padding是指内容与边框之间的距离，这个大家一定要记清楚。实例如下：
效果如下：
内容与边框之间的距离明显变大了。 我们也可以单独设置内容与某个方向的的内边距，设置方法为padding-top:40px;
效果如下：
可以明显看到距离上边距的距离比下边距的距离大了。同样的可以设置其他三个边的距离。采用padding-right/padding-left/padding-bottom 来设置。
margin的用法
margin是设置元素与元素间的距离的。与padding一样，可以设置上下左右的距离,同样用margin-top/margin-right/margin-left/margin-bottom 来设置。 我们先定义两个div 然后设置他们间的距离。 实例如下：
先设置个边框，设置好边框后效果如下（两个div）:
设置下边框的外边距，实例
效果如下：
明显看出两个层之间的距离变宽了。
一行代码设置4个方向的距离 padding和margin的写法相同 如下 padding:10px 20px 30px 10px; 代表分别设置内边距 的上为10px 右20px 下边30px 左边10px. 注意这个顺序是上右下左 ！
行内标签和块级标签
块级标签是指能独占一行的，行内标签则不能独占一行。
行内标签设置margin与padding的top与bottom无用，因为行内标签不是独占一行，它不影响上下。我们可以看看下面（span为行内标签，div为块级标签）实例：
我们设置了span标签的上和下
效果：
我们可以看到块级的上下设置不影响其他的标签，所以对行内标签的top 和bottom设置没用。但是如果想要有用我们可以把行内标签给变为块级标签。 方法是 使用 display:inline/block/none这个属性 inline是变为行内标签 block是变为块级标签 none是把当前元素给隐藏起来。
给网页添加图片
在html中我们用background给网页添加图片，现在我们也可以用css来做到这个效果。
我们用 background-image这个属性设置背景图片，值是图片的路径，写法如下：
background-image:url(图片地址); 实例：
下面做个实例：
首先创建一个层（div）然后我们把这个 div的宽和高设置为300*300 ，然后吧背景色设置为#ff7400 然后把图片放进去大家看下效果。实例：
大家看下设置后的效果：
可以看到图片是以平铺的效果显示到设定的边框中的。 但是css不但是这样，还可以定位图片，设定其他的效果。首先看下 取消图片重复的属性： background-repeat:no-repeat/repeat/repeat-x/repeat-y 分别代表 图片不平铺 /平铺/横向平铺/纵向平铺 下面举例下横向平铺,实例如下：
效果：
图片只是横向平铺了。其它几种效果都可以做出来，大家可以自己试试。
定位图片位置
定位图片位置用属性 background-position 此属性的取值有 top center right bottom 这几个值可以两个两个的写 如 background-position:top center; 也可以单写 。 还可以取值为具体的像素位置 如 background-position:10px 10px; 下面看下代码和效果：
效果：
图片为上中 就是这个位置了。
效果：
看到图片离上边和右边的距离都为10px 。
也可以用百分比，但是我不怎么常用这个，喜欢的可以自己查查看看。
css的介绍就说道这里了，由于本人也是新手，有错误的地方请大家见谅。 有什么意见的可以加本人的QQ来共同交流 本人QQ511630288 ，欢迎大家给意见。
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
