zoukankan html css js c++ java

D15——C语言基础学PYTHON

C语言基础学习PYTHON——基础学习D15

20180926内容纲要：

　　1、CSS介绍

　　2、CSS的四种引入方式

　　3、CSS选择器

　　4、CSS常用属性

　　5、小结

　　6、练习

1 CSS介绍

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

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

编程工具：

记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。

Dreamweaver：它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。

功能介绍：

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

2 CSS四种引入方式

（1）行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，代码的重用性不够高，不推荐使用，但如果只是个别标签可以这么做。

<div style="background-color: #2459a2; height:48px;"></div>

（2）嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1 {
            background-color: teal;
            height: 48px;
        }
        .c1{
            background-color: teal;
            height: 48px;
        }
    </style>
</head>

（3）链接式

将一个.css文件引入到HTML文件中。

首先创建一个Stylesheet，存为common.css

.c1{
    background-color: yellow;
    color: black;
}
.c2{
    font-size: 28px;
    color: #2459a2;
}

引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css"/>
</head>

（4）导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "commons.css";
    </style>
</head>

3 CSS选择器

（1）id选择区

（2）class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1 {
            background-color: teal;
            height: 48px;
        }
        .c1{
            background-color: teal;
            height: 48px;
        }
    </style>
</head>
<body>
    <div style="background-color: #2459a2; height:48px;"></div>
    <div id="i1"></div>
    <div class="c1"></div>
    <span class="c1"></span>
    <div class="c1"></div>
</body>
</html>

（3）标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color:black;
            color: white;
        }
        span div{
            background-color:green;
            color: yellow;
        }
        input[type="text"]{width: 100px;height: 200px;}
    </style>
</head>
<body>
    <div>1</div>
    <span>
        <div>1</div>
    </span>
    <div>1</div>
    <div>1</div>
    <input type="text" />
    <input type="password" />
    <input class="c3" type="password"  n="kanghui" />
</body>
</html>

（4）层级选择器（空格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 .c2 div{
            background-color:black;
            color: white;
                   }
        span div{
            background-color:green;
            color: yellow;
        }
    </style>
</head>

（5）组合选择器（逗号）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color:green;
            color: yellow;
        }
        .c1,.c2{
            background-color:green;
            color: yellow;
        }
    </style>
</head>

（6）属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
　　　.c3[n="kanghui"]{ 100px;height: 200px;}
　　</style> 
</head>

PS：优先级，标签上style优先，编写顺序，就近原则

4 CSS常用属性

（1）颜色属性

<div style="color:blueviolet">ppppp</div>

rgb颜色查询对照表：http://tool.oschina.net/commons?type=3

（2）字体属性

1 font-size: 20px/50%/larger
2 font-family:'Lucida Bright'
3 font-weight: lighter/bold/border/

<h1 style="font-style: oblique">qqqq</h1>

（3）背景属性

background-position这个很重要！后面做多层背景时会用到！

1 background-color: cornflowerblue
2 background-image: url('1.jpg');
3 background-repeat: no-repeat;(repeat:平铺满)
4 background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="height: 100px"></div>
 9     <div style="background-image: url(icon_18_118.png);
10     background-repeat: no-repeat;
11     height: 20px;
12      20px;
13     border: 1px;
14     background-position-x: 0;
15     background-position-y: 0;
16     ></div>
17 </body>
18 </html>

背景色填充

（4）文本属性

1 font-size: 10px;
2 text-align: center;   横向排列
3 line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
4 vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
5 text-indent: 150px;   首行缩进
6 letter-spacing: 10px;
7 word-spacing: 20px;
8 text-transform: capitalize;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8 
 9 
10         .outer .item {
11             width: 300px;
12             height: 200px;
13             background-color: chartreuse;
14             display: inline-block;
15         }
16 
17 
18     </style>
19 </head>
20 <body>
21     <div class="outer">
22         <div class="item" style="vertical-align: top">ll
23         </div>
24         <div class="item">
25         </div>
26     </div>
27 
28     <script>
29 
30     </script>
31 </body>
32 </html>
33 
34 vertical-align

小试牛刀1

 1 <body>
 2     <div class="c1 c2" style="color:pink"></div>
 3     <div style="border:1px solid red;"></div>
 4     <div style="border:4px dotted red;"></div>
 5     <div style="height: 48px;
 6      80%;
 7     border: 1px solid blue;
 8     font-size: 16px;
 9     text-align: center;
10     line-height: 48px;
11     font-weight: bold;">
12     </div>
13 </body>

小试牛刀2

（5）边框属性

1 border-style: solid;
2 border-color: chartreuse;
3 border- 20px;
4 简写：border: 30px rebeccapurple solid;

（6）display属性

1 none
2 block
3 inline

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="background-color: red;display: inline">sdsf</div>
 9     <span style="background-color: red;display: block">sdsd</span>
10     <span style="background-color:red;height: 50px; 70px;">sdsds</span>
11     <a style="background-color: red;"></a>
12 </body>
13 </html>

display

（7）内边距和外边距

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div style="height: 35px; 400px;position: relative;">
 9     <input type="text" style="height: 35px; 370px;padding-right: 30px;"/>
10     <span style="position: absolute;right: 10px;top: 10px;background-image:url(i_name.png);height: 20px; 20px;display: inline-block;"></span>
11     </div>
12 </body>
13 </html>

边距

