首页 > 其他分享 >前端基础(2) - CSS入门

前端基础(2) - CSS入门

时间：2022-10-11 10:23:45浏览次数：51  
标签：慕课 入门 示例 color 前端 12 background 选择器 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选择器优先级

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

 

标签：慕课,入门,示例,color,前端,12,background,选择器,CSS
From： https://www.cnblogs.com/gltou/p/16661972.html

相关文章

  • 前端基础(3) - CSS浮动
    CSS浮动知识图鉴 1.DIV1.1.div简介div是层叠样式表中的定位技术,全程DIVision有时把div称为图层,更多时候称为"块"1.2.div样式设置1.3.div溢出处理效果......
  • 前端基础(4) - CSS定位
    CSS定位知识图谱1.概述及相对定位1.1.概述定位position的四个属性：relative：相对absolute：绝对static：无定位，也是默认的设置fixed：固定1.2.相对定位示例代码-index......
  • 前端Vue2-Day47
    事件处理：使用v-on:事件名或@事件名绑定事件。1.事件的回调需要配置在methods对象内，最终在vm上。2.methods中的配置函数，this指向为组件实例对象或vm。不使用箭头函数，......
  • 年底前端面试题总结（上）
    对keep-alive的理解HTTP1.0中默认是在每次请求/应答，客户端和服务器都要新建一个连接，完成之后立即断开连接，这就是短连接。当使用Keep-Alive模式时，Keep-Alive功能使客户端......
  • k8s 入门之常见问题&命令
    问题一、Kubernetes权威指南中com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException:Couldnotcreateconnectiontodatabase的错误Kubernetes......
  • Python：从入门到进阶
    导读本文将推荐一个Github开源项目：python-tutorial。本Python教程包含了一些范例，涵盖了大多数Python日常脚本任务，是入门Python的学习资料，也可以作为工作中编写Python脚本......
  • Git项目管理快速入门
    Git是什么Git的理解：Git是目前世界上最先进的分布式版本控制系统（没有之一），用于敏捷高效地处理任何或小或大的项目。简单理解就是代码管理工具。使用Git一般处于以下3......
  • 【前端】CSS易忘样式记录 | 研
    盒模型box-sizing：规定计算一个元素实际宽高的方式box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。值描述content-box这是由CSS2.1规定的宽......
  • 【2022-10-10】DRF从入门到入土(八)
    drf组件之自定义频率使用fromrest_framework.throttlingimportBaseThrottle,SimpleRateThrottleclassMyThrottle(BaseThrottle):access_record={}de......
  • Logstash入门教程
    前言在线调试工具：​​http://grokdebug.herokuapp.com/​​一个例子input{file{path=>"/data/mosh/logstash-6.2.4/logs/test.log"#下面2个配置......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99