CSS基础知识

顺晟科技

2021-06-30 17:13:01

283

css层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

1. CSS的应用形式

CSS有三种应用形式，分别是——单独的CSS文件；html头部head标签中定义；标签属性。

1.1 单独的CSS文件

首先创建单独的CSS文件，然后其他页面就能够引入该文件，并使用在CSS文件中定义的一些属性

创建demo.css文件

1 div{
2 
3     background-color: aquamarine;
4 
5     color: rgb(42, 145, 21);
6 
7 }

创建demo.html文件，并引入“demo.css”文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <link rel="stylesheet" href="common.css">
 7 </head>
 8 <body>
 9     <div>效果</div>
10 </body>
11 </html>

1.2 html头部head标签中定义

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <style>
 7         /*给所有的div设置样式*/
 8         div {
 9             color: black;
10             background-color: cadetblue;
11         }
12     </style>
13 </head>
14 <body>
15     <div>111</div>
16     <div>222</div>
17 </body>
18 </html>

1.3 标签属性

1 <div style="color:green;">000</div>

2. CSS选择器

CSS选择器用于选择你想要的元素的样式的模式。

2.1 标签选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <style>
 7        /* 标签选择器，所有div标签全部使用下面的属性 */
 8              div{
 9                 background-color: cadetblue;
10                 color: black;
11             }
12     </style>
13 </head>
14 <body>
15     <div>000</div>
16 </body>
17 </html>

2.2 id选择器

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <style>
 7        /* id选择器 ，所有的id为i1的a标签使用下面的属性*/
 8             #i1{
 9             font-size:32px;
10             color: rgb(255, 217, 0);
11             }
12     </style>
13 </head>
14 <body>
15     <a id="i1">hello</a>
16 </body>
17 </html>

2.3 class选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <style>
 7         /* class选择器 */
 8             .c1{
 9                 font-size: 50px;
10                 color: blueviolet;
11                 background-color: chartreuse;
12             }
13     </style>
14 </head>
15 <body>
16     <span class="c1">你好，你好！</span>
17 </body>
18 </html>

2.4 层级选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <style>
 7         /* 层级选择器 */
 8             .c2 div p .c3{
 9                 background-color: crimson;
10             }
11     </style>
12 </head>
13 <body>
14          <div>
15             <div>
16                 <p>
17                     <span>000</span>
18                     <a href="" class="c3">111</a>
19                 </p>
20             </div>
21         </div>
22 </body>
23 </html>

2.5 组合选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <style>
 7        /* 组合选择器 */
 8             .c4,.c5,.c6{
 9                 background-color: crimson;
10                 color: black;
11             }
12     </style>
13 </head>
14 <body>
15         <div>
16             <p class="c4">333</p>
17             <p class="c5">666</p>
18             <p class="c6">999</p>
19         </div>
20 </body>
21 </html>

3. CSS样式

3.1 width与heigth

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <!-- 标签属性 -->
 9         <title name="alex">南风阿帅</title>
10         <link rel="shortcut icon" href="/uploads/image/20210630/rvTJqH.png">
11         <style>
12             .c1{
13                 color: black;
14                 background-color: cadetblue;
15                 font-size: 32px;
16                 height: 150px;
17                 width: 500px;
18             }
19             .img{
20                 background-image: url("/uploads/image/20210630/rze3xP.png");
21                 width: ;
22                 height: 500px;
23                 background-repeat: no-repeat;
24             }
25             .img2{
26                 background-image: url("/uploads/image/20210630/rze3xP.png");
27                 width: 200px;
28                 height: 200px;
29                 background-position: left;
30 
31             }
32         </style>
33     </head>
34     <body>
35         <div class="img">500px</div>
36         <div class="img2">position</div>
37         <div style="width: 500px;"></div>
38     </body>
39 </html>

3.2 display

display：none——隐藏标签
display：inline——变为行内标签
display：block——变为块级标签
display：inline-block——行内块级标签

