CCS初学那点事（一）
CSS初学那点事（一）
前端开发人员是不可能离开CSS的设计，这里讲到的CSS是CSS2。这篇文章说讲到的CSS是基础的CSS。
Css是层叠样式表，
HTML仅仅用来描述某一段内容的功能，Css用来控制样式
使用CSS进行设计的主要任务就是从编写合法，具有良好结构并且拥有语义的HTML文档开始的。
当同一个HTML文档被不止一个样式定义时，会使用那个样式？
答：内联样式（置于HTML标签内）>内部样式（位于<head>标签内部）>外部样式
Css的语法：
选择器，属性，值
例子：body{color:blue}
注意：如果值为若干单词的时候，属性的值必须要加上双引号
例子：p{font-family:"sans serif";}这是设计字体
如果要对同一个标签引用多个属性和值，分行书写增强可读性，用分号隔开
例子：
p{ color:red;
Text-align:center;
}
一 选择器的分组：
例子：h1,h2,h3,h4,h5{
color:green;
}
对选择器进行分组，同组的选择器可以分享相同的声明，每组的选择器之间用逗号隔开。
l 派生选择器：
例子：
Html代码：
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
Css代码：
li strong{
font-style:italic:
}
上面的例子选择的是li标签的下的strong标签的中内容
l Id选择器
例子：
CSS代码：
#red{color:red;}
#green{color:green;}
HTML代码：
<p id="red">aaaaaaa</p>
<p id="green">bbbbb</p>
Id选择器就是由属性id的值进行选择,以#号开头进行选择。
Id选择器也可以使用派生选择器
例子：
HTML代码：
<div id="test">
<h1>我的试验</h1>
<p>ssssssssssssssssasdasdasdasdasdasdasdasdasddasd</p>
</div>
CSS代码：
#test h1{
color：red
}
l Class选择器
Class选择器是由属性class的值进行选择，以.开头进行选择
例子：
Html代码：
<div class="test">asdasdsdasdasd</div>
CSS代码：
.test{
color:red
}
注意：类名的第一个字符不能使用数字
和id属性一样都可以使用派生选择器
l 属性选择器
除了id和class选择器外还有根据标签的其他属性进行选择。
例子：
HTML代码：
<img src=\'#\'" />
<img src=\'#\'" />
Css代码：
[title=w3e]{border:5px solid blue;
}
对于表单的内容也可以进行样式排版
例子：
HTML代码：
<form >
<input type="text" />
<input type="text" />
<input type="button" />
</form>
CSS代码：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
选择其他的元素的话只需要改变type的类型就可以了，例如把text改成button
上面介绍了使用css样式表的三种方式，其中最常用的就是外部样式，
引入.css文件的方法是
<link rel="stylesheet" type="text/css" href="mystyle.css" />
其中需要变化的就是href中的内容
二 CSS背景
背景一个是背景颜色，一个是背景图片，
添加背景颜色使用的是background-color直接加上需要添加的颜色
添加背景图片使用的是background-img：url（这里加上图片的路径）
例子：p{ color:#60F;
background-image:url(../images/pscs51.jpg);
}
如何给某元素的一部分加效果：
例子：
HTML代码：
<p class="flower">我是一个有花纹背景的段落。<a href="#" class="radio">我是一个有放射性背景的链接。</a></p>
CSS代码：
p.flower{background-image:url(../images/pscs51.jpg);}
P.radio{background-image:url(../images/pscs52.jpg);
}
补充：background-repeat属性
作用是设计是否或者怎样重复背景图片 默认的是在水平和垂直上进行重复
属性值:repeat 默认值 在水平和垂直上进行重复
repeat-x在水平方向上进行重复
repeat-y在垂直方向上进行重复
no-repeat背景图片仅显示一次
在做某些标题或者侧面的背景时可以用到
补充2：background-position属性
作用是定义背景图片的位置。
他的属性值有很多种方式例如像是life，right，center等（通常这些关键字都是成对出现的）还可以使用长度如100px或者是5cm
还可以使用百分比例子：background-position：66% 33%。
补充三：如何实现背景关联？
什么是背景关联？文档过长的时候背景图片会随着文档的滚动而滚动，当文档的位置超过背景图片是后面的背景图片会消失，如果实现背景关联则图片相对于视区是固定。
方法：通过设置background-attachment：fixed属性就可以实现
三 CSS文本：
Css文本属性可以设置定义文本的外观：
通过此操作可以改变文本的颜色，字符间距，对齐方式，装饰文本，缩进等功能。
1，缩进文本：
对于段落的第一行进行缩进若干个单位，CSS为所有的块级元素提供了一个test-indent属性，此属性可以轻易的实现首行的缩进。当在块级元素中的首行中出现图片时，图片会随着文档的缩进而缩进。
例子：
p{ text-indent:5em}
补充：text-indent的属性值可以是负值，当是负值的时候就会出现一些非常有趣的操作。 会出现悬挂缩进的现象既首行会悬挂在其他行的左边。注意当使用负值的时候会出现需要显示的文档会超过浏览器的左边。所以可以给块级元素再加上一个边距就可以了。
例如:p{padding-lift:5em}
长度同样可以使用百分比。
2，水平对齐
text-align属性影响对齐方法：
其中lift,right,center对应的就是左对齐，右对齐，居中
3，字间隔
word-spacing用来改变字（单词）之间的距离。可以是正值也可以是负值
相同的还有字母间隔：letter-spacing
4 字符的转换
text-transform属性用来改变字母的大小写。
四个属性值：none，uppercase，lowercase，capitalize
none对文档不进行任何的操作
uppercase把字母都变成大写，同理lowercase是将字母都变成小写
capitalize是将每一个单词的首字母变成大写
实际应用不多尤其是对于国内的网站，有用的是当有一天想把某个标题或者是某一段的文档变成大写的时候直接在CSS上加上此属性就能完成了。
5， 文本装饰
我们所用到的就是text-decorations属性他有五个属性值，分别是：
none：关闭原有的所有装饰
underline :加下划线
overline:在文字的顶端加下划线
line-through：给文字加一条贯穿线
blink：给文字加上闪烁效果
多种形式可以同时使用
例子：
P{ text-decoration:underline overline}
但是若是两个不同的修饰对同一元素起作用则是替换的原则。
例子： h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;}
6，处理空白符
White-space：自动处理空格 把多个空格写在一起
当他的值为pre-warp的时候，空白符就不会被忽略而且会保留换行符，并且支持自动换行
当他的值为pre-line的时候，空白符不会被保留但是会保留换行符也支持自动换行
当她的值为nowrap的时候，不容许折行
四 CSS字体:
1,指定字体系列：
使用font-family属性定义文字的字体系列
当字体名中间出现一位或者多个空格以及像#,$的特殊符号是要加上引号。
2,字体风格：
使用font-style属性来设置字体风格，一般就是正常和倾斜两种。
正常的属性值为：normal
倾斜的属性值为：italic或者是oblique
3，小型大写字母：
它既不是大写字母也不是小写字母，让font-variant的值为small-caps。
4 字体加粗
属性：font-wright 值为100到900的数值对应九个级别
5，字体大小：
属性：font-size
注：16px=1em
五 CSS列表
1，修改列表的标志类型
使用属性：list-style-type 无序列表默认的是实心点
例子：li{list-style-type:square} 这样就把标志变成了方块。
2，使用图片当做标志位
使用属性：list-style-image
例子：ul li{ list-style-image:url(155.jpg)}
3,调整标志位的位置
使用属性：list-style-position
4,上述的三个属性都可以用一个属性list-style代替，他就有三个参数，用哪个写那个
例子：li{list-style:url(xxx.jpg) squeare inside}
六 CSS表格
1，表格的边框
设置表格的边框使用属性border；
例子：table,tr,tr{border:1px blue solid}
2,折叠边框
上述的例子显现的结果呈现的是双边框，如果想变成单边框可以定义border-collapse属性让他的值等于collapse就可以实现单边框了。
例子：table{ border-collapse:collapse;}
3,表格的对齐方式
对齐方式一个是水平对齐另外一个就是垂直对齐
属性text-align用来设置水平对齐life,right,center对应的就是左对齐，右对齐，居中
属性vertical-align来设置垂直对齐middle，bottom 等对应的是居中，底部对齐等
4表格的内边距
想控制表格中内容与边界的距离那么就为td和th设置padding属性。
5，表格的颜色
表格边框的颜色在上面讲到的边框中直接设置就可以了
表格内文本的颜色直接设置
例子：th{back-ground:red;
color: green;}
注意：显示表格中的空白单元：
在HTML中我们可以给空白的表格写上默认值 $nbsp
若使用Css则就可以不用了给table加上empty-cells：show就行了。
七 CSS的轮廓
轮廓的作用就是在元素外围绘制一条线，位于边框线的外围，用于突出元素。
补充：在html中<filedest><legend>标题内容的</legend></fieldest> 就可以在元素周围绘制一个带有标题的框。
再选中的元素标签中加上outline属性就可以给此元素加上一个线框。
例子： p {outline:#00ff00 dotted thick;}
第一个值是轮廓的颜色，第二个是轮廓的样式，第三个是轮廓的宽度 dotted就是点状轮廓
上面讲到的是基础CSS的语法会一些常用的属性的意思，当大家用到的时候可以在查一查API
后面我还要深入的学习CSS的使用。