一、CSS的Function：
使用CSS定义样式，各元素使用统一的样式声明，同时提高了样式的可重用性和可维护性。
如果使用HTML标记中的属性来定义样式，各元素对于样式的属性定义各不相同。
二，What is CSS?
CSS:（Cascading Style Sheets）层叠样式表，又称为级联样式表，简称样式表。
用于HTML文档中元素的样式定义。实现了将内容和表现分离，提供代码的可重用性和可维护性。
三、使用CSS样式表
由多个样式规则组成，每个样式规则有两个部分：选择器和样式声明，有三种方式分别为：内联方式、内部样式表、外部样式表。
（1）内联方式使用CSS
直接写在元素上的样式。（属性与属性值之间用：连接，多对属性之间用；隔开）
<body>
<h1 style="background-color:sliver;color:red;">CSS可以美化页面</h1>
</body>
（2）内部样式表
在head下面的style标签里写的样式。
在<style>元素中添加样式的规则：
1.可以定义多个样式规则。
2.每个样式规则有两个部分组成：选择器（决定哪些元素使用这些规则）和样式声明（一对大括号，包含一个或者多个属性/值对）。如下代码所示，其中h2为选择器，color:blue;为样式声明。
<head>
<meta charset="UTF-8">
<title>CSS的用法</title>
<style>
h2 {
color:blue;
}
</style>
</head>
（3）外部样式表
第一步：创建一个单独的样式表文件用来保存样式规则（一个纯文本文件，文件后缀为.css，给文件中只能包含样式规则，样式规则由选择器和样式声明组成）
如下代码所示为.css文件中的内容
/*里面写注释内容*/
p {
color:yellow;
}
第二步：在需要使用该样式表文件的页面上，使用<link>元素链接需要的外部样式表文件。（在文档的<head>元素内添加<link>元素）如下所示：
<head>
<link rel="stylesheet" href="a.css"/>
四、样式表特征
1.继承性：大多数的CSS样式规则都可以被继承，子元素可以继承父元素的一些样式（只能继承字体和颜色）
2.层叠性：多次给某元素设置样式，若样式不重复则效果叠加。
3.优先级：多次给每个元素设置样式，若样式重复了，则以后者为准，叫做就近原则。
五、CSS选择器
1、元素选择器：html文档的元素就是选择器，比如<p>、<h1>等。
如： p {
color:blue;
}
2、类选择器：选择class相同的元素。（首先声明一个class元素，然后用.className{}进行选择即可）如下所示，选择器前面加.
<h1 class="female">老师</h1>
.female {
color:pink;
}
3、id选择器：根据ID选择唯一的元素。（首先在文档中的某个元素上添加id值，然后通过#选择器进行选择即可）如下所示，选择器前面加上#
<p id="p4">瞧你</p>
#p4 {
color:red;
}
4、选择器组：写出多个选择器，之间互相用逗号相隔开，浏览器会选中每个选择器所对应目标的并集。
用以上的2 、3选择器进行演示内容如下：
.female,#p4 {
font-family:
"微软雅黑","文泉驿正黑","黑体";
}
5、派生选择器分为：（依据元素在其位置上的关系来定义样式）
<div id="d1">
北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎</b>大厦B8
</div>
5.1后代选择器：选择满足条件的子孙
#d1 b {
color:red;
}
5.2 子元素选择器：选择满足条件的儿子
#d1>b {
font-size:30px;
}
ps:派生选择器的优先级最高。
6、伪选择器：选择特定状态下的元素，使用冒号（：）作为结合符，结合符左边是其他选择器，右边是伪类。
常用的伪类有：（：link）、（：active）、（：visited）、（：hover）、（：focus）
（1）link:选择未访问过的超链接
a:link {
color:red;
}
（2）visited:选择访问过的超链接
a:visited {
color:green;
}
（3）active:选择激活态（正在点）的元素
#b1:active {
background-color:red;
}
（4）focus:选择有焦点（光标在闪烁）的元素
#t1:focus {
background-color:yellow;
}
（5）hover:选择鼠标悬停的元素
img:hover {
width:250px;
height:250px;
}
六、尺寸与框模型
1、样式单位：%百分比、in英寸、cm厘米、mm毫米、pt磅、px像素（计算机上屏幕上的一个点）、em（1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍）、RGB(X,X,X)、RGB(X%,X%,X%)、#rrggbb（十六进制数）、#rgb(简写的十六进制数）
2、边框：
（1）单边设置border：border-left:宽度 形状 颜色; left/right/top/bottom
h1 {
border-left:10px solid blue;
}
（2）四边设置border：border:宽度 形状 颜色；
h1 {
/*dashed设置边框为虚线*/
border:1px dashed red;
width:300px;
height:200px;
}
（3）/*内容溢出时的处理*/
p {
overflow:auto;
}
3、框模型（box model）
定义了元素框处理元素的内容、内边距（内容区域的尺寸不会改变，但会影响元素框的总尺寸）、边框和外边距的方式。
（1）单边设置边距（left/right/top/bottom)
#d4 {
padding-left:20px;
padding-top:40px;
margin-bottom:20px;
}
（2）设置四条边相同的框
#d2 {
padding:20px;
margin:30px;
}
（3）四条边设置不同的边距(固定的顺序为：上右下左，顺时针)
#d3 {
padding:10px 20px 30px 40px;
margin:40px 30px 20px 10px;
}
（4）对边设置边距（上下 左右）
#d5 {
padding:20px 40dx;
margin:40px 20px;
}
（5）对边设置的特殊用法：
当使用这种方式设置margin时，若左右的值为auto,则该元素会水平居中。
#d6 {
margin:30px auto
}
七、背景
1、设置背景图：background-image
默认是none,表示背景上没有放置任何照片，如果需要设置一个背景图片，需要用起始字母url附带一个图像的URL值。
2.背景重复：background-repeat
默认情况下，背景图像在水平和垂直方向上重复出现，创建一种称为“墙纸的效果”
repeat:在水平和垂直方向上重复。repeat-x:仅在水平方向上重复，repeat-y:仅在垂直方向上重复，no-repeat：只出现一次。
3.背景定位：background-position（改变图像在背景中的位置）
center:在中间显示top:在顶部显示left:在左边显示right:在右边显示bottom:在上边显示
4.背景图片的固定：background-attachment
默认情况下，背景图片会随着页面的滚动而移动。默认值是scroll（移动）、fixed（固定）
如下代码所示
body {
background-image:url(../images/background.png);
background-repeat:repeat-y;
background-position:center;
background-attachment:fixed;
}
八、文本格式化
1.控制字体：指定字体（font-family:value1,value2,value3;）、字体大小（font-size:value;）、字体加粗（font-weight:normal/bold;）
2.控制文本格式：文本颜色（color:red;）、文本排列（text-align:left/right/center）、文字修饰（text-decoration:none/underline）、行高（line-height:value;）、首行文本缩进（text-indent:value;）、
PS:一般情况下，首行缩进两个字符：text-indent:2em;行高（文字在行高范围内垂直居中）设置为：line-height:3em;
注意：当行高=元素的高时，文字垂直居中。
p1 {
height:100px;
line-height:100px;
}
居中两种表达区别：（margin:auto;）框居中，（text-align:center;）框中的文字居中。
九、表格样式
1.表格内容在<body></body>标签中完成（详情请参考我的上一篇“JAVA中HTML知识点总结”），然后再<head></head>标签下的<style></style>中完成格式设置。
2.表格合并：border-collapse:sepatate/collapse;
十、定位
1.Why 要定位？
为了解决元素的布局（摆放）问题，定义元素框相对于父元素，另一个元素甚至浏览器窗口本身的位置。（比如网页上显示的广告信息，它们不会随着滚动条的移动而该边位置）
2.定位方式分类：
（1）普通流定位：元素本身默认的布局方式。
块元素垂直排列（hn/p/div/ol/ul/table）、行内元素左右排列（span/a/img/input）
（2）浮动定位：可以让块左右排列（普通的流定位中块是垂直排列，使用浮动定位可以让块元素左右布局），分为右浮动和左浮动，浮动的目标将脱离流。
float:none/left/right;
clear:left/right/none/both;（定义了元素的哪边上不允许出现浮动元素）
浮动的步骤：one（目标离队）、two（弟弟跟上）、three（浮动到对应的位置）
用下图展示右浮动的整个进行过程：（同理，左浮动的代码同右浮动代码相似）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
#d0,p {
width:400px;
border:1px solid red;
}
#d0 div {
width:100px;
height:100px;
margin:10px;
}
#d1 {
background-color:red;
}
#d2 {
background-color:green;
}
#d3 {
background-color:blue;
}
/*浮动*/
#d1,#d2,#d3 {
float:left;
}
/*消除浮动影响*/
/*1.只消除对叔叔的影响*/
p {
/*clear:left;*/
}
/*2.消除对父亲的影响*/
#d0 #d4 {
width:0;
height:0;
border:0;
clear:left;
}
</style>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<!-- 用来消除浮动影响 -->
<div id="d4"></div>
</div>
<p>浮动时观察我位置！</p>
</body>
</html>
（3）特殊定位：分为相对定位、绝对定位、固定定位。
它们的本质都是一样的，都是相对于某个目标设置偏移量，只是目标不同，设置偏移的方式相同。
设置偏移量用下图表示：（如：left是以做边为准，向+为正偏移，其后的同理即可）
相对定位：以自己原始的位置为目标，进行偏移，不脱离流（队伍）
代码如下：
position:relative;
left:2px;
right:-2px;
用图形展示如下：
绝对定位：以带有position的父辈（若都没有带position，则以body为目标）为目标，设置偏移量，脱离流（队伍）。
代码如下：
position:absolute;
left:20px;
top:50px;
用图形展示如下：
固定定位：以窗口为目标，设置偏移量，目标脱离流（队伍），元素会固定在窗口上，不会随着滚动条而滚动。
代码如下：
position:fixed;
left:20px;
top:80px;
用图形展示如下：
堆叠顺序：一旦修改了元素的定位方式，则元素可能会发生堆叠。可以使用z-index属性来控制元素框出现的重叠顺序。
z-index:value;
value值越大，表示堆叠顺序越高，即距离用户越近。如下图所示:1的value值大于2大于3.
十一、列表样式
list-style-type属性用于控制列表中列表项标志的样式。
无序列表：出现在各列表项旁边的圆点。"none（无标记）、disc（实心圆为默认值）、circle（实心圆）、square（实心方块）等”
有序列表：可能是字母、数字或者另外某种计数体系中的一个符号。“none（无标记）、decimal（数字1,2,3,为默认值）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）等”
list-style-image属性使用图像来替换列表项的标记，取值为：url(),指定图像作为有序或者无序列表项的标志。
十二、显示方式
元素都有自己默认的显示方式，默认显示方式如下：
##块
有宽高，独立成行（垂直排列）。如<hn>、<p>、<div>、<ol>、<ul>、<table>
##行内
没有宽高，不独立成行（横向排列）。如<span>、<b>、<strong>、<i>、<em>、<u>、<del>、<a>
##行内块
有宽高，不独立成行（横向排列）。如<img>、<input>、<select>、<textarea>
除了默认的方式外，可以使用display属性来修改元素框的显示方式，也就是改变生成的框的类型。
display:block;将元素的显示方式设置为块
display:inline;将元素的显示方式设置为行内元素
display:inline-block;将元素的显示方式设置为行内块的方式。
display:none;不显示此元素，隐藏该元素。
注意：将块改为行内块，以实现左右排列。有一个问题不好解决，块与块之间写代码时，需要换行，比如写一个<div>后，如果还需要在写一个<div>则需要换行到下一行写。如果改为行内块，换行则会被当作一个空格对待，则两个<div>之间永远都会隔着一个空格，去不掉。要去掉，则需要横着写。
十三、鼠标形状。
默认情况下，光标会根据用户的操作发生变化。
鼠标悬停在链接上时，形状变为手状。悬停在按钮上时，变为箭头。悬停在文本区时，变为I形状。
可以使用cursor属性指定鼠标光标类型，取值如下：
default（箭头型）、pointer（手型）、crosshair（+型）、text（I型）、wait（旋转的圆圈型）、help（？型）等。
My conclusion:
在java中这块内容是最简单的，也比较有意思，在敲码的过程中很清楚自己每一步的最终目的，逻辑性比较少，但是在制作页面的时候，需要life的审美和各个小知识点的掌握程度、灵活运用。在做网页的过程中，让我瞬间产生,毕业经济独立后，纯属生活趣味性的学摄影的idea.
fighting my gril,把生活中的每一天经营成为自己喜欢的样子
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
