【CSS】元素样式
分类:
IT文章
•
2022-03-29 17:17:26
1、使用CSS的三种方式:
方式一、通过元素的style属性来设置元素的样式
方式二、在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源，通常是一个CSS文件。
方式三、在HTML头部标签<head>中通过一对标签<style></style>来定义元素的样式
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>如何使用css</title>
6 <style>
7 p{
8 color:green;
9 }
10 </style>
11 <link rel="stylesheet" href="./css/style.css">
12 </head>
13 <body>
14 <h1 style="color: red;font-size:24px;">如何使用css</h1>
15 <p>段落的内容</p>
16 <div class="content"></div>
17 </body>
18 </html>
View Code
推荐使用<link>方式，有利于缓存，能提高页面的加载速度，提高性能
2、CSS的语法规则:
选择器:元素、class、伪类、伪元素、组合
声明：
{}
属性名
属性值
示例：
div{ color:yellow; background-color:red; }
3、CSS常用属性
【color】:元素内部文本的颜色。属性值有三种书写方式：colorname、RGB、十六进制。RGB和十六进制比colorname能定义出更丰富的颜色，颜色取值可以更精细化
![]()
1 p{color:red;} /*colorname方式给属性赋值*/
2 p{color:rgb(255,0,0);} /*RGB方式给属性赋值*/
3 p{color:#FF0000;} /*十六进制方式给属性赋值*/
View Code
【background-color】:元素背景色
![]()
1 body{
2 background-color:#eee;
3 }
View Code
【background】:元素背景图片，同时设置background-color和background，则background会覆盖掉background-color
![]()
1 body{
2 background:url(./cloth.png);
3 }
View Code
【background-repeat】:背景图片重复拼接的方式
![]()
1 body{
2 background:url(./cloth.png);
3 background-repeat:repeat; /*图片尺寸比元素尺寸小时，图片会重复拼接*/
4 background-repeat:repeat-x; /*图片只是x方向填充*/
5 background-repeat:repeat-y; /*图片只是y方向填充*/
6 background-repeat:repeat-x repeat-y; /*图片x、y两个方向都填充*/
7 background-repeat:no-repeat; /*图片不重复拼接*/
8 }
View Code
【background-position】:背景图片的位置
![]()
1 body{
2 background:url(./cloth.png);
3 background-position:left; /* 有五个属性值:left、right、top、bottom、center*/
4 background-position:left top; /*图片默认的位置*/
5 background-position:left center; /*图片垂直居中，设置了center，则需要指定body元素的height属性值，否则看不出效果*/
6 background-position:center; /*图片水平、垂直方向同时居中*/
7 background-position：50px 50px;
8 background-position:50% 50%; /*图片水平、垂直方向同时居中*/
9 }
View Code
【background-attachment】:背景图片是否会跟随浏览器滚动条滚动
![]()
1 body{
2 background:url(./cloth.png);
3 background-attachment:local; /*默认值，图片会随着浏览器滚动条进行滚动*/
4 background-attachment:fixed; /*图片不会随着浏览器滚动条滚动*/
5 }
View Code
总结：背景色、背景图简写到一起
![]()
1 body{
2 background:#eee url(./cloth.png no-repeat 50% 50%)
3 }
View Code
【border】:元素边线。border-width、border-style、border-color是三个必要属性，必须指定。
![]()
1 p{
2 /*全写方式*/
3 border-1px;
4 border-style:solid;
5 border-color:blue;
6 border-radius:25px;/*边框圆角效果,属性值越大，则圆角效果越明显，属性值也可以是百分比*/
7
8 /*简写方式*/
9 border:2px solid blue;
10 border-radius:25px; /*简写时，border-radius要单独写，无法写在border属性后*/
11 }
12 div{
13 background-color:#eee;
14 border-left:10px solid orange; /*设置左边边线*/
15 border-color:red green blue orange; /*设置四个边框线的颜色，颜色设置顺序是：上右下左*/
16 }
View Code
【padding】:用于设置元素内容和边线(border)之间的间距
![]()
1 p{
2 border:1px solid blue;
3 padding:20px 10px; /*上下间距是20px，左右间距是10px*/
4 padding:20px; /*上下左右的间距都是20px*/
5 padding:30px 20px 10px; /*上:30px，左右:20px,下:10px*/
6 padding:10px 20px 30px 40px; /*值的顺序对应上、右、下、左*/
7 padding-left:20px;
8 }
View Code
【margin】:元素边线(border)与页面其他元素之间的间距。必须指定元素的宽度,margin:auto 才有效果。
![]()
1 p{
2 border:1px solid red;
3 margin:50px; /*上下左右都是50px*/
4 margin:50px 100px; /*上下50px，左右100px*/
5 margin:50px 100px 150px; /*上50px，左右100px，下150px*/
6 margin:20px 50px 80px 100px; /*值的顺序对应上、右、下、左*/
7 margin-left:300px;
8 margin:auto; /*水平居中*/
9
10 }
View Code
【width、height】:元素的宽度和高度
![]()
1 p{
2 background-color:lightblue;
3 height:200px;
4 500px;
5 20%; /*百分比相对于它外层容器宽度的一个百分比，假设p放在body中，body的宽度是1000px，则p的宽度是1000*0.2=200px*/
6 }
View Code
【outline】:外边线，有别于border，在border之外,不属于元素的盒子模型部分。
![]()
1 p{
2 border:20px solid #000;
3 outline:15px solid red;
4 }
View Code
文本内容的css属性
【color】:文本内容的颜色
【text-align】:文本内容位置(靠左、靠右、居中)
【text-decoration】:文本内容的中线、上线、下划线
【text-transform】:英文字符大小写转换
【text-indent】:设置文本内容首行缩进
【letter-spacing】:设置文本内容的字符间隔,对中文和英文都有效
【word-spacing】:设置单词之间的间隔,只对英文起作用，对中文不起作用
【line-height】:设置文本内容的行间距
![]()
1 p{
2 border:solid 1px red;
3 color:red;
4 text-align:center;
5 text-align:left;
6 text-align:right;
7 text-align:justify;/*文本内容两端对齐*/
8
9 text-decoration:line-through; /*中线*/
10 text-decoration:overline; /*上线*/
11 text-decoration:underline; /*下线*/
12 text-decoration:inherit; /*inherit表示继承上级元素的text-decoration属性的值*/
13
14 text-transform:lowercase; /*转小写*/
15 text-transform:uppercase; /*转大写*/
16 text-transform:capitalize; /*首字母转大写，其他字母不转*/
17
18 text-indent:inherit;
19 text-indent:50px;
20
21 letter-spacing：2px;
22 letter-spacing:-2px; /*属性值可以为负值*/
23
24 word-spacing:3px;
25
26 line-height:2; /*表示2倍的行间距，所以此处不是2px，而是2，数字后不带单位*/
27 line-height:20px; /*表示行间距是20px,line-height:20px和line-height:2 两者意思不一样 */
28 }
View Code
【display】:控制元素显示状态(显示、隐藏)
![]()
1 span{
2 background-color:lightblue;
3 display:none; /*元素不显示，隐藏起来*/
4 display:block; /*1、元素显示，不隐藏；2、行内元素转成块元素*/
5 display:inline; /*块元素变成行内元素*/
6 display:inline-block; /*还是在一行显示*/
7 }
View Code
总结:
元素display:inline时,设置width、height，是没有效果的,
元素display:block和display:inline-block时，设置width、height，是有效果的。
【visibility】:
![]()
1 p{
2 height:300px;
3 background-color:orange;
4 visibility:hidden;/*虽然元素隐藏了，但是浏览器页面仍然保留了元素的宽度和高度，跟display:none不一样*/
5 }
View Code
【z-index】:设置元素的堆放层次。
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>z-index</title>
6 <style>
7 img{
8 position: absolute;
9 top: 10px;
10 left: 5px;
11 /*z-index:-1; z-index为负数，表示图片显示在页面其他元素下方 */
12 }
13
14 h1,p{
15 position: relative;/*此处postion:absolute，则h1、p元素的位置会重叠，故设置为relative*/
16 z-index:1;
17 }
18 </style>
19 </head>
20 <body>
21 <h1>z-index</h1>
22 <h1>图片</h1>
23 <img src="./suihua.png" width="300px" height="300px">
24 <p>碎花</p>
25 </body>
26 </html>
View Code
当利用position移动元素，元素位置发生重叠时，z-index属性用来控制哪个元素显示在上，哪个元素显示在下，简而言之，就是用来控制元素在页面的显示顺序。
元素要指定了position属性，且position属性值为relative、absolute、fixed三者之一，使用z-index才有效果，
postion属性值为static时，使用z-index，无效果。
z-index的值越大，元素展现层次越靠前。
【overflow】:用来处理元素内容的溢出情况。当元素的内容大于元素宽度或者高度，称为溢出
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>overflow 溢出</title>
6 <style>
7 .overflow{
8 border:1px solid red;
9 background-color:#eee;
10 width:200px;
11 height:100px;
12 /*overflow:visible; 默认值，溢出的内容显示出来*/
13 /*overflow:hidden; 溢出的内容隐藏*/
14 /*overflow:scroll; 不管元素内容有没有溢出，都会有显示出一个滚动条的位置*/
15 overflow: auto; /*x方向内容溢出，出现水平滚动条;y方向内容溢出，出现垂直滚动条；x、y方向同时溢出，则出现垂直和水平滚动条*/
16 /*overflow-x: hidden; */
17 /*overflow-y: auto;*/
18 }
19 p{
20 width: 250px; /*p元素的宽度大于父级元素div的宽度*/
21 background-color: lightblue;
22 }
23 </style>
24 </head>
25 <body>
26 <h1>overflow</h1>
27 <div class="overflow">
28 入夜渐微凉繁花落地成霜你在远方眺望耗尽所有目光不思量自难相忘夭夭桃花凉前世你怎舍下这一海心茫还故作不痛不痒不牵强
29 <p>都是假象</p>
30 </div>
31 </body>
32 </html>
View Code
【float】:元素的浮动
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>float浮动</title>
6 <style>
7 .div1{
8 border: solid 3px blue;
9 width:100px;
10 height: 50px;
11 margin: 10px;
12 float: right;
13 }
14
15 .div2{
16 border:3px solid red;
17 height: 100px;
18 clear: right;
19 /*clear: left; */
20 /*clear: both; bothq指left、right*/
21 }
22
23 .div3{
24 border: 3px solid blue;
25 /*overflow: auto;*/
26 }
27
28 .div4{
29 border: 3px solid red;
30 width: 50px;
31 height: 100px;
32 float: right;
33 }
34
35 /*伪类选择器*/
36 .clearfix::after{
37 content: "";
38 clear: both;
39 display: table;
40 }
41 </style>
42 </head>
43 <body>
44 <h1>float</h1>
45 <div class="div1">
46 div1 content
47 </div>
48
49 <div class="div2">
50 div2 content
51 </div>
52
53 <h2>overflow:auto</h2>
54 <div class="div3 clearfix">
55 div3 content
56 <div class="div4">
57 div4 content
58 </div>
59 </div>
60 </body>
61 </html>
View Code
1、元素float后，会脱离文档流，它原来的位置就会被其他元素占据。
2、float不但控制元素本身，还会影响下一个元素的位置。
当一个元素受到另外一个浮动元素的影响时，可以使用clear属性来清除float元素对它的影响。
3、当一个子元素的高度大于它父级元素的高度，同时子元素float，则会出现子元素溢出父容器的情况，两种解决方式：
一、父元素overflow:auto,父容器会自动调整高度以适应子元素的高度，使子元素不溢出，但是overflow:auto会出现滚动条。
二、父元素class='clearfix'，clearfix是我们自己写的一个伪类选择器样式，可参照代码。既解决溢出，同时还不会出现滚动条，比第一种解决方式好。
【inline-block】:
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>inline-block</title>
6 <style>
7
8 /*实现方式一*/
9 .floatbox1{
10 border:solid 3px blue;
11 width: 200px;
12 height: 200px;
13 margin: 10px;
14 display: inline-block;
15 }
16
17 .div1{
18 border: 3px solid red;
19 }
20
21 /*实现方式二*/
22 .floatbox2{
23 border:solid 3px blue;
24 width: 200px;
25 height: 200px;
26 margin: 10px;
27 float: left;
28 }
29 .div2{
30 border: 3px solid red;
31 clear: left;
32 }
33 </style>
34 </head>
35 <body>
36 <h1>实现方式一</h1>
37 <div class="floatbox1">div1</div>
38 <div class="floatbox1">div2</div>
39 <div class="floatbox1">div3</div>
40 <div class="floatbox1">div4</div>
41 <div class="floatbox1">div5</div>
42 <div class="floatbox1">div6</div>
43 <div class="div1">
44 div1 content
45 </div>
46
47 <br/><br/><br/><br/><br/><br/><br/>
48 <h1>实现方式二</h1>
49 <div class="floatbox2">div1</div>
50 <div class="floatbox2">div2</div>
51 <div class="floatbox2">div3</div>
52 <div class="floatbox2">div4</div>
53 <div class="floatbox2">div5</div>
54 <div class="floatbox2">div6</div>
55 <div class="div2">
56 div2 content
57 </div>
58 </body>
59 </html>
View Code
要达到代码中的效果，两种处理方式:
一是前面6个div使用display:inline-block
二是前面6个div使用float:left,第7个div使用clear:both
【opacity/rgba】:元素透明度
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>opacity透明度</title>
6 <style>
7
8 /*opacity属性值默认是1，也就是不透明。opacity值的范围为【0-1】*/
9 .opacity{
10 width:400px;
11 height:300px;
12 opacity:0.5;
13 }
14
15 /*元素背景色和元素内部文字都会有透明度*/
16 .box{
17 width:400px;
18 height:300px;
19 background-color:rgb(8,138,118);
20 opacity:0.5;
21 }
22
23 /*rgba方式：元素背景色有透明度，元素内部文字无透明度*/
24 .rgba{
25 width:400px;
26 height:300px;
27 background-color:rgba(8,138,118,0.5);
28 /* rgba 前面三个数字是颜色值，最后一个数字是透明度值，透明度的范围是【0-1】*/
29 }
30 </style>
31 </head>
32 <body>
33 <img class="opacity" src="./suihua.png" alt="">
34 <img src="./suihua.png" alt="" width="400px" height="300px">
35
36 <div class="box">
37 <h1>box content</h1>
38 </div>
39
40 <div class="rgba">
41 <h1>box content</h1>
42 </div>
43 </body>
44 </html>
View Code
4、CSS3属性
shadows:元素阴影
transition:元素样式过过渡
animation:元素动画效果
shadows代码:
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>阴影</title>
6 <style>
7 .box{
8 background-color: rgb(17,148,56);
9 text-align:center;
10 width:300px;
11
12 box-shadow: 5px 35px;/*5px表示右边，35px表示下边*/
13 box-shadow: 0 5px grey; /*grey表示阴影颜色*/
14 box-shadow: 0 5px 10px grey; /*10px表示阴影虚化效果*/
15 box-shadow: 0 15px 20px rgba(0,0,0,0.3);
16
17 /*15px-16px,20px-24px,此处写法增强阴影效果*/
18 box-shadow: 0 15px 20px rgba(0,0,0,0.3),0 16px 24px rgba(0,0,0,0.19);
19
20 /*box-shadow: -5px -15px; 为负数表示上边和左边*/
21 }
22
23 .box h1{
24 color: #ffffff;
25 padding: 80px 0; /*上下80px,左右0*/
26 }
27 </style>
28 </head>
29 <body>
30 <h1>shadows</h1>
31 <div class="box">
32 <h1>shadow</h1>
33 </div>
34 </body>
35 </html>
View Code
transition代码：
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>transition过渡</title>
6 <style>
7 .transition{
8 width:200px;
9 height:200px;
10 background-color: lightblue;
11 transition:1s; /*单位为秒，可以是小数，表示过渡的时间，在1s内完成样式的过渡*/
12 transition:1s ease; /*ease:缓慢*/
13 transition:1s ease-in; /*ease-in：开始缓慢，后面越来越快*/;
14 transition:1s ease-out; /*ease-out:后面缓慢*/
15 transition:1s ease-in-out; /*开始和后面缓慢，中间快*/
16
17 transition:1s ease-in-out 2s; /*2s表示延迟(先延迟2s，再在1s内完成元素样式的过渡)*/
18 transition:width 4s 2s;/*宽度样式过渡，高度不过渡*/
19 transition:width 4s 1s,height 8s; /* width和height两个样式都要过渡*/
20 -webkit-transition:width 4s 1s,height 8s; /*谷歌浏览器的一些版本需要使用webkit才会起作用*/
21 }
22
23 /*伪类选择器*/
24 .transition:hover{
25 width: 1200px;
26 height: 800px;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="transition">
32
33 </div>
34 </body>
35 </html>
View Code
animation代码：
![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>animation动画</title>
6 <style>
7 /*动画效果的实际，就是元素一个状态切换到另外一个状态，再切换到另外一个状态，
8 这样整个连贯下来，展示的就是动画的效果*/
9 .animation{
10 width:100px;
11 height:100px;
12 background-color:red;
13 /*animation:example 4s 1s ease-in-out 3; 1s表示延迟 3表示动画执行次数*/
14 /*animation:example 4s 1s ease-in-out infinite; infinite表示执行次数为无限循环*/
15 /*animation:example 4s 1s ease-in-out 3 reverse; reverse:反转动画状态从to-from，不设置时reverse，是from-to*/
16 animation:example 4s 1s ease-in-out 3 alternate;/*alternate:表示从from-to,然后又从to-from，来回往返*/
17 /*-webkit-animation:example 4s 1s ease-in-out 3;
18 -moz-animation:example 4s 1s ease-in-out 3;*/
19 position:relative;
20 }
21
22 /*定义关键帧*/
23 @keyframes example {
24
25 /*from {background-color:green;left:0;top:0;}
26 to {background-color:blue;left:80%;top:0;}*/
27 0% {background-color:green;left:0;top:0;}
28 25% {background-color:blue;left:80%;top:0;}
29 50% {background-color:blue;left:80%;top:300px;}
30 75% {background-color:blue;left:0;top:300px;}
31 100% {background-color:blue;left:0;top:0;}
32
33 }
34
35 /*低版本谷歌浏览器私有关键帧*/
36 @-webkit-keyframes example1{
37
38 }
39
40 /*低版本Mozilla Firefox浏览器私有关键帧*/
41 @-moz-keyframes example2{
42
43 }
44 </style>
45 </head>
46 <body>
47 <div class="animation">
48
49 </div>
50 </body>
51 </html>
View Code
