java web css

css
1、css简介：全拼（cascading style sheets）汉译：层叠样式表；是web标准中的表现标准语言。
2、样式建立：①内部样式表：
③内嵌（内联、行内）样式表：直接写在标签内。
3、link与import的区别：①：老祖宗的区别：link属于xhtml的标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多事情，比如定义RSS，定义REL连接属性等，而@import只能加载css；
②：加载顺序的区别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的css会同时被加载，而@import引用的css会等到页面全部被下载完再被加载。所以有时候浏览@import加载的css页面时开始会没有样式。
③：兼容性差别：@import是css2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能被识别，而link标签无此问题。
④：使用dom控制样式时的问题：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import是不受dom控制的。
4、样式表的优先级：内联样式表的优先级最高，内部样式表与外部样式表的优先级与书写的顺序有关，后书写的优先级别高。
5、css语法：
（1）选择符{属性：属性值；属性：属性值； }
说明：①每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
②属性必须放在花括号中，属性和属性值用冒号连接。
③每条声明用分号结束。
④当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。
⑤在书写样式过程中，空格、换行等操作不影响属性显示。
6、基本属性：color/width/height/background-color
7、css选择器：
①元素选择器（类型选择符、element选择符）语法：元素名称{属性：属性值；}
②id选择器：#id名{属性：属性值；}
③ 类选择器/class选择器：.class名{属性：属性值；}
④通配符/全局选择器：{属性：属性值；}
⑤群组选择器：选择符1，选择符2，选择符3{属性：属性值；}
⑥包含选择器：选择符1 选择符2{属性：属性值；}
⑦伪类选择器：a:link{属性：属性值；}（超链接的初始状态；）
a:visited{属性：属性值；}（超链接被访问后的状态）
a:hover{属性：属性值；}（鼠标悬停，即鼠标划过超链接时的状态）
a:active{属性：属性值；}（超链接被激活时的状态，即鼠标按下时超链接的状态）
说明：①当4个联合使用时，应注意他们的顺序，正常顺序为：link visited hover active,错误的顺序可能使样式失败。
②为简化代码，可以把伪类选择器中相同的声明提出来放在a选择符中；IE7及以上浏览器中，其他标签也支持hover
⑧并集选择器：语法：元素.class/元素#id{属性：属性值；}用法：更具体的选中元素，避免重复，避免元素冗余。
⑨兄弟选择器：语法：选择器+选择器{属性：属性值；}用法：用来选择相邻的后面的一个兄弟元素。
⑩子级选择器：语法：选择器>选择器{属性：属性值；}用法：通过父元素选择子级元素。
(11)属性选择器：语法：元素【属性】{属性：属性值；}用法：选择符合属性条件的元素。
8、选择符的权重：用四位数字表示权重，元素选择符的权重为1，class选择符的权重为10，id选择符的权重为100，属性选择符的权重为10，伪类选择器的权重为10，包含选择符为各个选择符权重之和，内联样式权重为10.