3.3 float浮动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <title name="alex">南风阿帅</title>
 9         <link rel="shortcut icon" href="/uploads/image/20210630/rvTJqH.png">
10         <style>
11            
12         </style>
13     </head>
14     <body>
15         <!-- 父 -->
16         <div style="width: 500px;">
17             <!-- 子 -->
18             <div style="width: 20%;background-color: chartreuse;float: left;">20%</div>
19             <!-- 子 -->
20             <div style="width: 80%;background-color: chocolate;float: left;">80%</div>
21         </div>
22     </body>
23 </html>

3.4 font字体

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <style>
 7         /*字体（宋体，楷体，仿宋。。。）*/
 8         .c1{
 9             font-family: "Times New Roman",Georgia,Serif;
10         }
11         .c2{
12             font-family: Arial,Verdana,Sans-serif;
13         }
14     </style>
15 </head>
16 <body>
17      /*引用字体格式*/
18     <div class="c1">你好你好！</div>
19     <div class="c2">你好你好！</div>
20     /*设置字体大小*/
21     <div style="font-size: 13px;">你好你好！</div>
22     <div style="font-size: 16px;">你好你好！</div>
23     <div style="font-size: 18px;">你好你好！</div>
24     /*字体加粗*/
25     <div style="font-weight: 100;">你好你好！</div>
26     <div style="font-weight: 300">你好你好！</div>
27     <div style="font-weight: 400">你好你好！</div>
28     /*设置字体颜色*/
29     <div style="color: red;">你好你好！</div>
30     <div style="color:#f0ad4e">你好你好！</div>
31 </body>
32 </html>

3.5 文字对齐方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6     <style>
 7     
 8     </style>
 9 </head>
10 <body>
11     <h1>水平方向</h1>
12     <div  style="background-color: pink;text-align: left;">你好你好！</div>
13     <div style="background-color: darkseagreen;text-align: center;">你好你好！</div>
14     <div style="background-color: goldenrod; text-align: right;">你好你好！</div>
15     <h1>垂直方向</h1>
16     <div style="background-color: pink;">你好你好！</div>
17     <div style="background-color: darkseagreen;line-height: 100px;">你好你好！</div>
18     <div style="background-color: goldenrod;position: relative; ">
19         <span style="position: absolute;bottom: 0;">你好你好！</span>
20     </div>
21 </body>
22 </html>

3.6 边距

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <!-- 标签属性 -->
 9         <title name="alex">南风阿帅</title>
10         <link rel="shortcut icon" href="/uploads/image/20210630/rvTJqH.png">
11         <style>
12             
13         </style>
14     </head>
15     <body>
16         <div style="height: 70px;border: 1px solid red;">
17             <div style="height: 30px;background-color: green;margin-top: 20px;"></div>
18         </div>
19     </body>
20 </html>

3.7 定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <!-- 标签属性 -->
 9         <title name="alex">南风阿帅</title>
10         <link rel="shortcut icon" href="/uploads/image/20210630/rvTJqH.png">
11         <style>
12             
13         </style>
14     </head>
15     <body>
16         <div style="height: 2000px;background-color: rgb(199, 199, 199);"></div>
17         <div style="position: fixed;bottom: 0;right: 1%;">返回顶部</div>
18     </body>
19 </html>

3.8 对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <!-- 标签属性 -->
 9         <title name="alex">南风阿帅</title>
10         <link rel="shortcut icon" href="/uploads/image/20210630/rvTJqH.png">
11         <style>
12             .hide{
13                 display: none;
14             }
15             .modal{
16                 width:400px;
17                 height: 300px;
18                 background-color: blueviolet;
19             }
20         </style>
21     </head>
22     <body>
23         <input type="buton" value="添加" class="modal">
24         <div>对话框</div>
25     </body>
26 </html>

后续补充。。。

上一篇：日常CSS_滚动页面动画效果下一篇：前端问题分类-css

网站建设

Css

CSS基础知识