前端二：CSS

CSS：

一：介绍：学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者XML等文件的样式的计算机语言。让HTML和XML看起来更加美观。

语法：<style>标签内定义css样式。内容是{key:value}形式。

css位置：

为了提高样式的重用。css样式一般推荐在html  <head>标签的位置以及单独文件引用（head里的<link>标签）。

<head>标签内只能是当前html文件引用，而文件引用可以被多个文件引用该样式。

不推荐在标签内进行定义样式。

引用优先级：

标签内部一定样式 > <head>标签内部引用 >单个文件引用。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <link rel="stylesheet" href="s1.css"/>
 5     <meta charset="UTF-8">
 6     <title>test</title>
 7     <style>
 8     div{
 9         background-color: blue;
10         /*color: red;*/
11     }
12     </style>
13 </head>
14 
15 <body>
16 <div style="background-color: aqua;color: darkmagenta">哈哈</div>
17 <div>嘿嘿</div>
18 <div>嘿嘿</div>
19 <div>嘿嘿</div>
20 </body>
21 </html>

css 文件：

1 div{
2     background-color: burlywood;
3     color: deeppink;
4 }

效果：

二：Css选择器：

class属性值可以重复。

1）标签选择器，不常用。缺点：对所有匹配的标签都应用该样式。

语法：

1 <style>
2     标签名字{
3               样式：xx;
4 }
5 <style/>

 

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         div{
 8             background-color: aqua;
 9         }
10     </style>
11 </head>
12 <body>
13 <div>COME</div>
14 <div>BACK</div>
15 <div>OK</div>
16 </body>
17 </html>

 

效果：

2）id选择器：通过id属性值进行匹配。不常用。缺点：因为id值得唯一性，导致只能应用在匹配的一个标签内。

语法：

1 <style>
2     #id值{
3               样式：xx;
4 }
5 <style/>

 

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         #li{
 8             color: blue;
 9         }
10     </style>
11 </head>
12 <body>
13 <div id="li">COME</div>
14 <div>BACK</div>
15 <div>OK</div>
16 </body>
17 </html>

 

效果：

3)class选择器： 根据class属性值进行匹配样式。这个比较常用。

语法：

1 <style>
2     .class属性值{
3               样式：xx;
4 }
5 <style/>

 

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .li{
 8             color: deeppink;
 9         }
10     </style>
11 </head>
12 <body>
13 <div id="li">COME</div>
14 <div class="li">BACK</div>
15 <div class="li">OK</div>
16 </body>
17 </html>

 

效果：

4）层级选择器：注意用空格来表示层级。比较常用。

场景：当一个标签内嵌套标签。对内层标签的进行样式定义的时候。

语法：

1     <style>
2         标签名 标签名 标签名{
3             样式: 值;
4         }
5     </style>

 

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         div div span{/*也可以写成这样div div .a*/
 8             color: darkmagenta;
 9         }
10     </style>
11 </head>
12 <body>
13 <div>
14     <div>
15         <span class="a">OK</span>
16         <a class="b">FUCK</a>
17     </div>
18 </div>
19 </body>
20 </html>

 

5）组合选择器。当多个标签要要应用同一个样式的时候可以使用组合选择器。比较常用。

语法：通过逗号来表示多个class。

1     <style>
2         .class值,.clas值{
3             样式: 值;
4         }
5     </style>

 

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a,.b{
 8             color: darkmagenta;
 9         }
10     </style>
11 </head>
12 <body>
13 <div class="a">aa</div>
14 <div class="b">bbb</div>
15 </body>
16 </html>

 

效果：

三：样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .c1{
 8             background-color: deeppink;/*背景色*/
 9             color: blue;/*字体颜色*/
10             font-family: "楷体";/*字体设置*/
11             font-size: 35px;/*字体大小*/
12             width: 500px;/*宽度*/
13         }
14     </style>
15 </head>
16 <body>
17 <div class="c1">欢迎来到美德商城</div>
18 <div style="width: 500px;background-color: darkseagreen">
19     <div style="width: 20%;background-color: chartreuse">欢迎</div>
20     <div style="width: 40%;background-color: cornsilk">再见</div>
21 </div>
22 </body>
23 </html

 

效果：

注意：html有宽度，可以是100%也是20%等。chid  <div>可以占有parent <div>的宽度比。因为内容多少高度就多少，是由内容来确定。所以没有高度的百分比(height).

