CSS属性

最新推荐文章于 2025-07-22 12:55:01 发布

原创最新推荐文章于 2025-07-22 12:55:01 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

1、字体属性

font-family:字体

font-style:斜体

font-weight:粗细

font-size:字号

2、文本属性

text-decoration:上划线、下划线、删除线

text-indent:首行缩进

text-transform:小写变大写

letter-spacing:字符间距

text-align:对齐方式

3、盒子属性

①边框属性

border-right:左边框

border-width:边框宽度

border-color:边框颜色

border-style:边框类型-实线、虚线

颜色、宽度可设置1-4个，2个时边框颜色为上下、左右颜色一致，3个时左右颜色一致，4个时由上开始顺时针旋转

②内边距

padding

③外边距

margin

④特殊用法

border-radius

倒角，将直角变成圆弧

<!DOCTYPE html>

<head>

<style>

img{

width:400px;

height:400px;

border-left-color:purple;

border-left-width:2px;

border-left-style:solid;

border-right-style:dotted;

/*倒角，直角变成圆弧*/

border-radius:50%;

}

</style>

</head>

<body>

</body>

</html>

4、尺寸属性

5、背景属性

background

background-color

/* 设置背景图片 */

background-imager:ur("img/1477550681.jpg");

/* 平铺 */

background-repeat:no-repeat;

/* 设置图片显示位置 */

background-position:50% 50px;

/* 背景图片跟随滚动 */

background-attachment:fixed;

/* 渐变色-从上至下 */

background:linear-gradient(red,blue);

/* 渐变色-从左上角至右下角 */

background:linear-gradient(to right bottom,red,blue);

6、浮动属性

float

7、显示属性

8、定位属性

①绝对定位

<!DOCTYPE html>

<head>

<style>

body{

height:999px;

background-color:blue;

}

.pos1{

position:absolute;

left:100px;

top:150px;

}

</style>

</head>

<body>

</body>

</html>

②相对定位

<!DOCTYPE html>

<head>

<style>

.pos1{

position:relative;

left:-20px;

}

.pos2{

position:relative;

left:20px;

}

</style>

</head>

<body>

</body>

</html>

③固定定位

<!DOCTYPE html>

<head>

<style>

body{

height:9999px;

background-color:blue;

}

.one{

position:fixed;

left:15px;

top:50px;

}

.two{

position:fixed;

right:30px;

top:50px;

}

</style>

</head>

<body>

<p class="one">hello word1</p>

<p class="two">hello word2</p>

<p>hello word3</p>

</body>

</html>

绝对定位和相对定位都需要有参照物，相对定位不需要

/* z-index 表示优先级初始值为0,值越大优先级越高*/

<!DOCTYPE html>

<head>

<title>z-index用法</title>

<style>

.x{

position: absolute;

left: 0px;

top: 0px;

/* z-index 表示优先级初始值为0,值越大优先级越高*/

z-index:0;

}

</style>

</head>

<body>

</body>

</html>

9、变形

<!DOCTYPE html>

<head>

<style>

#transform{

width: 200px;

height: 200px;

background-color:purple;

margin: 100px;

/*旋转*/

transform-origin:left;

/*角度*/

/*transform: rotate(45deg);*/

/*拉伸变形*/

transform: scale(1.2) rotate(45deg);

}

</style>

</head>

<body>

</body>

</html>

10、过渡

<!DOCTYPE html>

<head>

<style>

#box{

width: 500px;

height: 1400px;

margin: 50px auto;

background-color: cyan;

}

img{

/*图片共性*/

width: 180px;

height: 220px;

border: solid 3px white;

margin: 15px;

/*过渡时间*/

transition-duration: 2s;

transition-property: transform;

}

/*个性 -旋转*/

div > img:nth-child(1){

transform: rotate(20deg);

}

div > img:nth-child(2){

transform: rotate(15deg);

}

div > img:nth-child(3){

transform: rotate(10deg);

}

div > img:nth-child(4){

transform: rotate(-5deg);

}

div > img:nth-child(5){

transform: rotate(-5deg);

}

div > img:nth-child(6){

transform: rotate(-10deg);

}

div > img:nth-child(7){

transform: rotate(-15deg);

}

div > img:nth-child(8){

transform: rotate(-20deg);

}

/*设置鼠标悬停*/

#box >img:hover{

transform: scale(1.2) rotate(0deg);

}

</style>

</head>

<body>

</div>

</body>

</html>

11、动画

<!DOCTYPE html>

<head>

<style>

div{

width: 200px;

height: 200px;

background-color:purple;

/*设置转轴*/

transform-origin: left top;

/* 设置动画 */

animation: 5s linear animate;

}

@keyframes animate{

/*① from{} to{} 设置动画*/

from{margin-left: 200px;}

to{transform: rotate(180deg);}

/*② 设置 % */

0%{ background-color: blue; transform: rotate(10deg);}

25%{ background-color: red; transform: rotate(20deg);}

50%{ background-color: cyan; transform: rotate(30deg) scale(1.2);}

75%{ background-color: purple; transform: rotate(40deg);}

100%{ background-color: coral; transform: rotate(50deg); margin-left: 100px;}

}

</style>

</head>

<body>

</body>

</html>