前端基础(2) - CSS入门

CSS入门知识图谱

 

1.CSS基础

CSS分类：外部、内部、行内样式；ps：基础知识，具体内容百度

CSS样式文件结构：

示例-内部样式表创建格式：

2.CSS基本使用

2.1.css选择器

示例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         p{
 8             background-color: red;
 9             font-size: 40px;
10         }
11         .p1{
12             font-family: 隶书;
13         } 
14     </style>
15 </head>
16 <body>
17     <p>http://www.imooc.com</p>
18     <p class="p1">慕课网</p>
19     <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
20 </body>
21 </html>

展示效果

2.2.css样式设置

 

示例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         p{
 8             background-color: red;
 9             font-size: 40px;
10         }
11         .p1{
12             font-family: 隶书;
13         }
14         body{
15             /*background-color:yellow;
16             background-image: url("image/wudaojiaoshi.jpg");
17             background-repeat: no-repeat;
18             background-attachment: fixed;
19             background-position: 20px 30px;*/
20             background:yellow url("image/wudaojiaoshi.jpg") no-repeat fixed 30px 40px;
21         }
22     </style>
23 </head>
24 <body>
25     <p>http://www.imooc.com</p>
26     <p class="p1">慕课网</p>
27     <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
28 </body>
29 </html>

展示效果

2.3.使用外部样式表

示例代码-index.css

 1 p{
 2     background-color: red;
 3     font-size: 40px;
 4 }
 5 .p1{
 6     font-family: 隶书;
 7 }
 8 body{
 9     /*background-color:yellow;
10     background-image: url("image/wudaojiaoshi.jpg");
11     background-repeat: no-repeat;
12     background-attachment: fixed;
13     background-position: 20px 30px;*/
14     background:yellow url("image/wudaojiaoshi.jpg") no-repeat fixed 30px 40px;
15 }

示例代码-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     <p>http://www.imooc.com</p>
10     <p class="p1">慕课网</p>
11     <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
12 </body>
13 </html>

展示效果

2.4.CSS样式加载方式以及优先级

加载方式

1.内部样式：

2.外部链接方式：

3.行内样式：

三种方式的优先级

行内元素样式设置 >内部样式设置>外部样式设置

 

3.CSS常用样式

3.1.文本类样式

 

示例代码-index.css

 1 p{
 2     /*color: rgb(238,130,238);*/
 3     /*direction: ltr;*/
 4     letter-spacing: 10px;
 5     line-height: 50px;
 6     /*text-align: justify;*/
 7     /*text-decoration: line-through;*/
 8     /*text-shadow: 5px 5px 5px red;*/
 9     text-transform: uppercase;
10 /*    text-indent: 2em;*/
11     text-indent: 30px;
12 }

示例代码-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     <p>http://www.imooc.com</p>
10     <p class="p1">慕课网</p>
11     <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
12 
13 </body>
14 </html>

3.2.字体类样式

示例代码-index.css

 1 p{
 2     /*color: rgb(238,130,238);*/
 3     /*direction: ltr;*/
 4     letter-spacing: 10px;
 5     line-height: 50px;
 6     /*text-align: justify;*/
 7     /*text-decoration: line-through;*/
 8     /*text-shadow: 5px 5px 5px red;*/
 9     text-transform: uppercase;
10     text-indent: 30px;
11     font-style: italic;
12     font-weight: bold;
13     font-size: 30px;
14     font-family: 隶书;
15 }

示例代码-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     <p>http://www.imooc.com</p>
10     <p class="p1">慕课网</p>
11     <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
12     
13 </body>
14 </html>

3.3.列表样式

示例代码-index.css

 1 p{
 2     /*color: rgb(238,130,238);*/
 3     /*direction: ltr;*/
 4     letter-spacing: 10px;
 5     line-height: 50px;
 6     /*text-align: justify;*/
 7     /*text-decoration: line-through;*/
 8     /*text-shadow: 5px 5px 5px red;*/
 9     text-transform: uppercase;
10     text-indent: 30px;
11     font-style: italic;
12     font-weight: bold;
13     font-size: 30px;
14     font-family: 隶书;
15 }
16 
17 ul{
18     /*list-style-type: circle;
19     list-style-position: outside;
20     list-style-image: url("image/headLogo/1.gif");*/
21     list-style: outside url("image/headLogo/9.gif");
22 }
23 ol{
24     list-style-type: lower-latin;
25 }

示例代码-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     <p>http://www.imooc.com</p>
10     <p class="p1">慕课网</p>
11     <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
12     <ul>
13         <li>aaaaa</li>
14         <li>bbbbb</li>
15         <li>ccccc</li>
16         <li>ddddd</li>
17         <li>eeeee</li>
18     </ul>
19 
20     <ol>
21         <li>aaaaa</li>
22         <li>bbbbb</li>
23         <li>ccccc</li>
24         <li>ddddd</li>
25         <li>eeeee</li>
26     </ol>
27 </body>
28 </html>

 

4.伪类和伪元素

4.1.伪类样式

示例代码-index.css

 1 a:link{
 2     color:red;
 3 }
 4 a:visited{
 5     color: green;
 6 }
 7 a:hover{
 8     color: yellow;
 9     font-size: 30px;
10 }
11 a:active{
12     color:blue;
13 }
14 label:hover{
15     color:red;
16 }
17 input:hover{
18     background-color: red;
19 }
20 input:active{
21     background-color: blue;
22 }
23 input:focus{
24     background-color: yellow;
25 }

