1.CSS介绍
CSS(Cascading Style Sheets)，又称层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.CSS学习
1.CSS语法
p为选择器，font-size为属性名，12px为属性值
p {
font-size:12px; /*字号*/
color:blue; /*文字颜色*/
text-align:left /*左对齐*/
font-weight:bold; /*加粗*/
}
2.CSS添加方法：
行内添加法：直接添加到标签内部，仅对当前页面有效 <body><p style="color:red;">文本</p></body> 内嵌样式:添加在头部，仅对当前页面有效 <head> <style type="text/css"> p{ color:red; } <style> </head> 单独文件：可用于不同网页文件，便于维护 外部样式表文件：style.css p{ color:red; } 网页文件： <head> <link rel="stylesheet" href="css/style.css"> </head> 优先级： 多重样式可以层叠，覆盖；遵循就近原则 行内样式>内嵌样式>链接样式>浏览器默认样式
3.CSS选择器：
标签选择器： 内嵌样式： <style type="text/css"> body {background-color:#ccc; /*背景为灰色*/ text-align:center; font-size:12px} h1 {font:"黑体";font-size:20px;} p {color:red;font-size:16px;} hr {width:200px} </style> 类别选择器：可被多次引用 css: <style type="text/css"> p {font-size:12px;} .one {font-size:18px;} .two {font-size:24px;} </style> HTML: <body> <p class="one">类别一</p> <p class="one">类别一</p> <p class="two">类别二</p> <p class="two">类别二</p> <p>普通段落中的文字</p> </body> ID选择器：具有唯一性 css: <style type="text/css"> #one {font-size:18px;} #two {font-size:24px;} </style> HTML: <body> <p id="one">文字一</p> <p id="two">文字二</p> <p>普通段落中的文字</p> </body> 嵌套声明： 对段落p内span标签内文本生效 css: <style type="text/css"> p span{ color:red; } </style> HTML: <body> <p><span>天使投资</span>是投资方式的一种</p> </body> 集体声明： css: <style type="text/css"> h1,p { color:red; } </style> HTML: <body> <h1>欢迎访问论坛</h1> <p>欢迎访问论坛</p> </body> 全局声明： 对所有元素标签生效 css: <style type="text/css"> * { text-align:center; } </style> HTML: <body> <h1>欢迎访问论坛</h1> <p>欢迎访问论坛</p> <h2>欢迎访问论坛</h2> </body> 混合： 多个class选择器混用，用空格分开 <div class="one yellow left">......</div> id和class混用 <div id="my" class="one yellow left">.......</div> id选择器不可以多个同时使用，也不能使用多次，id属性具有唯一性，只能使用 一次
4.CSS样式(1):文字样式
单位： px:像素 em:字符类型单位，自动适应用户使用的字体，2em--2个字符 %:百分比；子层会继承父层的属性，父层默认属性乘百分比得子层属性 颜色： red,blue,green:颜色名 rgb(x,x,x):RGB值0-255 rgb(x%,x%,x%):RGB百分值 rgba(x,x,x,x):RGB值，透明度.a值：0.0（完全透明）与1.0（完全不透明） #rrggbb:十六进制数，红色：#ff0000 文本： color:文本颜色，red #f00/rgb(255,0,0) letter-spacing:字符间距，2px,-3px line-height:行高，14px/1.5em/120%,当height和line-height为同一值时，文 本垂直居中 line-align:对齐,center/left/right/justify（两端对齐，左右无空白） text-decoration:装饰线,none/overline/underline/line-through(删除线) none可除去超链接下划线 text-indent:首行缩进,2em 字体： font:在一个声明中设置所有的字体属性，font:bold 18px '幼圆' 有一定顺序，font:斜体 粗体 字号/行高 字体; font-family:字体系列，设置字体，font-family:"Microsoft YaHei" font-size:字号,14px,120% font-style:斜体，italic font-weight:粗体,bold
5.CSS样式(2):背景、超链接样式
背景：（空元素需要先定义元素的高度和宽度） background-color:颜色，包括颜色名和rgb值 background-image:url("logo.jpg")，背景图片附超链接地址（相对路径），图 片会覆盖背景颜色 background-repeat:repeat 背景图片填充方式，棋盘格的填充，repeat在水平 和垂直方向上填充满整个网页 repeat-x 填充一行 repeat-y 填充一列 no-repeat 一幅很大的背景图片出现只显示一次 background:颜色 图片 repeat 链接：(:伪类选择器) a.link:普通的、未被访问的链接 a.visited:用户已访问的链接 a.hover:鼠标指针位于链接的上方悬停 a.active:链接被点击的时刻，若链接为下载链接，则下载期间一直为活动状态 有一定顺序,Love&hate,l>v>h>a css: a.link { text-decoration:none; color:#09f;/*未访问*/ } a.visited { text-decoration:none; color:#930;/*已访问*/ } a.hover { text-decoration:underline; color:#03c;/*鼠标悬停*/ } a.active { text-decoration:none; color:#03c;/*按下鼠标*/ } 鼠标悬停放大： a { font-size:22px; } a.hover { font-size:120%; }
6.CSS样式(3)列表和表格:
列表List:(无序列表ul有序列表ol共用样式) list-style:所有用于列表的属性设置于一个声明中 list-style-image:为列表项标志设置图像，即标志位置用图片替代 list-style-image:url("images/bullet1.gif"); 相对路径 list-style-position:标志的位置 list-style-position:inside;标记向右缩进到列表区域内 list-style-position:outside;标记向左回退到列表区域外 list-style-type:标志的类型,每行列表前的标记 无序列表ul: none:无标记 disc:默认，标记是实心圆 circle:标记是空心圆 square:标记是实心方块 有序列表ol: decimal:标记是数字，默认 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母 lower-Greek:小写希腊字母 lower-latin:小写拉丁字母 upper-latin:大写拉丁字母 表格table: 表格大小: table { width: 500px; height: 200px; } 表格边框: table { border:1px solid #eee; /*一个像素宽，实线，灰色*/ } table { border-collapse:collapse; /*将表格单元框和单元格边框合并，重合在一起*/ } 奇偶选择器: 可将表格隔行添加颜色，便于阅览 :nth-child(odd|even) odd关键字表示奇数，even关键字表示偶数 HTML: tr:nth-child(odd) { background-color:#EAF2D3; }
7.CSS布局与定位：
盒子模型：页面元素的大小，边框，与其他元素的距离
定位机制：文档流，浮动定位，层定位
7.1.盒子模型(1):
概念：页面上区域、图片、导航、列表、段落，都可以是盒子 content:内容 height:高度 width:宽度 border-width:上 下 左 右 border:边框 border-top/-left/-right/-bottom padding:内边距 margin:外边距 均为CSS样式的属性 一个盒子实际宽度、高度:content+padding+border+margin <style type="text/css"> #box { width:20px; } </style> ...<div id="box">... overflow属性: 当内容溢出盒子框时，overflow属性取值 hidden:超出部分不可见 scroll:显示滚动条 auto:如果有超出部分，显示滚动条 border属性: border-width:px, thin, medium, thick border-style:dashed(虚线), dotted(点), solid(实线), double(双实线) border-color:颜色 border:width style color 水平分隔线： .line { height:1px; width:500px; boder-top:1px solid #e5e5e5; }
7.2.盒子模型(2):
对浏览器默认的设置清零: * { margin:0; padding:0; } 取值:px, %(外层盒子的宽度和高度) 上对应下，左对应右,顺时针 margin:1px, 1px, 1px, 1px; 上右下左 margin:1px, 2px, 3px; 省略最后一个，则左则值等于右侧值2px margin:1px, 2px; 上下相等，左右相等 margin:1px; 上下左右相等 div { width:100px; height:100px; margin:15px 20px 15px 30px; border:1px solid red; } margin的合并：垂直方向合并，水平方向不合并，哪个方向高，留下哪个方向的边距 水平居中: 图片、文字水平居中:text-align:center; div水平居中:margin:0 auto; 浏览器自动计算左右边距值 CSS: #newsimglist{ text-align:center; font-size:0; /*否则图间有空隙*/ } #newsimglist img{ height:100px; width:100px; margin-left:5px; border:1px solid #0cf; padding:5px; } HTML: <div id="newsimglist"> <img src="images/crisis.jpg"> <img src="images/crisis.jpg"> <img src="images/crisis.jpg"> </div>
7.3.CSS定位机制:
用处：确定盒子位置 文档流flow: 默认定位，从上到下，从左到右 元素分类:block, inline, inline-block block: 独占一行，元素的height, width, margin, padding都可设置 如:<div>,<p>,<h1>...<h6>,<ol>,<ul>,<table>,<form> 将a设置为block元素： a { display:block; } inline: 不单独占用一行，width、height不可设置，width就是它包含的文字或图 片的宽度，不可改变, inline元素之间有一个间距问题 如:<span>,<a> 将div转化为inline元素: div { display:inline; } inline-block元素: 同时具备inline元素和block元素的特点，不单独占用一行，元素的 height,width,margin,padding都可设置 如：<img> 元素类型转化:display 浮动float: 左右并列，左边向左浮动，右边向右浮动 用处：多列布局;图文混排 float属性： left:左浮动 right:右浮动 none:不浮动 <div>float:left<div/> 情况分析： 1.当多个box不浮动时每个box单独占据一行，当第一个box向右浮动脱离文 档流，后面的box则会向上占据box1原有的位置 2.当宽度足够时，多个box浮动则会排布在同一列，当宽度不够时，后续box 会跳转到第二行； 当第一个box高度大于后续box时，跳转时后续box会在第一个box过高而多 占据的位置之后填补 clear属性: both:清除左右两侧的浮动 left\right:清除单侧浮动 用法:使用单侧清除浮动时，可以将多个box都靠一边放置，如靠右，第 二个box使用clear:right，则两个box都居右显示 当使用双侧浮动清除，该box单独占据一行 none:默认值，只在需要移除已指定的清除值时用到层定位layer: 摆在上面的层可以遮蔽下面的层，使用position属性设定 position属性: static:默认值，没有定位，元素出现在正常的流中，top, bottom, left, right, z-index无效 fixed:固定定位，相对于浏览器窗口进行定位(坐标原点始终在窗口的左上 方)，不会随浏览器窗口的滚动条滚动而变化，总在视线里的元素 #fix-box{ width:200px; height:200px; border:1px solid red; position:fixed; left:100px; /*距离坐标的距离*/ top:50px; } relative:相对定位，相对于其直接父元素进行定位 定位为relative的元素脱离正常的文档流中，但其在文档流中的 原位置依然存在，如果其下存在static元素，则不会占据其原位 置 relative定位的层总是相对于其直接父元素，无论其父元素是什 么定位方式 absolute:绝对定位，相对于static定位以外的第一个父元素进行定位 定位为absolute的层脱离正常文本流，但与relative的区别:其在 正常流中的原位置不再存在，static元素会占据其原位置 对于absolute定位的层总是相对于其最最近的定义为absolute或 relative的父层，而这个父层并不一定是其直接父层 对于absolute定位的层，如果其父层中都未定义absolute relative，则其将相对body进行定位 relative+absolute: 父元素box1:position:relative; 子元素box2:position:absolute; 子元素box2:top,bottom,left,right相对于父元素来进行偏移定 位，为负值时可以超出父元素区域 当box1移动时，box2也会随之移动 z-index:值大在上面 值很小如-999，则为底层;值很大如999，则为顶层