Java 之 CSS
1.CSS
a.定义：CSS 指层叠样式表
b.意义：为了解决内容与表现分离的问题
c.特点：多个样式可层叠为一
2.用法：
a.行内样式：style
<span style="color:red">99</span>元
b.内部样式：（只对当前网页有效）
<head> <style type="text/css"> 选择器 </head>
①标签选择器
选择器(标签名)｛
属性名：属性值
属性名：属性值
｝
p{
color:green;
}
②ID选择器
#id名字｛
属性名：属性值
属性名：属性值
｝
#textID{
color:orange;
}
③类选择器：
.类名｛
属性名：属性值
属性名：属性值
｝
.textClass｛
color:blue;
｝
c.外部样式表：（通过link标签引入）
<link rel="stylesheet" href="my.css"/>
d.优先级：行内样式>ID选择器>类选择器>标签选择器
4.派生选择器：
a.共享选择器：
.myDiv,a{
color:red;
}
b.后代选择器：
.myDiv p{
color:blue
}
c.直接子元素选择器：
.myDiv> div>p {
color:green;
}
d.相邻兄弟选择器
div+p{
font-weight:bold;
}
5.属性
a.背景属性——background (应用于块级元素中)
background-color:brown;
background-image:url('image/c.jpg');
background-repeat:no-repeat; /*不平铺*/
background-attachment:fixed; /*背景固定*/
background-position:-400px -700px; /*背景偏移*/
background：url('image/c.jpg') no-repeat center; /*另一种写法*/
b.字体属性——font
font-family:sans-serif;
font-style:italic; /*斜体*/
font-size:2em; /*em是基于父级容器的字体大小的倍数*/
font-weight:blod; /*粗细，可取值100-900， inherit为随父级*/
font:cursive italic 2em 200; /*另一种写法*/
c.文本属性——text
text-decoration:none; /*去掉下划线等修饰*/
text-decoration:underline; /*添加下划线*/
text-align:center;
direction:rtl; /*对齐方式*/
line-height:30px; /*行高*/
letter-spacing:-0.5em; /*字符间距*/
word-spacing:20px; /*单词间距*/
text-indent:50px; /*首行缩进*/
text-transform:uppercase; /*也可填lowercase、capital，代表大小写互换和首字母大写*/
white-space:pre-line; /*按格式换行*/
d.列表——list-style
list-style-type:decimal /*项目符号：upper-roman、lower-roman、lower-alpha、upper-alpha、disc、square等等*/
list-style-image:url("c.jpg"); /*项目符号为图片*/
list-style-position:inside; /*有边距*/
list-style:decimal inside; /*另一种用法*/
e.边框属性——border
border-style:solid;
border-width:1px;
border-color:red;
border-top-width:2px;
border:solid 1px red; /*另一种写法*/
/*特别写法*/
border-width:1px 3px;
注：当border-width只有一个值时，表示四边效果一样
当有两个值时，表示（上下），（左右）
当有三个值时，表示（上），（左右），（下）
当有四个值时，表示（上），（右），（下），（左） （顺时针）
6.伪类：
a.初始化效果
a:link{
color:darkgray;
test-decoration:none;
}
b.当鼠标悬停时的效果
a:hover{
color:green;
font-size:32px;
}
c.点击不放的效果
a:active{
color:blue;
}
d.访问过后的效果
a:visited{
color:gold;
}
e.焦点效果
input:focus{
background-color:lightgray;
}
7.溢出处理：
overflow:hidden; /*溢出部分隐藏*/
overflow:scroll; /*溢出部分产生滚动条*/
8.隐藏处理：
display:none; /*隐藏*/
display:block; /*以块的形式显示*/
visibility:hidden; /*隐藏*/
visibility:visible; /*显示*/
9.浮动：
float:left; /*左浮动*/
float:right; /*右浮动*/
clear:both; /*清除浮动带来的影响*/
10.定位 与 层级
a.定为：
①static：静态的，默认的
②absolute：绝对定位
在没有父级标签的情况下，以浏览器左上角为原点
如果父级元素有定位（除了static），以父级左上角为原点，以此类推
③relative：相对定位
自己本身的左上角为原点
④fixed：固定定位
以浏览器的左上角为原点，并脱离了文本流
position:relative; left:100px; /*距离左边100px*/ top:100px; /*距离上边100px*/
b.层级：（在定位的情况下才能使用，除了static）
z-index:2;
数字越大，层级越高
11.盒子模型
a.基本组成：外边距（margin），边框（border），内边距（padding）
b.只有一个值时，表示四边效果一样
当有两个值时，表示（上下），（左右）
当有三个值时，表示（上），（左右），（下）
当有四个值时，表示（上），（右），（下），（左） （顺时针）
margin:10px 20px;
margin-left:200px;
