Html基础之css样式

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

一.css样式写法

1.通过在标签中添加style="backgrounp-Color:red"属性进行设置css样式

2.通过选择器定义标签后再html文件中head部分添加<style></style>

3.通过选择器定义标签后再html文件中head部分导入css文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--css样式：-->
 7     <!--1.直接在html标签内添加style样式-->
 8     <!--2.在head里面通过style属性，来给标签设置css样式-->
 9     <!--3.通过编写样式表文件xxx.css,用link引入到当前html中-->
10     <!--css样式优先级：-->
11     <!--以标签为基础由内到外，由近及远-->
12     <!--即：标签上样式优先级最高，谁离标签最近优先级第二高-->
13     <link rel="stylesheet" href="demo.css">
14     <style>
15         #i2{
16             background-color:blue;
17             height:100px;
18             width:100px;
19         }
20     </style>
21 
22 </head>
23 <body>
24     <div style="background-color:red; height:100px;width:100px" >背景色</div>
25     <div id="i1">背景色1</div>
26     <div id="i2">背景色2</div>
27 </body>
28 </html>

二.css样式优先级：由近及远，由内到外

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--css样式优先级：-->
 7     <!--以标签为基础由内到外，由近及远-->
 8     <!--即：标签上样式优先级最高，谁离标签最近优先级第二高-->
 9     <link rel="stylesheet" href="demo.css">
10     <style>
11         #i1{
12             background-color:blue;
13             height:100px;
14             width:100px;
15         }
16     </style>
17 </head>
18 <body>
19     <div id="i1" style="background-color:red; height:100px;width:100px" >背景色</div>
20 </body>
21 </html>

三.css选择器

1.id选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--id选择器，#表示id-->
 7     <style>
 8         #i1{
 9             background-color:blue;
10             height:100px;
11             width:100px;
12         }
13     </style>
14 </head>
15 <body>
16     <div id="i1">背景色</div>
17 </body>
18 </html>

