java textstyle属性_JavaWeb - CSS 的使用以及常用属性

CSS 样式

内联样式

内联样式

zut

内部样式

内部样式

div {

color: red;

}

zut

外部样式

外部样式

zut

div {

color: blue;

}

选择器

基础选择器

选择器

#div1 {

color: red;

}

div {

color: blue;

}

.cls {

color: aquamarine;

}

zut

zut1

zut

扩展选择器

扩展选择器

/*选择所有元素*/

* {

}

/*并集选择器*/

div, p {

color: aqua;

}

/*子选择器*/

div p {

color: red;

}

/*父选择器*/

div > p {

background: black;

}

/*属性选择器*/

input[type='text'] {

border: 2px solid;

}

/*伪类选择器*/

a:link {

color: deeppink;

}

a:hover {

color: aqua;

}

a:active {

color: yellow;

}

a:visited {

color: red;

}

zut

zut

zut

CSS 常用属性

CSS常用属性

p {

color: red;

font-size: 20px;

text-align: center;

line-height: 50px;

/*宽度,实线,黑色*/

border: 1px solid black;

}

div {

border: 1px solid black;

width: 100px;

/*height: 600px;*/

/*width: 600px;*/

/*background: red;*/

/*background: url("https://img2020.cnblogs.com/blog/1615081/202004/1615081-20200425192425460-532751811.jpg") no-repeat center;*/

}

.div1 {

width: 100px;

height: 100px;

/*margin: 50px;*/

}

.div2 {

width: 200px;

height: 200px;

/*内边距撑大盒子*/

/*padding: 50px;*/

/*设置盒子属性保证盒子大小不发生变化*/

box-sizing: border-box;

padding: 50px;

}

.div3 {

float: left;

}

.div4 {

float: left;

}

.div5 {

float: right;

}

zut

1

2

3