背景颜色可以是由具体的英文和rgb18进制来代替 也可以用rgb(三个数字参数)来表示。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8 <div style="background-color: #EEEE00">cccc</div>
 9 </body>
10 </html>

 

效果：

1）background_img 北京图片。需要规定长度和宽度，默认是图片是铺满整个屏幕。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>background</title>
 6     <style>
 7         .c1{
 8             background-image: url("2.jpg");
 9             width: 300px;
10             height: 300px;
11 
12         }
13     </style>
14 </head>
15 <body>
16 <div class="c1"></div>
17 </body>
18 </html>

 

效果：

background_postion确定图片位置：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>background</title>
 6     <style>
 7         .c1{
 8             background-image: url("2.jpg");
 9             width: 70px;
10             height: 70px;
11             background-repeat: no-repeat;/*图片不重复*/
12             background-position: -157px -85px;/*图片位置*/
13         }
14     </style>
15 </head>
16 <body>
17 <div class="c1"></div>
18 </body>
19 </html>

 

效果：

 

通过移动图片的位置来呈现图片的那个部位。而不是移动页面。默认显示的图片左上部分。

简单写法：

code：

1     <style>
2         .c1{
3             background:url("2.jpg") -140px -64px no-repeat;
4             width: 90px;
5             height: 90px;
6 
7         }
8     </style>

 

2）边框（border）：

code：

1     <style>
2         .c1{
3             border: 1px solid red;
4         }
5     </style>
6 </head>
7 <body>
8 <span class="c1">username</span>
9 </body>

 

效果：

可以只加左边、右边、上边、下边：border-left border-right border-top border-bottem

3）display：非常重要!!!display:none 隐藏标题栏。

code:

 

 1     <style>
 2         .c1{
 3             border: 1px solid red;
 4             /*display: none;*/
 5         }
 6         .c2{
 7             border: 1px solid red;
 8         }
 9     </style>
10 </head>
11 <body>
12 <span class="c1">username</span>
13 <span class="c2">pasword</span>
14 </body>

 

 

 

code:

 

 1     <style>
 2         .c1{
 3             border: 1px solid red;
 4             display: none;
 5         }
 6         .c2{
 7             border: 1px solid red;
 8         }
 9     </style>
10 </head>
11 <body>
12 <span class="c1">username</span>
13 <span class="c2">pasword</span>
14 </body>

 

 

 

display:none 隐藏标签，并把标签占有位置去掉。

display:block：让内联标签可以像块级标签一样占一行。

code：

 1     <style>
 2         .c1{
 3             border: 1px solid red;
 4             display: inline;
 5         }
 6         .c2{
 7             border: 1px solid red;
 8             display: block;
 9         }
10     </style>
11 </head>
12 <body>
13 <div class="c1">块级</div>
14 <span class="c2">内联</span>
15 </body

 

效果：

display:

code:

 1     <style>
 2         .c2{
 3             border: 1px solid red;
 4             display: inline-block;/*让内联标签也具有块级标签的作用 高度和宽度*/
 5             width: 70px;
 6             height: 70px;
 7         }
 8     </style>
 9 </head>
10 <body>
11 <span class="c2">内联</span>

 

效果：

默认内联标签不具有宽度和高度。

最常用的用途：1：弹窗（默认是隐藏-display:none 显示的是去掉。）2：菜单显示二级菜单。

4）伪造超链接、等待等。

code：

 1     <style>
 2         .c1{
 3             cursor: pointer;
 4             color: blue;
 5         }
 6         .c2{
 7             cursor: help;
 8             color: blue;
 9         }
10         .c3{
11             cursor: move;
12             color: blue;
13         }
14         .c4{
15             cursor: crosshair;
16             color: blue;
17         }
18         .c5{
19             cursor: wait;
20             color: blue;
21         }
22     </style>
23 </head>
24 <body>
25 <span class="c1">伪造超链接</span>
26 <span class="c2">ddd</span>
27 <span class="c3">ddd</span>
28 <span class="c4">ddd</span>
29 <span class="c5">ddd</span>
30 </body>

 5）内边距和外边距：

区别：内外边距的概念是相对于标签是否增长得区别.

应用：京东登录：

margin 外边距：本身标签不增长。而是标签部分移动。默认是