2.class选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--class选择器，.表示class-->
 7     <style>
 8         .i1{
 9             background-color:red;
10             height:100px;
11             width:100px;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="i1">背景色</div>
17 </body>
18 </html>

3.标签选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--class选择器，.表示class-->
 7     <style>
 8         div{
 9             background-color:red;
10             height:100px;
11             width:100px;
12         }
13     </style>
14 </head>
15 <body>
16     <div>背景色1</div>
17     <div>背景色2</div>
18     <div>背景色3</div>
19 </body>
20 </html>

4.层级选择器

a.id层级选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1 a{
 8             background-color:red;
 9             height:100px;
10             width:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="i1">
16         <a href="http://www.baidu.com">百度</a>
17     </div>
18 </body>
19 </html>

b.class层级选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1 a{
 8             background-color:green;
 9             height:100px;
10             width:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="c1">
16         <a href="http://www.baidu.com">百度</a>
17     </div>
18 </body>
19 </html>

c.标签层级选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div a{
 8             background-color:black;
 9             height:100px;
10             width:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="c1">
16         <a href="http://www.baidu.com">百度</a>
17     </div>
18 </body>
19 </html>

5.属性选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div[user='u1']{
 8             background-color:black;
 9             height:100px;
10             width:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div user="u1">
16         <a href="http://www.baidu.com">百度</a>
17     </div>
18 </body>
19 </html>

6.组合选择器

a.id组合选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #u1,#u2{
 8             background-color:black;
 9             height:100px;
10             width:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="u1">
16         <a href="http://www.baidu.com">百度</a>
17     </div>
18     <div id="u2">
19         <a href="http://www.baidu.com">新浪</a>
20     </div>
21 </body>
22 </html>

b.class组合选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .u1,.u2{
 8             background-color:red;
 9             height:100px;
10             width:100px;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="u1">
16         <a href="http://www.baidu.com">百度</a>
17     </div>
18     <div class="u2">
19         <a href="http://www.baidu.com">新浪</a>
20     </div>
21 </body>
22 </html>

四.css属性

1.font-size字体大小、font-weight字体粗细

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             font-size:larger;
 9 
10         }
11         .c2{
12             font-weight:bold;
13         }
14         .c3{
15             font-size:larger;
16             font-weight:bolder;
17         }
18     </style>
19 </head>
20 <body>
21     <div class="c1">字体大小</div>
22     <div class="c2">字体粗细</div>
23     <div class="c3">处理后的字体</div>
24 </body>
25 </html>

2.border边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
           width:100px;
           height:100px;
           /*border边框*/
           border:1px red solid;
        }

    </style>
</head>
<body>
    <div class="c1">边框</div>
</body>
</html>

3.text-align水平文本对齐方式：left左对齐、right右对齐、center居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8            width:100px;
 9            height:100px;
10            /*border边框*/
11            border:1px red solid;
12            text-align:left;
13         }
14         .c2{
15            width:200px;
16            height:200px;
17            /*border边框*/
18            border:1px blue solid;
19            text-align:right;
20         }
21         .c3{
22             width:300px;
23            height:300px;
24            /*border边框*/
25            border:1px black solid;
26            /*text-align水平文本对齐方式，left左对齐，right右对齐，center居中对齐*/
27            text-align:center;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="c1">边框0</div>
33     <br>
34     <div class="c2">边框1</div>
35     <br>
36     <div class="c3">边框2</div>
37 </body>
38 </html>

4.line-height垂直文本对齐方式，属性直接对应外层div的宽度即可

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8            width:100px;
 9            height:100px;
10            /*border边框*/
11            border:1px red solid;
12            text-align:left;
13            line-height:100px;
14 
15         }
16         .c2{
17            width:200px;
18            height:200px;
19            /*border边框*/
20            border:1px blue solid;
21            text-align:right;
22            line-height:200px;
23         }
24         .c3{
25             width:300px;
26            height:300px;
27            /*border边框*/
28            border:1px black solid;
29            /*text-align水平文本对齐方式，left左对齐，right右对齐，center居中对齐*/
30            text-align:center;
31            /*line-height垂直方向对齐方式，属性值一般与外层div高度值一致*/
32            line-height:300px;
33 
34         }
35     </style>
36 </head>
37 <body>
38     <div class="c1">边框0</div>
39     <br>
40     <div class="c2">边框1</div>
41     <br>
42     <div class="c3">边框2</div>
43 </body>
44 </html>

5.float浮动，属性值left，right

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8            width:100px;
 9            height:100px;
10            /*border边框*/
11            border:1px red solid;
12            text-align:left;
13            line-height:100px;
14 
15         }
16         .c2{
17            float:left;
18         }
19         .c3{
20             float:right;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="c1 c2"></div>
26     <div class="c1 c2">边框0</div>
27     <div class="c1 c3">边框1</div>
28 
29 </body>
30 </html>

6.display展示属性，块级标签和行内标签之间相互切换；display:inline块级标签转换为行内标签，行内标签不允许有宽、高、外边距、内边距；display：block行内标签转换为块级标签；dispaly:inline-block既是行内标签又是块级标签；display:none隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c0{
             width:100px;
           height:100px;
           border:1px blue solid;
        }
        .c1{

           /*display:inline块级标签转换为行内标签，行内标签没有高、块、外边距、内边距属性*/
           display:inline;

        }
        .c2{
            width:100px;
           height:100px;
           border:1px red solid;
           display:block;
        }
        .c3{
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="c0 c1">块级标签转行内标签</div>
    <span class="c2">行内标签转块级标签</span>
    <div class="c0 c3">既是行内标签又是块级标签</div>

</body>
</html>

7.margin外边距，自己针对外层div产生变化；padding内边距

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c0{
 8              width:100%;
 9            height:200px;
10            border:1px red solid;
11         }
12         .c1{
13             /*margin外边距，margin-top:20px距离顶部20像素*/
14            margin-top:20px;
15 
16         }
17         .c2{
18             width:100%;
19            height:48px;
20             background-color:green;
21 
22 
23         }
24         .c3{
25             /*padding内边距*/
26             padding-top:20px
27          }
28     </style>
29 </head>
30 <body>
31     <div class="c0">
32         <div class="c2 c1"></div>
33     </div>
34     <br>
35     <div class="c0">
36         <div class="c2 c3"></div>
37     </div>
38 
39 
40 </body>
41 </html>

9.position分层

a. position:fixed固定在窗口的某个位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             width:100%;
 9             height:40px;
10             background-color:green;
11         }
12         .c2{
13             width:100%;
14             height:2000px;
15             border:1px red solid;
16             margin-top:40px;
17         }
18         .tmp{
19             position:fixed;
20             top:0;
21             left:0;
22             right:0;
23         }
24     </style>
25 </head>
26 <body style="margin:0">
27     <div class="c1 tmp"></div>
28     <div class="c2">121</div>
29 
30 </body>
31 </html>

b. position:relative absolute相对定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             width:400px;
 9             height:400px;
10             border:1px red solid;
11             position:relative;
12         }
13         .c2{
14             width:60px;
15             height:60px;
16             position:absolute;
17         }
18 
19     </style>
20 </head>
21 <body style="margin:0">
22     <div class="c1">
23         <div class="c2" style="background-color:red;left:0;top:0"></div>
24         <div class="c2" style="background-color:green;left:0;bottom:0"></div>
25         <div class="c2" style="background-color:yellow;right:0;top:0"></div>
26         <div class="c2" style="background-color:black;right:0;bottom:0"></div>
27     </div>
28 
29 </body>
30 </html>

10.cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:move 有很多种样式知道干嘛的就行了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             width:400px;
 9             height:400px;
10             border:1px red solid;
11             position:relative;
12             padding-top:20px;
13             padding-left:10px;
14         }
15 
16 
17     </style>
18 </head>
19 <body style="margin:0">
20     <div class="c1">
21         <input type="button" name="登录" value="登录" style="cursor:pointer">
22         <input type="button" name="移动鼠标" value="移动鼠标" style="cursor:move">
23         <input type="button" name="截图" value="截图" style="cursor:crosshair">
24     </div>
25 
26 </body>
27 </html>

11.overflow:hidden：溢出部分截取掉 scroll：超出就出现滚动条

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             width:100px;
 9             height:100px;
10             border:1px red solid;
11             overflow:auto;
12         }
13 
14 
15     </style>
16 </head>
17 <body style="margin:0">
18     <div class="c1">
19         <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="">
20     </div>
21 
22 </body>
23 </html>

