目 录
温馨提示：以下所有案例都是选用内部样式的方法来引入css代码的哦！请慢慢享用~~
1.相对位置绝对位置属性的设置（position）
- 绝对定位：所有元素只参考原点位置（页面的左上角即为原点）
- 相对定位：下一个元素的位置会参考上一个元素的位置（且所有元素默认为相对定位）
| 属性 | 属性值 | 描述 |
|---|---|---|
| position | relative | 设置元素定位方式为相对定位 |
| absolute | 设置元素定位方式为绝对定位 |
补：相对定位的间距设置使用的是 上边距 margin-top ，下边距 margin-bottom ，左边距 margin-left ，右边距 margin-right ，复合设置 margin。而绝对定位的间距设置没有margin，直接使用left，right，top，bottom。
2.文字的设置
(1)文字的基本属性（font）
属性 |
属性值 | 描述 |
|---|---|---|
font-family |
例如：黑体，隶书，楷书，Conrier New等等 | 设置文字字体样式 |
| font-size | （绝对尺寸/关键字/相对尺寸/百分比） 例（30px/large/0.1cm/10%） 关键字包括：xx-small(极小)，x-small（较小），smaller,small（小），medium（标准），large（大） |
设置字体大小 |
| font-style | normal、italic、oblique |
正常显示字体、斜体字、倾斜角度大一点 |
| font-weight | normal、bold、bolder、lighter | 正常显示、粗体（数字700粗细值）、加粗、细体（比正常字体稍微细一点） |
| number | 一般整百设置，有9个级别（100----900）数字取值越大越粗 | |
| text-shadow | 5px 5px 5px #FF0000;规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色 | 设置字体的阴影 |
| font-variant | normal、small-caps | 正常字体、表示英文字母显示为小型的大写字母 |
<style type="text/css">
.p1{
font-family:隶书;
font-size:large;
font-style:italic;
}
.p2{
font-weight:bolder ;
}
.p3{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<p class="p1">你好！JAVA</p>
<p class="p2">欢迎来到这里</p>
<p class="p3">这里是新世纪的大门</p>
</body>
(2)文字的排版以及添加文字的修饰
| 属性 | 属性值 | 描述 |
|---|---|---|
| letter-spacing | normal（正常显示，默认） 数字，可以使用负数，带上单位px |
用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。 |
| text-decoration | underline | 添加下划线 |
| overline | 添加上划线 | |
| line-through | 添加删除线 | |
| blink | 添加闪烁效果（只能在Netscape的浏览器中正常显示） | |
| none | 没有任何的修饰 |
<html>
<style>
#p1{
letter-spacing:5px
}
#p2{
letter-spacing:15px
}
#p6{
text-decoration:underline
}
#p7{
text-decoration:overline
}
#p3{
text-decoration:line-through
}
#p4{
text-decoration:blink
}
#p5{
text-decoration:none
}
</style>
</head>
<body>
<h1>设置字符间距</h1>
<hr>
<p id="p1">这段文字的字符间距为5像素</p>
<p id="p2">这段文字的字符间距是15像素</p>
<h1>文字的修饰设置</h1>
<hr>
<p id="p6">给这段文字上添加underline----添加下划线</p>
<p id="p7">给这段文字上添加overline---添加上划线</p>
<p id="p3">给这段文字上添加line-through--添加删除线</p>
<p id="p4">给这段文字上添加blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）</p>
<p id="p5">没有任何文字的修饰</p>
</body>
</html>
3.颜色的设置
| 属性 | 属性值 | 描述 |
|---|---|---|
| color | 英文单词，RGB值，颜色码 | 设置文字的颜色 |
| background-color | 英文单词，RGB值，颜色码 | 设置背景颜色 |
| background-image | 英文单词，RGB值，颜色码 | 设置背景图片 |
<style>
h1{
color:black;
font-size:50px;
}
.p1{
color:yellow
}
.p2{
color:#0033FF
}
#div1{
background-color: aquamarine;
}
#body{
background-image:url(img/beijing.jpg) ;
}
</style>
</head>
<body id="body">
<h1>使用color属性</h1>
<hr>
<p class="p1">使用color属性设置的值为关键字</p>
<div id="div1"><p class="p2">使用color属性设置的值为RGB(颜色码)</p></div>
</body>
4.背景的设置（background）
| 属性 | 属性值 | 描述 |
|---|---|---|
| background-attachment | scroll | 表示背景图片随着滚动条的移动而移动 |
| fixed | 表示背景图片固定在页面上不动，不随滚动条移动而移动 | |
| background-repeat | repeat | 背景图片在水平和垂直方向平铺 |
| repeat-x | 背景图片在水平方向平铺 | |
| repeat-y | 背景图片在垂直方向平铺 | |
| no-repeat | 背景图片不平铺 |
补充：background-position背景图片的位置设置，属性值是用两个百分比来表示分布的位置。如下图中，各个百分比相应的图片位置分布。
5.边框的相关设置
(1)边框样式的设置（border-style）
基本语法 ：(border-top-style ，border-bottom-style ，border-left-style ，border-right-style).
取值：
属性值 |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
|---|---|---|---|---|---|---|---|---|---|
| 效果 | 没有边框 | 点线 | 虚线 | 实线 | 双实线 | 凹型线 | 凸型线 | 嵌入式 | 嵌出式 |
补充：
- 取一个值：四条边框线是同一个线型
- 取两个值：上下边框使用第一个取值，左右边框使用第二个取值
- 取三个值： 上边框取第一个值，左右取第二个值，下边框取第三个值
- 取四个值：上第一个值，右取第二个值，下取第三个值，左取第四个值
<html>
<style>
#img1{
border-style:dotted
}
#img2{
border-style:dotted solid
}
#img3{
border-style:dotted solid double
}
#img4{
border-style:dotted solid double dashed
}
</style>
</head>
<body>
<img id="img1" src="chongfu.jpg" width="100" height="75" border="10" alt="">
<img id="img2" src="chongfu.jpg" width="100" height="75" border="10" alt="">
<img id="img3" src="chongfu.jpg" width="100" height="75" border="10" alt="">
<img id="img4" src="chongfu.jpg" width="100" height="75" border="10" alt="">
</body>
</html>
(2)边框宽度的设置（border-width）
基本语句：(border-width ，border-top-width ，border-bottom-width ，border-left-width ，border-right-width)
取值：
| 属性值 | thin | medium | thick | 数字 |
|---|---|---|---|---|
| 效果 | 细边框 | 中等边框 | 粗边框 | 例如：1px,10%皆可 |
(3)边框的颜色设置(border-color)
基本设置语法：(border-color，border-top-color，border-bottom-color，border-left-color，border-right-color）取值则用英文单词 ，“red”代表红色 或 RGB 颜色码都可以。、
<html>
<style>
#p1{
border-style:dotted solid double solid
}
#p2{
border-style:dotted solid double solid;
border-color:aqua red blue yellow
}
</style>
</head>
<body>
<h1>边框颜色的设置</h1>
<hr>
<p id="p1">应用边框样式复合属性定义边框的上右下左分别为点线，实线，双实线，实线</p>
<p id="p2">应用边框样式复合属性定义边框的上右下左分别为绿色，红色，蓝色，黄色</p>
</body>
</html>
(4)边框的综合设置和边距设置（margin）
边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离。上边距 margin-top ，下边距 margin-bottom ，左边距 margin-left ，右边距 margin-right ，复合设置 margin。
取值：
| 属性值 | 数字 | 百分比 | auto |
|---|---|---|---|
| 效果 | 长度（距离上下左右边距大小） | 相对于上一级元素的百分比，允许是负数 | 自动提取边框的值，默认值 |
<html>
<style>
#p1{
border-top:5px solid #FFFF00;
border-bottom:10px double #99FF00;
border-left:15px dotted #6600CC;
border-right:20px dotted #990000
}
.img1{
border:15px solid #000000
}
</style>
</head>
<body>
<h1>边框的综合设置</h1>
<hr>
<p id="p1">这段文字的上右下左边框分别使用边框属性设置不同的宽度，样式，颜色</p>
<img class="img1" src="border.gif" width="300" height="122" >
</body>
</html>
<style>
h1{
margin-top:45px;
}
#p1{
margin-top:25pt;
margin-bottom:25pt;
margin-left:30px;
margin-right:30px
}
#p2{
margin:50px 30px 10px 50px
}
</style>
</head>
<body>
<h1>边距的设置</h1>
<p id="p1">这段文字个边距应用边距属性分别设置为上下25点，左右30像素</p>
<p id="p2">这段文字个边距应用边距属性的综合设置</p>
</body>
(5)边框的圆角（border-radius）
切记需要先把边框设置后再设置圆角。例如：div { border:2px solid; border-radius:25px; }
(6)边框的阴影（box-shadow）
例：添加边框阴影 ----> box-shadow: 10px 10px 5px #888888; 详细解说如下
| box-shadow | 10px | 10px | 5px | #888888 |
|---|---|---|---|---|
| 属性名 | X方向的偏移像素 | Y方向的偏移像素 | 模糊的像素值 | 阴影颜色 |
(7)内间距的设置（ padding）
用来设置边框和其内部的元素之间的空白距离。例：上边距 padding-top ，下边距 padding-bottom ，左边距 padding-left ，右边距 padding-right， 复合设置 padding。
<style>
p{
border:7px solid #0000FF;
padding:35px 10px 15px 25px
}
</style>
</head>
<body>
<h1>边框和在其内部的元素之间空白设置</h1>
<p>这段文字内容和边框之间应用填充的属性设置，设置于=与边框上右下左之间的空白距离分别是35px,10px,15px 25px</p>
</body>
6.文本的对齐方式（text-align）
| 属性 | 属性值 | 描述 |
|---|---|---|
| text-align | left | 左对齐 |
| right | 右对齐 | |
| center | 居中对齐 | |
| justify | 两端对齐 |
<html>
<style>
.p1{
text-align:left
}
.p2{
text-align:right
}
.p3{
text-align:center
}
.p4{
text-align:justify
}
</style>
</head>
<body>
<h1>文本对齐方式的设置</h1>
<hr>
<p class="p1">这段文字为左对齐排列方式这段文字为左对齐排列方式这段文字为左对齐排列方式</p>
<p class="p2">这段文字为右对齐排列方式这段文字为右对齐排列方式这段文字为右对齐排列方式</p>
<p class="p3">这段文字为居中对齐排列方式这段文字为居中对齐排列方式这段文字为居中对齐排列方式</p>
<p class="p4">这段文字为两端对齐排列方式这段文字为两端对齐排列方式这段文字为两端对齐排列方式</p>
</body>
</html>
7.设置鼠标指针样式（cursor）
| 属性值 | 示意图 | 描述 |
|---|---|---|
| auto | 默认值，由浏览器根据当前上下文确定要显示的光标样式 | |
| default |
|
默认光标，不考虑上下文，通常是一个箭头 |
| none | 不显示光标 | |
| initial | 将此属性设置为其默认值 | |
| inherit | 从父元素基础 cursor 属性的值 | |
| context-menu |
|
表示上下文菜单可用 |
| help |
|
表示有帮助 |
| pointer |
|
表示一个链接 |
| progress |
|
进度指示器，表示程序正在执行一些处理，但是您仍然可以在该界面进行一些操作（与 wait 不同） |
| wait |
|
表示程序繁忙，您应该等待程序指向完成 |
| cell |
|
表示可以选择一个单元格（或一组单元格） |
| crosshair |
|
一个简单的十字准线 |
| text |
|
表示可以选择的文本 |
| vertical-text |
|
表示可以选择的垂直文本 |
| alias |
|
表示要创建别名或快捷方式 |
| copy |
|
表示可以复制某些内容 |
| move |
|
表示可以移动鼠标下方的对象 |
| no-drop |
|
表示所拖动的项目不能放置在当前位置 |
| not-allowed |
|
表示无法完成某事 |
| all-scroll |
|
表示对象可以沿任何方向滚动（平移） |
| col-resize |
|
表示可以水平调整列的大小 |
| row-resize |
|
表示可以垂直调整行的大小 |
| n-resize |
|
表示对象的边缘可以向上（向北）移动 |
| e-resize |
|
表示对象的边缘可以向右（向东）移动 |
| s-resize |
|
表示对象的边缘可以向下（向南）移动 |
| w-resize |
|
表示对象的边缘可以向左（向西）移动 |
| ne-resize |
|
表示对象的边缘可以向上和向右（北/东）移动 |
| nw-resize |
|
表示对象的边缘可以向上和向左（北/西）移动 |
| se-resize |
|
表示对象的边缘可以向下和向右（向南/向东）移动 |
| sw-resize |
|
表示对象的边缘可以向下和向左（南/西）移动 |
| ew-resize |
|
表示可以双向调整对象大小的光标 |
| ns-resize |
|
|
| nesw-resize |
|
|
| nwse-resize |
|
|
| zoom-in |
|
表示可以放大某些内容 |
| zoom-out |
|
表示可以缩小某些内容 |
| grab |
|
表示可以抓取（拖动）某些东西 |
| grabbing |
|
表示已经抓取到某些东西 |
| url("") | 自定义光标的样式，括号中的内容为光标图像的源文件路径 |
8.段落的缩进设置（text-indent）
用来控制每个段落的首行缩进的距离。
<html>
<style>
#p1{
text-indent:25%
}
#p2{
text-indent:30px
}
#p3{
text-indent:30pt
}
</style>
</head>
<body>
<h1>段落的缩进设置</h1>
<hr>
<p id="p1">这段文字的首行缩进为25%</p>
<p id="p2">这段文字的首行缩进为30px</p>
<p id="p3">这段文字的首行缩进为30点</p>
</body>
</html>
9.行高的设置（line-height）
用来控制文本内容之间行间距。
<html>
<style>
#p1{
line-height:18px
}
#p2{
font-size:15px;
line-height:150%
}
#p3{
font-size:15px;
line-height:2
}
</style>
</head>
<body>
<h1>行高的设置</h1>
<hr>
<p id="p1">这段文字的行高为18px这段文字的行高为18px这段文字的行高为18px这段文字的行高为18px这段文字的行高为18px</p>
<p id="p2">这段文字的行高为字体大小的150%这段文字的行高为字体大小的150%这段文字的行高为字体大小的150%这段文字的行高为字体大小的150%这段文字的行高为字体大小的150%这段文字的行高为字体大小的150%这段文字的行高为字体大小的150%</p>
<p id="p3">这段文字的行高为字体大小为15px的2倍 30px这段文字的行高为字体大小为15px的2倍 30px这段文字的行高为字体大小为15px的2倍 30px这段文字的行高为字体大小为15px的2倍 30px这段文字的行高为字体大小为15px的2倍 30px这段文字的行高为字体大小为15px的2倍 30px这段文字的行高为字体大小为15px的2倍 30px这段文字的行高为字体大小为15px的2倍 30px</p>
</body>
</html>
10.行，块元素的转换（display）
- 块元素：独占一行，可以设置宽高，如果不设置宽高则默认宽默认为父级标签宽度，高度由内容撑开，若没有内容，则高度为空。例如：h1~h6:标题标签
- 行元素：不能设置宽高，宽高取决于自身内容，不独占一行，多个行内元素左右排列，一行显示不下时会自动换行。例如：span标签
- 行内块元素：可以设置宽高，不独占一行，多个行内块元素左右排列，一行显示不下会自动换行。例如：button标签
如果达到多个块元素占据一行就可以将块元素转换为行元素。
| 属性 | 属性值 | 描述 |
|---|---|---|
| display | inline | 将块元素转换为行元素 |
| block | 将行元素转换为块元素 | |
| inline-block | 转换为行内块元素 |
11.元素隐藏与透明化
| 属性 | 属性值 | 描述 |
|---|---|---|
| display | none | 隐藏后，其他元素会占用隐藏后的位置 |
| visibility | hidden | 隐藏后，其他元素不会占用位置 |
| visible | 显示元素 | |
| opacity | 1 / ~ / 0 | 1代表不透明，0代表全透明 |
补：
- 字母大小写转换（text-transform:uppercase;）
- 彩色图片变黑白（filter: grayscale(100%); 或 filter: gray;）
(小编也在努力学习更多哟!以后再慢慢分享的啦!)
希望对友友们有所帮助!!!!
本文含有隐藏内容，请 开通VIP 后查看