code：

 1     <style>
 2         .c1{
 3             border: 1px solid red;
 4             width: 700px;
 5             height: 700px;
 6             background-color: beige;
 7         }
 8 
 9         .c2{
10             background-color: #EEEE00;
11             margin-top: 20px;
12             margin-left: 20px;
13             margin-right: 20px;
14         }
15 </style>
16 </head>
17 
18 <body>
19 <div class="c1">
20     <div class="c2"> username: <input type="text"/> </div>
21 </div>

 

效果：

和上面、左面、右面各有边距。实际上用margin的时候就自动个上下左右进行边距。

code：

 1     <style>
 2         .c1{
 3             border: 1px solid red;
 4             width: 700px;
 5             height: 700px;
 6             background-color: beige;
 7         }
 8 
 9         .c2{
10             background-color: #EEEE00;
11             margin: 30px;
12         }
13 </style>
14 </head>
15 
16 <body>
17 <div class="c1">
18     <div class="c2"> username: <input type="text"/> </div>
19 </div>

 

效果：

padding 内边距：嵌套标签边长，同样也有左边距、右边距、上、下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>OK</title>
 6     <style>
 7     .c1{
 8         background-color: darkseagreen;
 9         border: 1px solid red;
10         width: 390px;
11         height: 370px;
12     }
13     .c2{
14         padding-left: 30px;
15         padding-right: 20px;
16         padding-top: 10px;
17         background-color: aquamarine;
18     }
19     </style>
20 </head>
21 
22 <body>
23 <div class="c1">
24     <div class="c2">username:<input type="text"/> </div>
25 </div>
26 </body>
27 </html>

效果：

同样也有padding直接包含上下左右做内边距。

6）float漂浮：

表示子标签漂浮。如果子标签的超过100%将不会漂浮成功。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .c1{
 8             background-color: #EEEE00;
 9             float: left;
10             width: 20%;
11 
12         }
13         .c2{
14             background-color: beige;
15             /*height: 100px;*/ /*同样父div定义高度的时候就不会出现子div飘出去*/
16             width: 100px;
17             border: 1px solid black;
18         }
19         .c3{
20             background-color: darkorchid;
21             width: 50%;
22             float: left;
23         }
24     </style>
25 </head>
26 <body>
27 <div class="c2">
28     <div class="c1">OK</div>
29     <div class="c3">KO</div>
30     <div style="clear: both;"></div>  <!-- 表示当父div没定义高度的是保证子div漂的时候不出父div的框-->
31 </div>
32 
33 </body>
34 </html>

 

效果：

7）postion：位置。

1、fixed：固定到窗口的位置，页面滚动 也不变化位置。

2、absolute：可以固定到一个位置，但是页面滚动，他的位置也变化。

3、relative：和absolute一起使用。可以固定到父标签的框内的相对位置，而不是窗口的相对位置。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .c1{
 8             background-color: darkkhaki;
 9             height: 2000px;
10         }
11         .c2{
12             background-color: chartreuse;
13             position: fixed;
14             bottom: 0;/*表示右下角固定*/
15             right: 0;
16         }
17     </style>
18 </head>
19 <body>
20 <div class="c1">
21     <div class="c2">返回顶部</div>
22 </div>
23 </body>
24 </html>

 

效果：

absolute：

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .c1{
 8             background-color: darkkhaki;
 9             height: 2000px;
10         }
11         .c2{
12             background-color: chartreuse;
13             position: absolute;
14             bottom: 0;
15             right: 0;
16         }
17     </style>
18 </head>
19 <body>
20 <div class="c1">
21     <div class="c2">返回顶部</div>
22 </div>
23 </body>
24 </html>

 

随着网页的滚动而移动。

relative：

code：

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

 

效果：

注意：absolute和relative:一起使用，无论他们之间套了多少层标签，都是从内往外找。直到匹配。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .c1{
 8             border: 1px  solid red;
 9             height: 200px;
10             width: 100px;
11             position: relative;
12         }
13         .c3{
14             position: absolute;
15             color: red;
16             bottom: 0;
17             right: 0;
18         }
19         .c2{
20             background-color: #EEEE00;
21             width: 100%;
22             height: 100px;
23         }
24     </style>
25 </head>
26 <body>
27 <div class="c1">
28     <div class="c2">
29         <div class="c3">111</div>
30     </div>
31 </div>
32 </body>

 

效果：

posted @ 2016-08-11 11:12  evil_liu  阅读(335)  评论(0)  编辑  收藏  举报