我们学过了html之后，接下来要接触的就是web标准中另一个重要的东西，就是css。Web标准不是某一个标准，而是很多标准的集合。网页主要是由3部分构成：结构（html）；表现（css）；行为（javascript）。这些标准大部分是由w3c制定的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
.1Html <!doctype>声明标签： 1.1定义和用法： * <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 * <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
.2.各版本的声明 * HTML5：<!DOCTYPE html> <meta charset="utf-8">
-1.（元素选择器）HTML标记定义 <p>...</p> p { 属性:属性值 ；属性1:属性值1 } p可以叫做选择器，定义那个标记中的内容执行其中的样式 一个选择器可以控制若干个样式属性，他们之间需要用英语的“;”隔开，最后一个可以不应加“;”
-2.（类选择器）Class定义 <p class="p">...</p> class定义是以“.”开始 .p { 属性:属性值 ；属性1:属性值1 }
-3. （id 选择器）ID定义 <p id="p">...</p> ID定义是“#”开始的 #p { 属性:属性值 ；属性1:属性值1 }
-----优先级问题 1.ID>Class>HTML 2.同级时选择离元素最近的一个的 #p { color: red } #p { color: #f60 } 执行颜色为#f60的
---.组合选择器（同时控制多个元素） h1,h2,h3 { font-size: 14px; color: red; } 选择器组合可以使用“,”隔开 6.伪元素选择器 1.a:link : 正常连接的样式 2.a:hover : 鼠标放上去的样式 3.a:active : 选择链接时的样式 4.a:visited : 已经访问过的链接的样式
-4.（派生选择器）派生选择器
派生选择器允许根据文档的上下文关系来确定某个标签的样式。 类型选择器、id选择器、类选择器都可以应用派生选择器。
例子：
css代码
li strong {font-style: italic;}
#red strong {font-style: italic;}
html代码
<p><strong>我是粗体字，不是斜体字。</strong></p> <p id="red"><strong>我是斜体字。</strong></p> <ol> <li> abc<strong>我也是斜体字。</strong>123 </li> <li>我是正常的字体。</li> </ol>
-1.内链样式表 <body style="background-color:green; margin:0; padding:0;"></body>
-2.嵌入式样式表 <style type="text/css"></style> 需要将样式放在<head></head>中
-3.引入式样式表 <link rel="StyleSheet" type="text/css" href="style.css">
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--嵌入式样式表 ：只应用于某个html文档 <style type="text/css"> /*img { 300px; }*/ </style>--> <!--引入式样式表：应用于全局（整站）样式， 设置某个页面的css样式：css样式文件要跟html文件路径名相同 <link rel="stylesheet" type="text/css" href="css/cssTest.css"/>--> </head> <body> <!--<img src="img/t01.png"> <img src="img/t01.png"> <img src="img/t01.png">--> <p>hello css</p> <p>java03 css</p> <!--内链样式表： 使用css代码来设置某一个标签的样式 <p style="background: red; color: black;">hahha</p>--> </body> </html>
-1. 颜色属性 color属性定义文本的颜色 color：green color：#ff6600 color：#f60 简写式 color：rgb（255,255,255） 红(R)、绿(G)、蓝(B) 每个的取值范围0~255 color：rgba（255,255,255,1） RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度
-2. 字体属性 1.font-size 字体大小 font-size:14px 2.font-family 定义字体 font-family：微软雅黑，serif； 可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个 3.font-weight 字体加粗 normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细) 100、200、300~900 400 = normal，而 700 = bold
-3.背景属性
1.背景颜色 background-color
2.背景图片 background-image
background-image:url(图片路径)； background-image:none
3.背景重复 background-repeat
repeat ： 重复平铺满 repeat-x ： 向X轴重复 repeat-y ： 向Y轴重复 no-repeat ： 不重复
4.背景位置 background-position
横向（left,center,right） 纵向（top,center,bottom）
1-4简写方式：—background:背景颜色 url(图像) 重复 位置 —background:#f60 url(images/bg,jpg) no-repeat top center
5.background-size: 值：
-length:设置背景图像的高度和宽度。第一个值设置高度，第二个值 设置宽度。如果只设置一个值，则第二个值会被设置为auto。
-percentage:以父元素的百分比来设置背景图像的高度和宽度。第一 个值为宽度，第二个值为高度。如果只设置一个值，则另一 个值为auto。
-cover:把背景图片扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
-contain:把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区 域。
-4. 文本属性
1.text-align 横向排列 left，center，right
2.line-height 文本行高 ： 1.%基于字体大小的百分比行高 2.数值 来设置固定值
3.text-indent 首行缩进
4.letter-spacing 字符间距 :1.normal 默认 2. length设置具体的数值（可以设置负值） 3. inherit 继承
-5.边框属性：
1.边框风格： border-style
统一风格（简写风格）border-style ：
单独定义某一方向的边框样式：
border-bottom-style 下边边框样式 border-top-style 上边边框样式 border-left-style 左边边框样式 border-right-style 右边边框样式
边框风格样式的属性值： 1、none 无边框 2、solid 直线边框 3、dashed 虚线边框 4、dotted 点状边框 5、double 双线边框 6、groove 凸槽边框 7、ridge 垄状边框 8、inset inset边框 9、outset outset边框 10、inherit继承 依托border-color的属性值
2.边框宽度 border-width
统一风格： border-width：
单独风格： border-top-width 上边边框宽度 border-bottom-width 下边边框宽度 border-left-width 左边边框宽度 border-right-width 右边边框宽度
边框宽度的属性值： 1、thin 细边框 2、medium 中等边框 3、thick 粗边框 4、px 固定值的边框 5、inherit继承
3.边框颜色
border-color 统一风格：
border-color 单独风格： border-top-color 上边边框颜色 border-bottom-color 下边边框颜色 border-left-color 左边边框颜色 border-right-color 右边边框颜色
属 性 值 ： 颜色值的名称： red、green RGB： rgb(255,255,0) RGBA：rgba(255,255,0,0.1) 十六位进制：#ff0、#ff0000 继承inherit
属性值的四种情况 ： 一个值：border-color：（上、下、左、右）； 两个值：border-color：（上下） （左右）； 三个值：border-color:（上） （左、右） （下）; 四个值：border-color：（上）（右）（下）（左）;
-6.列表属性：
1.标记的类型 list-style-type
none 无标记 Disc 默认。标记是实心圆 circle 标记是空心圆。
Square 标记是实心方块 decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。) lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。) upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
Hebrew 传统的希伯来编号方式 Armenian 传统的亚美尼亚编号方式 georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字 hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
2.标记的位置 list-style-position inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本 不根据标记对齐。 inherit 规定应该从父元素继承 list-style-position 属性的值。
3.设置图像列表标记 list-style-image URL 图像的路径。 none 默认。无图形被显示。 inherit 规定应该从父元素继承 list-style-image 属性的值。
4.简写方式
list-style
list-style:square inside url('/i/arrow.jpg');
1. div和span
DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式
DIV和span的区别在与，span是内联元素，div是块级元素
2.盒模型
margin ： 盒子外边距
padding ： 盒子内边距
border ： 盒子边框宽度
width ： 盒子宽度
height ：盒子高度
3.布局相关的属性
-1.position 定位方式
1.相对定位 ：relative
2.绝对定位 ：absolute
3.根据浏览器窗口进行定位 ：fixed
4.没有定位 ：static
5.继承：inherit
-2.定位
left（左），right（右），top（上），bottom（下）离页面顶点的距离
-3.z-index 层覆盖先后顺序（优先级）
---------------------------------------------------------------------------------------------------------------------------------------------------------------
3注 ：css定位
top bottom left right
相对定位：position：relative ---> 相对于该元素本身的位置进行的位移
绝对定位：position：absolute--->根据某元素的 父级元素进行位移。如果没有父级窗体，就会根据body进行位移
锁定：fixed -----> 根据body锁定某元素到某个位置
相对定位 绝对定位 区别：
相对定位的元素在位移时不会失去原有的位置（不会被覆盖掉）
绝对定位的元素在位移时会失去原有 位置（会被覆盖掉）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/Absolute-Relative.css"/> </head> <body> <div class="div1">1</div> <div class="div2">2 <div class="sub1">sub1</div> <div class="sub2">sub2</div> </div> <div class="div3">3</div> </body> </html>
@charset "utf-8"; div{ width: 300px; height: 200px; } .div1{ background-color: red; /*position: absolute; left: 300px; top: 300px;*/ position: relative; } .div2{ background-color: gray; /*position: absolute; left: 400px; top: 200px; */ position: relative; left: 300px; } .div3{ background-color: deepskyblue; /*position: absolute; left: 500px; top: 100px;*/ position: relative; left: 600px; } .sub1,.sub2{ width: 60px; height: 60px; } .sub1{ background-color: yellow; /*position: absolute;*/ position: relative; left: 60px; } .sub2{ background-color: green; /*position: absolute;*/ position: relative; }
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
-4.display 显示属性
display：none 层不显示
display：block 块状显示，在元素后面换行，显示下一个块元素
display：inline 内联显示，多个块可以显示在一行内
-5.float 浮动属性
left 左浮动 right 右浮动
-6.clear 清除浮动 clear：both
-7.overflow 溢出处理
hidden 隐藏超出层大小的内容
scroll无论内容是否超出层大小都添加滚动条
auto 超出时自动添加滚动条