java web css

旧城等待， 2022-01-26 18:31 128阅读 0赞

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垂直方向内容溢出时的设置