CSS

一. css的3种使用方式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <!-- 2.内部样式:在head元素内部的style标签内
 7     写样式,这种样式可以在当前网页上复用. -->
 8 <style>
 9     /*CSS的注释是这样的*/
10     h2 {
11         color: blue;
12     }
13 </style>
14 <!-- 3.外部样式:在单独的css文件中写样式,
15     需要通过link标签将其引入到网页上才有效.
16     这种样式可以在任意的网页上复用. -->
17 <link rel="stylesheet" href="my.css"/>
18 </head>
19 <body>
20     <!-- 1.内联样式:在元素的style属性里写样式,
21         这种样式只对这一个元素有效,无法复用. -->
22     <h1 style="color:red;">CSS是层叠样式表</h1>
23     <h2>CSS有3种使用方式</h2>
24     <p>1.内联样式</p>
25     <p>2.内部样式</p>
26     <p>3.外部样式</p>
27 </body>
28 </html>

二. css的规则特性

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style>
 7     /*1.继承性:在父元素上写的样式,可以被子元素
 8         继承,注意只有字体、颜色可以继承。*/
 9     body {
10         font-family: 
11             "微软雅黑","文泉驿正黑","黑体";
12     }
13     /*2.层叠性:先后给一个元素设置不同的样式,
14         其效果会叠加在一起. */
15     h1 {
16         color: red;
17         font-size: 50px;
18     }
19     /*3.优先级:先后给一个元素设置相同的样式,
20         其效果是以后者为准,也叫就近原则.*/
21     h2 {
22         color: blue;
23     }
24     /*...*/
25     h2 {
26         color: green;
27     }
28 </style>
29 </head>
30 <body>
31     <h1>苍老师</h1>
32     <h2>范传奇</h2>
33 </body>
34 </html>

三. css的选择器

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style>
 7     /*1.元素选择器:略*/
 8     /*2.类选择器:选择一类(class="某值")
 9         具有共性的元素*/
10     .girl {
11         color: pink;
12     }
13     /*3.id选择器:根据id选择唯一的元素*/
14     #p4 {
15         color: red;
16     }
17     /*4.选择器组:写出一组选择器,会选中每个
18         选择器所对应的目标的并集(合计).*/
19     .girl,#p4 {
20         /*字体加粗*/
21         font-weight: bold;
22     }
23     /*5.派生选择器:
24         选择某元素满足条件的后代 */
25     /*5.1选择子孙*/
26     #p5 b {
27         color: red;
28     }
29     /*5.2选择儿子*/
30     #p5>b {
31         font-size: 30px;
32     }
33     /*6.伪类选择器:根据元素的状态选择元素*/
34     /*6.1选择未访问过的超链接*/
35     a:link {
36         color: green;
37     }
38     /*6.2选择已访问过的超链接*/
39     a:visited {
40         color: red;
41     }
42     /*6.3选择激活态(正在点)的按钮*/
43     #b1:active {
44         background-color: green;
45     }
46     /*6.4选择有焦点(光标闪烁)的文本框*/
47     #t1:focus {
48         background-color: yellow;
49     }
50     /*6.5选择悬停态的图片*/
51     img:hover {
52         width: 250px;
53         height: 250px;
54     }
55 </style>
56 </head>
57 <body>
58     <p class="girl">苍老师呀苍老师</p>
59     <p>范传奇呀范传奇</p>
60     <p class="girl">王克晶呀王克晶</p>
61     <p id="p4">瞧你们那点破事</p>
62     <p id="p5">北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎大厦</b>B座8层</p>
63     <p>
64         <a href="http://www.tmooc.cn">达内</a>
65         <a href="http://www.sb.com">随便</a>
66     </p>
67     <p><input type="button" value="按钮1" id="b1"/></p>
68     <p><input type="text" id="t1"/></p>
69     <p>
70         <img src="../images/01.jpg"/>
71         <img src="../images/02.jpg"/>
72         <img src="../images/03.jpg"/>
73     </p>
74 </body>
75 </html>

