CSS
基本语法
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>CSS基本语法</title> 5 <style type="text/css"> 6 选择器{ 7 属性1：属性值1； 8 属性2：属性值2； 9 } 10 </style> 11 </head> 12 <body> 13 正文 14 </body> 15 </html>
工具：
站长屏幕取色器
css去空格插件
User Agent Override
firebug
★默认字体做网页★
【XP无微软雅黑字体样式】
选择器：样式名称
一、标签选择器（HTML选择器）
与标签重名，只要正文出现同一标签，那么标签里的内容就规定好了
使用场合：li,td,dd等大量出现
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>标签选择器示例</title> 5 <style type="text/css"> 6 ul{ 7 font-size:18px; 8 font-family:"新宋体"; 9 color:#0000FF; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li>洪秀柱继任演讲全文</li> 16 <li>缅甸新总统吴廷觉正式宣誓</li> 17 <li>联合国宣布马尔维斯群岛位于阿根廷海内</li> 18 <li>日韩媒体震惊国足出线FIFA</li> 19 </ul> 20 </body> 21 </html>
二、类选择器（Class选择器）
自定义
使用场合：通常用Class选择器
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>Class选择器示例</title> 5 <style type="text/css"> 6 ul{ 7 font-size:18px; 8 font-family:"新宋体"; 9 color:#0000FF; 10 } 11 /*ul .red 表示的是父子关系，也可称继承关系 12 div.myDivul ul 三层关系 13 */ 14 ul .red{ 15 color:#FF0000; 16 } 17 </style> 18 </head> 19 <body> 20 <ul> 21 <li>洪秀柱继任演讲全文</li> 22 <li>缅甸新总统吴廷觉正式宣誓</li> 23 <li>联合国宣布马尔维斯群岛位于阿根廷海内</li> 24 <li class="red">日韩媒体震惊国足出线FIFA</li> 25 </ul> 26 </body> 27 </html>
三、ID选择器 #
HTML文档中会使用一次，而且仅一次
使用场合：慎用，搭建框架，
范例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>ID选择器示例</title> 5 <style type="text/css"> 6 #news{ 7 width:430px; 8 border:1px dotted blue; 9 } 10 </style> 11 </head> 12 <body> 13 <ul id="news"> 14 <li>洪秀柱继任演讲全文</li> 15 <li>缅甸新总统吴廷觉正式宣誓</li> 16 <li>联合国宣布马尔维斯群岛位于阿根廷海内</li> 17 <li>日韩媒体震惊国足出线FIFA</li> 18 </ul> 19 </body> 20 </html> 21 四、并集选择器 【只要满足一个就行】 22 1.多个选择器之间可以是多个不同或者相同类型 23 2.多个选择器之间必须用英文半角逗号“◆,◆”隔开 24 范例： 25 <html> 26 <head> 27 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 28 <title>Document</title> 29 <style type="text/css"> 30 p{ 31 font-size: 16px; 32 color: green; 33 } 34 /*并集选择器*/ 35 .smallFont,#author{ 36 font-size: 12px; 37 } 38 </style> 39 </head> 40 <body> 41 <h1>望庐山瀑布</h1> 42 <p class="smallFont">日照香炉生紫烟，</p> 43 <p>遥看瀑布挂前川。</p> 44 <p>飞流直下三千尺，</p> 45 <p>疑是银河落九天。</p> 46 <span id="author">作者：李白</span> 47 48 </body> 49 </html>
五、交集选择器 【都要满足才行】
1.格式：标签+类选择器 或 标签+ID选择器
2.选择器之间◆不能有空格◆
范例：
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 <title>Document</title> 5 <style type="text/css"> 6 p{ 7 font-size: 16px; 8 color: green; 9 } 10 /*并集选择器*/ 11 .smallFont,#author{ 12 font-size: 12px; 13 } 14 /*交集选择器*/ 15 p.blue{ 16 color: blue; 17 font-size: 10px; 18 } 19 </style> 20 </head> 21 <body> 22 <h1>望庐山瀑布</h1> 23 <p class="smallFont">日照香炉生紫烟，</p> 24 <p>遥看瀑布挂前川。</p> 25 <p>飞流直下三千尺，</p> 26 <p class="blue">疑是银河落九天。</p> 27 <spanid="author">作者：李白</span> 28 <h1 class="blue">结束</h1> 29 </body> 30 </html>
六、后代选择器 【父子关系】
1.选择器之间可以是多个不同或者相同类型并有层级关系的
2.选择器之间用◆空格◆隔开
范例：
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4 <title>Document</title> 5 <style type="text/css"> 6 p{ 7 font-size: 16px; 8 color: green; 9 } 10 /*并集选择器*/ 11 .smallFont,#author{ 12 font-size: 12px; 13 } 14 /*交集选择器*/ 15 p.blue{ 16 color: blue; 17 font-size: 10px; 18 } 19 /*后代选择器*/ 20 p span{ 21 color: red; 22 } 23 </style> 24 </head> 25 <body> 26 <h1>望庐山瀑布</h1> 27 <p class="smallFont">日照香炉生紫烟，</p> 28 <p>遥看瀑布挂前川。</p> 29 <p>飞流直下<span>(骑着牛的孩子)</span>三千尺，</p> 30 <p class="blue">疑是银河落九天。</p> 31 <span id="author">作者：李白</span> 32 <h1 class="blue">结束</h1> 33 </body> 34 </html>
字体属性
font 把所有针对字体的属性设置在一个声明中
【顺序】eg, font:italic bold 16px "楷体"
font-family 设置字体系列
font-size 设置字体大小
相对长度单位
◆◆em 相对父元素的大小（政府机构等）
使用em，当文字大小调整后，按比例发生变化
范例：body{font-size:6.5%;}
h1{font-size:2em}----20px
ex 相对与特定字体中字母X的高度
px 相对与特定设备的分辨率，常用单位
绝对长度单位（仅在打印或浏览器物理尺寸和特性已知的情况下才比较有用） cm\in(英寸)\mm\pt(点)
font-style 设置字体风格（斜体）normal italic
font-weight 设置字体的粗细 bold
文本属性
color
direction 设置文本的方向
line-height 设置行高 div20px ,内容20px,内容居中
text-align 文本对齐方式（left\center\right）
text-decoration 设置文本修饰（underline\none\line-through 删除线）
white-space 设置元素中空白的处理方式
text-indent 缩进元素文本中的首行
letter-spaceing 字符间距
强制不断行(white-space:nowrap;)：指一行内容较多，浏览器默认会换行显示
若设置，则超过一行也不断行
范例：
float 属性
取值：left\right\none
作用：1.★块元素同行排列显示★，一般用于排版、分栏显示
2.设置浮动属性后，脱离文档流
【注意】使用浮动后要及时清除，以免影响后面的网页元素
做法：1.最后加一个div clear：both;
2.在父容器中，加overflow：hidden;
clear 清除浮动
规定元素的哪一侧
作用：
取值：left
right
overflow 属性
作用：定义溢出元素内容区的内容会如何处理
表现形式：强制换行
取值：scroll
visible
hidden
auto
列表属性 list-style
list-style 将列表属性设置在一个声明中
list-style-image 将图像设置为列表标志
list-style-position 设置列表中列表项标志的位置（inside\outside）
list-style-type 设置列表项标志的类型
-------------------------CSS引入方式--------------------------
优先级，就近原则
行内样式>内部样式表>外部样式表
1.行内样式 style引入
<p style="属性名：属性值">
2.内部样式表（内嵌样式表）
作用：调试
1 <head> 2 <style type="text/css"> 3 .ves-gos_2{ 4 left:60px; 5 top:-60px; 6 } 7 </style> 8 </head>
3.外部样式表 .css
★★链接式 link 优先加载CSS文件到页面
导入式 @import url()用户体验不行
低版本浏览器不可用
列表属性
list-style-type 设置列表项标识的类型：disc实心圆|circle（空心圆）|square（正方形）
list-style none去掉默认属性设置
超链接伪类(选择器) 【！！！！顺序】
a:link{color:red} 未访问的链接
a:visited{color:blue} 已访问的链接
a:hover{color:green} 当鼠标悬停在链接上
a:active{color:yellow} 被选择的链接
鼠标选择控制 cursor
url 使用自定义标签
default 默认光标
pointer 超链接的指针
wait 程序正在忙碌
move 对象可被移动
--------------------------------盒子模型-------------------------
IE content包含padding+border
W3C <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1.边框 border
border-style:solid/none/dashed
★★中间位置加方位★★
border-right-style:solid;
border-color
border-color：属性值 属性值----先上下，后左右
border-color：属性值 属性值 属性值 ----先上，后左右，最后下
border-width
thin medium thick
2.填充（内边距） padding(上 右 下 左)【顺时针】
3.边界（外边距） margin(上 右 下 左)【顺时针】
a.百分比 基于符对象高度或宽度的百分比
b.长度值
c.auto 浏览器设定，应用：跨浏览器居中
margin：3px 5px 7px(5px);
margin：3px 5px (3px 5px);
★★margin：8px (8px 8px 8px);★★
技巧：给背景色，margin和padding不会有背景色
display属性
作用：1.控制元素的显示和隐藏
2.块和行的转换
block\ inline \none \list-item
相似属性visibility,规定元素是否可见。【不可见的元素也会占页面的空间】
浙公网安备 33010602011771号