CSS基础
一、入门基础知识
1，CSS概述
CSS指层叠样式表,极大地提高了工作效率
2， 基础语法
selector {
property:value
}
eg: h1{color:red; font-size:14px;}
属性大于1个之后，属性之间用分号隔开
如果值大于1个单词，则需要加上引号:
p {font-family:"sans sefif";}
3,高级语法
1)选择器分组:
h1,h2,h3,h4,h5,h6{color:red;}
2)继承(未申明自己的样式的标签会继承)
body{
color:green;
}
4，派生选择器：
通过依据元素在其位置的上下文关系来定义样式
5,id选择器
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以"＃"来定义
目前比较常用的方式是 id选择器常常用于建立派生选择器
6,类选择器
类选择器一一个点显示。class也可以用作派生选择器
.pclass{
}
<p class="pclass"></p>
7,属性选择器 ,在IE6及其更低的版本中是不支持的。
<style type="text/css">
[title]{
color:blue;
}
[title=te]
{
}
eg:
<p title="te">属性选择器</p>
二，背景
1，CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
background-attchment 背景是否固定或者随着页面的其余部分滚动 fixed
background-color
background-image
background-position 设置背景图片的起始位置
background-repeat 设置背景图片是否及如何重复 repeat no-repeat repeat-x repeat-y等等
背景不允许继承
2，CSS3背景
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
三 文本
1,CSS文本属性可定义文本外观
通过文本属性，可以改变文本的颜色，字符间距、对齐文本、装饰文本、对文本缩进
2，color 文本颜色
direction 文本方向
line－height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行 text-indent: 2em;
text-transform 元素中的字母 :capitalize(首字母大写) lowercase uppercase
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
world-spacing 字间距
3，CSS3文本效果:
text-shadow:向文本添加阴影 eg:text-shadow :5px,5px,1px,#FF0000 (距离左，距离上，宽度，颜色)
word-wrap:规定文本的换行规则
4，CSS字体
CSS字体属性定义文本的字体系列、大小、加粗、风格和变形
font-family 设置字体系列
font-size 设置字体的尺寸
font-style 设置字体风格
font-variant 以小型大写字体或正常字体显示文本
引入下载字体:
@font-face {
font-family:myfont;
src: url();
}
font-weight 设置字体的粗细
四 CSS链接
1，链接四种状态：
a:link 普通的、未被访问的链接
a:visited用户已访问的链接
a:hover鼠标指针位于链接的上方
a:active 链接被点击的时刻
2，常见的链接样式:
text-decoration 属性大多用于去掉链接中的下划线: none
3，设置背景颜色:
background-color
五、列表
CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志。
list-style 简写列表项
list-style-image 列表项图像 : url("");
list-style-position 列表标志位置 :inside outside
list-style-type 列表类型 : decimal circle
六 CSS表格
CSS表格属性可以帮助我们极大的改善表格的外观
1)表格边框
2）折叠边框
3）表格宽高
4）表格文本对齐
5）表格内边距
七 CSS轮廓
主要是用来突出元素的作用
outline 设置轮廓属性
outline-color 设置轮廓颜色
outline-style 设置轮廓样式
outline-width 设置轮廓宽度
****************
id是不可以重复的，是唯一的，class是可以重复的。
资源加载上:id先找到结构内容再加载样式；class：先加载样式再去找结构内容。
一般id用于框架级的身上，class用于内部具体数据构造。
<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。