12.hover属性是当鼠标移动到上面后，设置其样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             width:100px;
 9             height:100px;
10             border:1px red solid;
11 
12         }
13         .c1:hover{
14             background-color:yellow;
15         }
16 
17     </style>
18 </head>
19 <body style="margin:0">
20     <div class="c1">
21         
22     </div>
23 
24 </body>
25 </html>

13.background-image背景图，background-repeat平铺;repeat-x横向平铺，repeat-y纵向平铺;background-position:0 0;定位位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             width:100px;
 9             height:100px;
10             border:1px red solid;
11             background-image:url("http://ui.imdsx.cn/static/image/dsx_Small.jpg");
12 
13         }
14 
15     </style>
16 </head>
17 <body style="margin:0">
18     <div class="c1">
19 
20     </div>
21 
22 </body>
23 </html>

14.z-index，z-index 层级关系，分层后通过z-index来记录层级关系越大越在前面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             width:100px;
 9             height:100px;
10             border:1px red solid;
11             position:relative;
12 
13         }
14         .c2{
15             width:100px;
16             height:100px;
17             position:absolute;
18         }
19     </style>
20 </head>
21 <body style="margin:0">
22     <div class="c1">
23         <div class="c2" style="background-color:red;z-index:8"></div>
24         <div class="c2" style="background-color:green;z-index:9"></div>
25     </div>
26 
27 </body>
28 </html>

posted @ 2019-12-04 00:51 少壮不努力123 阅读(83) 评论(0) 收藏举报

刷新页面返回顶部