四. border设置

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style>
 7     /*1.单个边设置边框(left/right/top/bottom)*/
 8     h1 {
 9         border-left: 10px solid blue;
10     }
11     /*2.四个边设置相同的边框*/
12     p {
13         border: 1px dashed red;
14     }
15 </style>
16 </head>
17 <body>
18     <h1>苍老师</h1>
19     <p>
20         刘苍松,系达内Java教学总监.
21         是Java教学改革的先驱.
22         同时他也是一名摄影爱好者,
23         他拍的片都很么么哒!
24         他最擅长捕捉肉体和灵魂的契合点,
25         能够折射出对人性的思考与鞭挞!
26     </p>
27 </body>
28 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style>
 7     div {
 8         border: 1px solid red;
 9         width: 100px;
10         height: 100px;
11     }
12     /*1.四个边一起设置相同的边距*/
13     #d1 {
14         padding: 20px;
15         margin: 30px;
16     }
17     /*2.四个边一起设置不同的边距(上右下左)*/
18     #d2 {
19         padding: 10px 20px 30px 40px;
20         margin: 40px 30px 20px 10px;
21     }
22     /*3.单个边设置边距(left/right/top/bottom)*/
23     #d3 {
24         padding-left: 30px;
25         margin-bottom: 20px;
26     }
27     /*4.对边设置边距(上下   左右)*/
28     #d4 {
29         padding: 20px 30px;
30         margin: 20px 30px;
31     }
32     /*5.外边距的特殊用法:
33         当采用对边设置外边距的时候,若
34         第二个值为auto,则该元素水平居中. */
35     #d5 {
36         margin: 50px auto;
37     }
38 </style>
39 </head>
40 <body>
41     <div id="d0">d0</div>
42     <div id="d1">d1</div>
43     <div id="d2">d2</div>
44     <div id="d3">d3</div>
45     <div id="d4">d4</div>
46     <div id="d5">d5</div>
47 </body>
48 </html>

五. 背景

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style>
 7     /*1.设置背景图*/
 8     body {
 9         background-image: 
10             url(../images/background.png);
11         background-repeat: repeat-y;
12         background-position: center;
13     }
14     div {
15         border: 1px solid red;
16         width: 125px;
17         height: 125px;
18         margin: 10px auto;
19     }
20     /*2.采用简化的方式设置背景(色和图)
21         background:颜色  图片  平铺  位置;
22         上述4个值可以酌情省略,但至少要保留
23         颜色或图片之一  */
24     .enemy {
25         background: 
26             url(../images/airplane.png)
27             no-repeat center;
28     }
29     .hero {
30         background: 
31             url(../images/hero0.png)
32             no-repeat center;
33     }
34     /*3.固定背景图*/
35     body {
36         background-attachment: fixed;/*默认为scroll，背景会随文档滚动*/
37     }
38 </style>
39 </head>
40 <body>
41     <div class="enemy"></div>
42     <div class="enemy"></div>
43     <div class="enemy"></div>
44     <div class="enemy"></div>
45     <div class="enemy"></div>
46     <div class="enemy"></div>
47     <div class="enemy"></div>
48     <div class="enemy"></div>
49     <div class="enemy"></div>
50     <div class="enemy"></div>
51     <div class="hero"></div>
52     <div class="hero"></div>
53 </body>
54 </html>

六. 控制文本格式

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style>
 7     /*指定字体 font-family:value1,value2*/
 8     /*字体大小 font-size:value*/
 9     /*字体加粗 font-weight:normal/bold*/
