java css是什么_Java 之 CSS

1.CSS

a.定义：CSS 指层叠样式表

b.意义：为了解决内容与表现分离的问题

c.特点：多个样式可层叠为一

2.用法：

a.行内样式：style

99元

b.内部样式：(只对当前网页有效)

选择器

①标签选择器

选择器(标签名)｛

属性名：属性值

属性名：属性值

｝

p{

color:green;

}

②ID选择器

#id名字｛

属性名：属性值

属性名：属性值

｝

#textID{

color:orange;

}

③类选择器：

.类名｛

属性名：属性值

属性名：属性值

｝

.textClass｛

color:blue;

｝

c.外部样式表：(通过link标签引入)

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;