示例代码-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     <p>http://www.imooc.com</p>
10     <p class="p1">慕课网</p>
11     <a href="#">伪类</a>
12     <label>用户名</label>
13     <input type="text">
14 </body>
15 </html>

4.2.伪类分类

  • 状态性伪类  、结构性伪类
  • 状态伪类：目标对象状态发生改变后进行怎样的操作；ps：上面4.1.的都是状态伪类
  • 结构性伪类：  主要是为了选择子元素进行

示例代码-index.css

1 p:nth-child(2){
2     background-color: red;
3 }
4 
5 td:nth-last-child(2){
6     background-color: red;
7 }

示例代码-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     
10     <p>http://www.imooc.com</p>
11 
12     <p>慕课网</p>
13     <p>慕课网</p>
14     <h1>慕课网欢迎您</h1>
15     <table border="1" width="500px">
16       <tr>
17         <td>1</td>
18         <td>1</td>
19         <td>1</td>
20         <td>1</td>
21       </tr>
22       <tr>
23         <td>1</td>
24         <td>1</td>
25         <td>1</td>
26         <td>1</td>
27       </tr>
28       <tr>
29         <td>1</td>
30         <td>1</td>
31         <td>1</td>
32         <td>1</td>
33       </tr>
34     </table>
35 </body>
36 </html>

4.3.伪元素选择器

  • 伪元素选择器：（以双冒号写）
  • 伪类：整体， 伪元素：部分

示例代码-index.css

 1 /*可以将p换成h1*/
 2 p::before{
 3     content: "终于找到你，";
 4 }
 5 /*可以将body也换成h1*/
 6 body::after{
 7     content: "依依不舍离开你，";
 8 }
 9 p::first-line{
10     background-color: yellow;
11 }
12 p::first-letter{
13     font-size: 30px;
14 }
15 p::selection{
16     background-color: red;
17 }

示例代码-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     
10     <p>http://www.imooc.com</p>
11 
12     <p>慕课网</p>
13     <p>慕课网</p>
14     <h1>慕课网欢迎您</h1>
15     <p>
16         慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
17     <table border="1" width="500px">
18       <tr>
19         <td>1</td>
20         <td>1</td>
21         <td>1</td>
22         <td>1</td>
23       </tr>
24       <tr>
25         <td>1</td>
26         <td>1</td>
27         <td>1</td>
28         <td>1</td>
29       </tr>
30       <tr>
31         <td>1</td>
32         <td>1</td>
33         <td>1</td>
34         <td>1</td>
35       </tr>
36     </table>
37 </body>
38 </html>

 

5.其他选择器

5.1.css其他选择器

  • id用法：#id
  • *全部选择
  • 逗号选择器用法：p1，p2{}(联合多个选择器)
  • 空格选择器用法：#div1 p{}（div1内部所有的p）
  • >选择器：#div1>p{}（直接属于div1的所有的p）
  • +选择器：#div1+p{}（和div1属于同一级的p兄弟）
  • []：属性选择器p[]{}（[]内加属性）

示例代码01-index.css

1 #name1,#name2,p,#td1{
2     color:red;
3     background-color: yellow;
4 }

示例代码01-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     
10     <p>http://www.imooc.com</p>
11 
12     <p class="p1" id="name1">慕课网</p>
13     <p class="p1" id="name2">慕课网</p>
14     <h1>慕课网欢迎您</h1>
15     <p>
16         慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
17     <table border="1" width="500px">
18       <tr>
19         <td>1</td>
20         <td>1</td>
21         <td>1</td>
22         <td>1</td>
23       </tr>
24       <tr>
25         <td>1</td>
26         <td>1</td>
27         <td>1</td>
28         <td>1</td>
29       </tr>
30       <tr>
31         <td>1</td>
32         <td>1</td>
33         <td>1</td>
34         <td>1</td>
35       </tr>
36     </table>
37 </body>
38 </html>

示例代码02-index.css

 1 /*子孙选择器*/
 2 /*#div1 p{
 3     color: red;
 4 }*/
 5 /*子选择器*/
 6 /*#div1>p{
 7     color:red;
 8 }*/
 9 
10 /*相邻兄弟选择器*/
11 /*#div2+div{
12     color: red;
13 }*/
14 
15 /*属性选择器*/
16 p[class="p1"]{
17     color:red;
18 }

示例代码02-index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" type="text/css" href="index.css">
 7 </head>
 8 <body>
 9     <div id="div1">
10     <div id="div2">
11     <p>http://www.imooc.com</p>
12     </div>
13     <div id="div3">
14     <p class="p1" id="name1">慕课网</p>
15     <p class="p2" id="name2">慕课网</p>
16     </div>
17     <h1>慕课网欢迎您</h1>
18     <p>
19         慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
20     </div>
21     <p>为在div1的外面</p>
22     <table border="1" width="500px">
23       <tr>
24         <td>1</td>
25         <td>1</td>
26         <td>1</td>
27         <td>1</td>
28       </tr>
29       <tr>
30         <td>1</td>
31         <td>1</td>
32         <td>1</td>
33         <td>1</td>
34       </tr>
35       <tr>
36         <td>1</td>
37         <td>1</td>
38         <td>1</td>
39         <td>1</td>
40       </tr>
41     </table>
42 </body>
43 </html>

5.2.css选择器优先级

一般情况下：选择器选择范围越小，优先级越高

 

posted @ 2022-10-11 10:18  葛老头  阅读(26)  评论(0)  编辑  收藏  举报