练习： 300px*300px的盒子装着100px*100px的盒子，分别通过margin和padding设置将小盒子移到大盒子的中间

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

练习

思考1:

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了。

（8）float属性

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height: 38px;
 9             background-color: #dddddd;
10             line-height: 38px;
11         }
12     </style>
13 </head>
14 <body style="margin: 0 auto">
15     <div class="pg-header">
16         <div style=" 960px;margin: auto">
17             <div style="float: left">收藏本站</div>
18             <div style="float: right">
19                 <a>登录</a>
20                 <a>注册</a>
21             </div>
22             <div style="clear: both"></div>
23         </div>
24     </div>
25     <div style=" 300px;border: 1px solid red;">
26         <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
27         <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
28         <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
29         <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
30         <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
31         <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
32         <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
33         <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
34         <div style="clear: both;"></div>
35     </div>
36 </body>
37 </html>

float演示

（9）position属性

1 fixed
2 relative
3 absolute

opcity: 0.5 透明度
z-index: 层级顺序
overflow: hidden,auto
hover

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style=" 50px;height: 50px;background-color: black;position: absolute;"></div>
 9     <div style="height: 5000px;background-color: #dddddd"></div>
10 </body>
11 </html>

absolute

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="position: relative; 500px;height: 400px;border: 1px solid red;margin: 0 auto">
 9 
10         <div style="position: absolute;left:0; bottom:0;  50px;height: 50px;background-color: black"></div>
11     </div>
12     <div style="position: relative; 500px;height: 400px;border: 1px solid red;margin: 0 auto"></div>
13     <div style="position: relative; 500px;height: 400px;border: 1px solid red;margin: 0 auto"></div>
14 
15 </body>
16 </html>

position演示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="z-index: 10;position: fixed;
 9      500px;
10     height: 500px;
11     left: 50%;
12     top: 50%;
13     margin-top: -200px;
14     margin-left: -250px;
15     background-color: white
16     "></div>
17 
18     <div style="z-index: 9;position: fixed;background-color: black;
19     top: 0;
20     left: 0;
21     bottom: 0;
22     right: 0;
23     opacity: 0.6;
24     "></div>
25     <div style="height: 5000px;background-color: red"></div>
26 </body>
27 </html>

z-index

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="height: 200px; 300px;overflow: auto">
 9         <img src="1.jpg">
10     </div>
11       <div style="height: 200px; 300px;overflow: hidden ">
12         <img src="1.jpg">
13     </div>
14 </body>
15 </html>

overflow

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             position: fixed;
 9             right: 0px;
10             left: 0px;
11             top: 0px;
12             height: 48px;
13             background-color: #24592a;
14             line-height: 48px;
15         }
16         .pg-body {
17             margin-top: 50px;
18         }
19         .w {
20             width: 980px;
21             margin: 0 auto;
22         }
23         .pg-header .menu{
24             display: inline-block;
25             padding: 0 10px 0 10px;
26             color: white;
27         }
28         .pg-header .menu:hover{
29             background-color: green;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="pg-header">
35         <div class="w">
36             <a class="logo">LOGO</a>
37             <a class="menu">全部</a>
38             <a class="menu">段子</a>
39             <a class="menu">社区</a>
40         </div>
41     </div>
42     <div class="pg-body">
43         <div class="w"></div>
44     </div>
45 </body>
46 </html>

hover

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div style="height: 35px; 400px;position: relative;">
 9     <input type="text" style="height: 35px; 370px;padding-right: 30px;"/>
10     <span style="position: absolute;right: 10px;top: 10px;background-image:url(i_name.png);height: 20px; 20px;display: inline-block;"></span>
11     </div>
12 </body>
13 </html>

相对绝对位置

5 小结

一鼓作气，再而衰，三而竭！

要学的东西太多了，学不过来了。

酷狗上有些歌已经没有版权了，但是还能听，不能分享。心情有点糟~

6 练习

练习1：返回顶部

需用用到JavaScript，下节内容。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div onclick="GoTop();" style=" 50px;height: 50px;background-color: black;color: white;
 9     position: fixed;
10     bottom: 20px;
11     right: 20px;
12     ">返回顶部</div>
13     <div style="height: 5000px;background-color: #dddddd"></div>
14     <div>
15         <script>
16             function GoTop() {
17                 document.body.scrollTop =0;
18             }
19         </script>
20     </div>
21 </body>
22 </html>

返回顶部

练习2：顶部固定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height: 48px;
 9             background-color: black;
10             color: white;
11             position: fixed;
12             top: 0px;
13             right: 0px;
14             left: 0px;
15         }
16         .pg-body{
17             background-color: #dddddd;
18             height: 5000px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="pg-header">头部</div>
24     <div class="pg-body;" style="margin-top: 48px" >内容</div>
25 </body>
26 </html>

顶部固定

我是尾巴~

一个很基础的教程。

虽不才，才要坚持~

查看全文

相关阅读:
在linux查看内存的大小
 Linux下查看操作系统的位数和系统名称版本信息
 Linux下查看操作系统的位数和系统名称版本信息
 [KOJ95603]全球奥运
 [KOJ6997]旅行商问题二
 [hihoCoder#1065]全图传送
 [codeforces 339]E. Three Swaps
[codeforces 339]D. Xenia and Bit Operations
[codeforces 360]A. Levko and Array Recovery
[codeforces 339]C. Xenia and Weights

原文地址：https://www.cnblogs.com/zhangkanghui/p/9710945.html