css核心属性
1、文本大小：{font-size:value;}（默认大小为16px）
说明：1）属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt,9pt=12px
3)默认1em=16px,0.75=12px,但父元素有字体大小设置时子元素默认1em=父元素字体大小。
4）使用绝对大小关键字：xx-small=9px,x-small=11px,small=13px,medium=16px,large=19px,x-large=23px,xx-large=27
2、文字颜色：{color:十六进制/rgb()/英文单词；}
3、文字字体：{font-family:字体1，字体2，字体3；}
字体1->字体2->字体3,若字体3没有，则显示系统默认，当字体是中文字体或者英文字体中有空格时需要加双引号。windows中文版中文默认字体为宋体或者新宋体，英文字体默认为Arial。
4、加粗：{font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/100-900;}（实际font-weight只有normal和bold两种效果）
5、倾斜：{font-style:italic(倾斜)/oblique(更倾斜)/normal(常规);}
(实际italic和oblique差不多效果)
6、水平对齐方式：{text-align:left/center/right;}
7、垂直对齐方式：{vertical-align:middle/top/bottom;}
8、行高：{line-height:normal/value;}倍行高：{line-height:2;}2是指字体大小的2倍。当单行文本行高等于容器高时，可实现单行文本在容器中垂直方向居中显示。
9、font属性简写：font-style font-weight font-size/line-height font-family
顺序不能变，font-size/line-height必须这样写！只有同时指定font-size和font-family属性时才起作用，且若没有设定font-weight和font-style，他们会使用默认值。
10、文本修饰线：text-decoration:none/underline(下划线)/overline(上划线)/line-through(删除线)/blink(闪烁);
11、边框：可分写也可合写，solid（实线），dashed(虚线),dotted(点状线),double(双线)
12、首行缩进：{text-indent:value(最好用2em);}说明：1）text-indent可以取负值。2)text-indent只对第一行起作用。
13、字间距：{letter-spacing:value;}(每个字后的间距，中文)
词间距：{word-spacing:value;}（单词之间的间距，浏览器以空格判定单词 英文）
14、关于列表：1)定义列表符号样式：list-style-type:disc(实心圆)/circle(空心圆)/square(实心方形)/none/decimal(阿拉伯数字);
2）使用图片作为列表符号：list-style-image:url();
3)定义列表符号的位置：list-style-position:outside(外边)/inside(里边);
list-style:none;
浮动：float:left/right;
使用浮动的元素要清除浮动：clear:both/center/left/right;
15、关于背景图片：语法：background-image：url(背景图片路径及全称);
背景图片平铺：background-repeat
背景图的固定：background-attachment:scoll(滚动)/fixed(固定);
背景图的位置：background-position:x y;(可以设负值)
雪碧图
背景图大小：background-size:cover/contain;
背景缩写顺序：background:color image repeat position attchment;
16、网页上常用的图片格式（压缩图片）：
1）jpg：有损压缩格式，靠损失图片本身的质量来减小图片体积，适用于颜色丰富的图像；（像素点组成的，像素点越多会越清晰）
2）gif：有损压缩格式，靠损失图片的色彩数量来减少图片的体积，支持透明，支持动画，适用于颜色数量较少的图像。
3）png：有损压缩格式，损失图片的色彩数量来减少图片的体积，支持透明，不支持动画，是fireworks的源文件格式，适用于颜色数量较少的图像。

定位
一、语法：position：static、absolute、relative、fixed;
1、static：默认值，无特殊定位，对象遵循html原则；
2、absolute：绝对定位，将对象从文档流中脱离出来，使用left、right、top、bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据body对象，而其层叠通过z-index属性定义；（相对于有定位的祖先元素中离自己最近的一个祖先元素进行定位，若都没有定位，则相对body定位）
3、relative：相对定位，对象不可层叠，相对自己原本的位置进行定位，将依据left、right、top、bottom（相对定位）等属性在正常文档流中偏移位置。
4、fixed（固定定位）：ie6 不支持，相对于浏览器窗口定位。
二、包含块：绝对定位的祖先
绝对定位和相对定位的区别：1、参照物不同，绝对定位的参照物是包含块，相对定位的参照物是元素本身位置。
2、绝对定位将对象从文档流中脱离出来因此不占据空间，相对定位不破坏正常的文档流顺序，无论是否进行移动，元素仍然占据原来的空间。
3、固定定位不占据空间完全脱离文档流。
三、定位元素层叠属性：z-index：auto；检索或设置对象的层叠顺序。
auto：默认值。遵从其父元素。number：无单位的整数值。可为负数。
说明：1）较大的number值的对象会覆盖在较小的number值的对象之上。如两个绝对定位对象的此属性具有同样的number值，那么将依据它们在html文档的声明顺序层叠。此属性仅作用于position属性值为relative或absolute的对象。
2）这个属性不会作用于窗口控件，如select对象（ie6）
四、滚动字幕：
<marquee behavior(行为)=“scroll（滚动）/alternate（晃动）” direction（方向）=“up/down/left/right” scrollamount（滚动速度）=“value” height=" value(上下滚动范围)" width=“value(左右滚动范围)” onmouseover(鼠标经过时停止滚动)=“stop()” onmouseout（鼠标离开时开始滚动）=“start()”>内容
五、锚点链接的应用：
1）命名锚点的作用：在同一页面的不同位置进行跳转。
2）给元素定义命名锚记名 语法：<标记 id=“命名锚记名”></标记>
3）命名锚记链接：语法
六、滚动条（IE7以下不支持）：
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置