10     h1,p {
11         border: 1px solid red;
12         width: 300px;
13     }
14     h1 {
15         /*文本排列 text-align:left/right/center*/
16         text-align: center;
17         /*文字修饰 text-decoration:none/underline*/
18         text-decoration: underline;
19     }
20     p {
21         /*首行文本缩进 text-indent:value*/
22         text-indent: 2em;
23         /*行高 line-height:value*/
24         line-height: 2em;
25     }
26     h1 {
27         height: 100px;
28         /*当行高=元素的高时,文字垂直居中*/
29         line-height: 100px;
30     }
31 </style>
32 </head>
33 <body>
34     <h1>范传奇</h1>
35     <p>
36         华灯轻抚蚕丝被,
37         锦墙呢喃诉床帏.
38         情郎翘首索芳心,
39         佳人回眸送秋水.
40         丹心不畏相思苦,
41         浓情何惧岁月催.
42         万水千山终有路,
43         几度良宵几轮回.
44     </p>
45 </body>
46 </html>

七. 定位

1.定位的作用

  • 定位解决元素的排列(摆放)问题
  • 通过定位可以将元素摆放到任意位置

2.定位的分类

2.1默认定位

  • 默认情况下,块元素垂直排列,行内元素水平排列
  • 这个默认排列的规律称之为流定位,是默认的定位方式

流:元素水平或垂直排列而形成的队伍

2.2特殊定位(*)

1)浮动定位

  • 可以让块元素左右排列

2)相对定位

  • 让元素以自己为目标产生一定的偏移

3)绝对定位

  • 让元素以父亲为目标产生较大的偏移

4)固定定位

  • 让元素以窗口为目标产生巨大的偏移

二.浮动定位

1.浮动的规律

 

2.案例

 

三.相对、绝对、固定定位的联系

1.它们的区别

  • 在偏移时所选择的目标不同

2.它们的共同点

  • 在偏移时所设置偏移量的方式相同 

四.相对定位

  • 以自身为目标偏移
  • 偏移后元素原来的位置不释放(不脱离流)
  • position: relative;

元素不脱离流(队伍)

五.绝对定位

  • 以带有position的父辈为目标偏移
  • 若父辈都有position则采用就近原则
  • 若父辈都没有position则以body为目标
  • 偏移后元素的位置释放(脱离流)
  • position: absolute;

我们想以谁为目标,就在谁上面加position

六.固定定位

  • 以浏览器窗口为目标偏移
  • 偏移后元素的位置释放(脱离流)
  • position: fixed;

元素需要挂在窗口上永远不动,则采用固定定位

 

七.如何选择定位?

  1. 固定:是否想将元素挂在窗口上?
  2. 浮动:是否要解决块元素左右排列的问题?
  3. 相对:位置释放吗?偏移量小吗?
  4. 绝对:超过15秒没想出来,一般就是绝对定位.

 

八.元素的显示方式

1.有哪些方式?

1)块元素

  • 有宽高,垂直排列
  • h,p,ol,ul,div,table,form

2)行内元素

  • 无宽高,水平排列
  • span(i,em,b,strong,u,del),a,label

3)行内块元素

  • 有宽高,水平排列
  • img,input,select,textarea

2.如何修改显示方式?

  • 块: display:block--将元素显示方式设置为块
  • 行内: display:inline;--将元素显示方式设置为行内
  • 行内块: display:inline-block;--将元素显示方式设置为行内块
  • 隐藏(*): display:none;--不显示该元素，释放其占用位置
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style>
 7     p {
 8         display: inline;
 9     }
10     span {
11         display: block;
12     }
13     img {
14         display: block;
15     }
16     div {
17         display: none;
18     }
19 </style>
20 </head>
21 <body>
22     <div>
23         <p>aaa</p>
24         <p>bbb</p>
25         <p>ccc</p>
26     </div>
27     <div>
28         <span>111</span>
29         <span>222</span>
30         <span>333</span>
31     </div>
32     <div>
33         <img src="../images/01.jpg"/>
34         <img src="../images/02.jpg"/>
35         <img src="../images/03.jpg"/>
36     </div>
37 </body>
38 </html>

 

posted @ 2017-04-16 10:55  等你，在雨中  阅读(102)  评论(0)    收藏  举报