web前端基础——初识CSS

1 CSS概要

     CSS(Cascading Style Sheets)称为层叠样式表，用于美化页面(单纯HTML写的页面只是网页框架和内容的组合，相当于赤裸的人，而CSS则是给赤裸的人穿上华丽的外衣)，基本上所有的HTML页面都或多或少的使用了CSS。
    CSS在页面中存在的三种方式：元素内联、页面嵌入和外部引入(语法：style='key1:value1;key2:value2;')
    (1)标签内联：在HTML标签中使用 style='属性:属性值;'
    (2)页面嵌入: <style type="text/css"></style>，即在头部先定义CSS样式块，后面再进行引用
    (3)引入外部已写好的CSS文件
    三种表现形式的优先级：标签内联>页面嵌入>外部引用，这个仅在三种形式中存在同样的样式时起作用。

2 CSS的三种存在形式

2.1 标签内联
标签内联，即在HTML标签中直接写入属性和属性值

1  <div style="color:red;">
2      第1种：标签内联
3  </div>

2.2 页面嵌入
页面嵌入，即在HTML中的头部先定义CSS样式块，然后在后续使用该样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 
 8       <!--定义样式-->
 9       <style>
10           .re{
11                color:red;
12              }
14         #name{
15                background-color: antiquewhite;
16              }
17          <!--<应用于所有的span标签>-->
18          span{
19                font-size: 100px;
20              }
22       </style>
26  </head>
27 
28  <body>
    <!--通过class引用样式-->
30  <span class="re">第2种：页面嵌入</span>
31  <span style="color:#ddddde" class="re">第2种：标签内联和页面嵌入同时存在</span>
    <!--所有id值为name的都会应用引用的样式-->
33  <span id="name" class="re">第2种：引用id值，页面嵌入</span>
35 </body>
36 </html>

2.3 引用外部CSS文件
引用外部CSS文件，即在外部已写好CSS文件，在HTML文件中直接引用CSS样式

#已写好的CSS文件，命名为common.css
1 .re{
2      color:red
3    }
4  
5 .name{
6        background-color: green;
7      }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     
 8     <!--导入CSS样式表文件-->   
 9     <link rel="stylesheet" href="common.css">
10 </head>
11 
12 <body>
13   <span class="re">第3种：引入外部CSS文件</span>
14   <span style="color:#ddddde" class="re">第3种：标签内联和引入外部CSS文件同时存在</span>  
16   <span id="name" class="re">第3种：引用id，引用外部CSS文件</span>
18 </body>

19 </html>

3 CSS中的选择器(重点)

3.1 class/id/标签选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8     
 9 <body>
10 
11       <!--定义样式-->
12       <style>
13          <!--"."表示CSS中的class选择器-->
14        .re{
15               color:red;
16             }
17          <!--#name表示id选择器，id=name的内容都会应用该样式-->
18          #name{
19              background-color: antiquewhite;
20             }
21          <!--span、p、div表示标签选择器，标签为定义的标签选择器中的内容都会应用该样式-->
22          span{
23              font-size: 100px;
24                 }
25          p{
26             color:blue
27             }
28        div{
29             color:yellow
30             }
32       </style>
33 
34 <body>
35  <div>
36      应用上面div中定义的样式
37  </div>
38  <p>
39      应用上面p中定义的样式
40  </p> 
41  <span class="re">aaa</span>
42  <span style="color:#ddddde" class="re">bbb</span>
44  <span id="name" class="re">ccc</span>
45 </body>
46 </html>

3.2 关联选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
          /*CSS中的注释符号为/**/,注意与HTML注释的区别*/
 8         /*第1种形式：container下的li标签样式*/
 9         .container li{
10               background-color: red;
11          }
12         /*第2种形式：container中的li标签中的a标签样式，这种形式下后面的都为HTML标签*/
13            .container li a{
14                background-color: green;
15            }
16         /*第3种形式：(1)先找class=container的标签;(2)再找container下class=li的标签;(3)再找li下class=b的标签*/
17            .container .li .b{
18                background-color: yellow;
19            }
20     </style>
21 
22 </head>
23 
24 <body>
25 
26 <div class="container">
27      <ul>
28           <li>关联选择器：第一种形式</li>
29           <li>
30              <a>关联选择器：第二种形式</a>
31           </li>
32           <li>
33              <a class="l">
34                 <span class="b">关联选择器：第三种形式</span>
35              </a>
36           </li>
37      </ul>
38 </div>
39 
40 </body>
41 </html>

关联选择器
空格——表示某个class或标签中的下级标签，相当于标签嵌套
例子：
#c1 div{ }—此关联选择器嵌套了id选择器和标签选择器，表示先去找id=c1的标签，然后再去id=c1下找div标签，进而应用该样式，如果没有则不会应用
.c1 #i1 a .cc1{ }—此关联选择器嵌套了class选择器、id选择器、标签选择器、class选择器，表示先去找class=c1的标签，然后再去class=c1中找id=i1

的标签，再去id=i1的标签中找a标签，再去a标签中找class=cc1的标签，进而应用该样式，如果没有则不会应用

3.3 组合选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8       .c1 #i1 b,a .cc1,.cc2{
 9           color: red;
10       }
11     </style>
12 </head>
13 
14 <body>
15   <!--上面的组合标签知识可以拆分成下面三种情况，注意逗号的作用-->
16   <!--第1种情况：.c1 #i1 b-->
17   <!--第2种情况：.c1 #i1 a .cc1-->
18   <!--第3种情况：.c1 #i1 .cc2-->
19  <div class="c1">
20      <div id="i1">
21          <!--第1种情况-->
22          <a>
23              <span class="cc1">.c1 #i1 a .cc1</span>
24          </a>
25          <br/>
26          <!--第2种情况-->
27          <b>.c1 #i1 b</b>
28          <br/>
29          <!--第3种情况-->
30          <span class="cc2">.c1 #i1 .cc2</span>
31      </div>
32  </div>
33 
34 </body>
35 </html>

3.4 属性选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         /*属性选择器，选择input标签自有的属性*/
 9        .con input[type="text"][name="username"]{
10            border: 3px solid red;
11        }
12         /*属性选择器，选择自定义属性*/
13         .con input[self_define="attr"]{
14            border: 3px solid red;
15         }
16     </style>
17     
18 </head>
19 
20 <body>
21 
22 <div class="con">
23     <input type="text" name="username">
24     <!--HTML中可以自定义属性，例如下面的self_define-->
25     <input self_define="attr" type="text" name="username" value="自定义">
26     <input type="file">
27     <input type="password">
28     <input type="text">
29     <input type="button">
30     <input type="checkbox">
31     <input type="reset">
32 </div>
33 
34 </body>
35 </html>

4 CSS中常用的属性

(1)背景颜色/背景图片/图片移动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     
 8     <style>
 9         /*此样式相当于只显示图片的部分区域，根据需要进行调整，其中height和width相当于孔的大小，
10         background-position属性表示移动图片的坐标，图片左上角坐标为(0,0)，此处的移动是移动图片，
11         即background-position的坐标为图片左上角的坐标*/
12         .c{
13             background-image: url("test.jpg");
14             height: 80px;
15             width:80px;
16             background-repeat: no-repeat;
17             background-position: -24px -130px;
18         }
19     </style>
20 </head>
21     
22 <body>
23 
24     <div style="background-color: red">
25         背景颜色
26     </div>
27     
28     <!--背景图片-->
29     <div style="background-image: url(favicon.ico);height: 80px;" >
30     </div>
31     
32     <!--div为块级标签，默认会铺满选中的区域，加上background-repeat:no-repeat表示不重复--> 
33     <div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" >
34     </div>
35     
36     <div class="c">
37 
38     </div>
39     
40 </body>
41 </html>

(2)border边框(border-top/bottom/left/right表示上下左右边框，如果只写border，则是上下左右边框)

1 <!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
2 <!--第1种：线的粗细为1像素、实线、红色，边框的高度为10px-->
3 <div style="border:1px solid red;height:10px"></div>
4 <!--分割线-->
  <div style="height: 20px"></div>
5 <!--第2种：线的粗细为1像素、点、蓝色，边框的高度为10px-->
6 <div style="border:1px dotted blue;height:10px"></div>
  <!--分割线-->
7 <div style="height: 20px"></div>
8 <!--第3种：线的粗细为1像素、虚线、紫色，边框的高度为10px-->
9 <div style="border:1px dashed purple;height:10px"></div>

10 <!--在左边设置边框，像素为3px、实线、红色-->
11 <div style="border-left:3px solid red">左边框</div>

(3)内边矩与外边距

   <!--使用内外边距时，一般先设置边框border-->
   <margin可以水平居中,即margin:0 auto；>
 1 <h2>外边距，自己本身大小不变，改变自己外部离其它标签的边距，margin-top/bottom/left/right分别表示上下左右，如果单独写成margin则表示上下左右</h2>
 2 <div style="border: 1px solid red;height: 70px;">
 3     <div style="background-color:green; height:50px; margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:20px;">
 4     </div>
 5 </div>
 6 
 7 <h2>内边距，增加自己本身的大小，padding-top/bottom/left/right分别表示上下左右，如果单独写成padding则表示上下左右</h2>
 8 <div style="border: 1px solid red;height: 90px;">
 9     <div style="background-color: green;height: 60px;padding-top: 10px;">
      </div>
10 </div>
注：padding值的设置默认为顺时针(上右下左：padding-top/right/bottom/left)，在赋值的时候也可以直接<div style="padding:10px 20px 0 30px">,即表示上右下左的值
分别为10px/20px/0/30px；当赋值形式为<div style="padding:10px 20px">，即表示上下值为10px，左右值为20px。其它类似属性也可以类推

(4)display显示属性

1 <!--display为none时，内容将被隐藏不显示-->
2 <div style="display: none;">display</div>
3 <!--display为inline时，块级标签将变为内联标签-->
4 <div style="background-color:red;display:inline">display</div>
5 <!--display为block时，内联标签将变为块级标签-->
6 <a style="background-color:red;display:block">display</a>

(5)cursor鼠标动作属性

1 <div style="cursor:pointer">停放在这里显示小手(pointer)</div>
2 <div style="cursor:help">停放在这里显示问号(help)</div>
3 <div style="cursor:wait">停放在这里显示等待(wait)</div>
4 <div style="cursor:move">停放在这里显示移动(move)</div>
5 <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

(6)浮动(float)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .w-letf{
 9             width: 20%;
10             background-color: red;
11             height: 400px;
12             float: left;
13         }
14         .w-center{
15             width: 40%;
16             background-color: green;
17             height: 400px;
18             float: left;
19         }
20         .w-right{
21             width: 20%;
22             background-color: blue;
23             height: 400px;
24             float: left;
25         }
26     </style>
27 </head>
28 
29 <body>
30 
31 <div class="w-letf"></div>
32 <div class="w-center"></div>
33 <div class="w-right"></div>
34 
35 </body>
36 </html>

float属性补充：当在float的过程中，会覆盖掉父标签的样式，一般有两种方法去掉此种影响:第1种方法是在父标签中设置高度属性；第2种方法是利用clear：both属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 
 8 </head>
 9 
10 <body>
11     <!--第1种方法：<div style="background-color: red;height: 80px">此种方法不推荐-->
12     <div style="background-color: red">
13         <div style="float:left;">1111</div>
14         <div style="float:left;">2222</div>
15     <!--第2种方法:利用style的属性clear:both-->
16         <div style="clear: both"></div>
17     </div>
18 </body>
19 </html>

(7)position位置属性

fixed属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 
 8 </head>
 9     
10 <body>
11     <!--定义页面大小-->
12     <div id="top" style="height:2000px; background-color: #ddd;">
13        <!--固定位置position为fixed，此处的固定位置是相对与浏览器而言的，不管滑动条如何拖动，“返回顶部”都固定在浏览器右下角--> 
14        <a style="position:fixed; right:30px;bottom:30px;">返回顶部</a>
15        <!--结合锚一起使用，当点击“返回顶部”时，页面定位到顶部，但“返回顶部”依然在浏览器的右下角-->
16        <a style="position:fixed; right:30px;bottom:30px;"href="#top">返回顶部</a>
17     </div>
18 </body>
19 </html>

relative和absolute属性—它们必须结合使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 
 8 </head>
 9 
10 <body>
11     <!--定义页面大小-->
12     <div id="top" style="height:2000px; background-color: #ddd;">
13         <!--此时内容“abcd”位置相对于下面定义的框固定，不管如何操作，“abcd”都固定在框的右下角-->
14         <div style="position: relative;background-color: beige;height:300px;width:300px;margin:0 auto;">
15            <h1>修改数据</h1>
16            <a style="position: absolute;right: 0px;bottom:0px">abcd</a>
17         </div>
18     </div>
19 </body>
20 </html>

position属性
   fixed——固定浏览器窗口的位置
   relative——相对位置
   absolute——绝对位置，必须结合relative一起使用，否则无任何意义(relative标签是包含absolute标签的)
   <div style="position:relative;">
      <div style="position:absolute;"></div>
   </div>

(8)overflow属性(overflow:auto当内容超过高度时,会出现滚动条；overflow:hidden当内容超过高度时,超过内容会被隐藏掉)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 
 8 </head>
 9 
10 <body>
11     <div style="overflow:auto;height:100px;background-color: red">
12         aaaaaa <br/>
13         aaaaaa <br/>
14         aaaaaa <br/>
15         aaaaaa <br/>
16         aaaaaa <br/>
17         aaaaaa <br/>
18         aaaaaa <br/>
20     </div>
21 </body>
22 </html>

(9)body属性(1个页面只有1个body标签)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         /*页面居中，消除页面默认的属性，也可以body标签中设置：<body style="margin:0 auto;"></body>*/
 9          body{
10              margin:0 auto;
11          }
12     </style>
13 
14 </head>
15 
16 <body>
17     <div style="height:100px;background-color: red">
18 
19     </div>
20 </body>
21 </html>

(10)透明度

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对IE8以及更早的版本 */
}
IE9/Firefox/Chrome/Opera/Safari使用属性opacity来设定透明度。opacity属性能够设置的值从0.0到1.0。值越小，越透明。
IE8以及更早的版本使用滤镜 filter:alpha(opacity=x)。x能够取的值从0到100。值越小，越透明。

(11)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   测试文本
 9   <input type="button" value="提交数据"/>
10   <div style="height:2000px"></div>
11 
12   <!--设置div标签，位置为固定，占据整个屏幕(上下左右皆为0，设置透明度为0.1，
13   这样看见底层的标签"测试文本")-->
14   <div style="z-index:1;position:fixed;top:0;right:0;bottom:0;left:0;
15      background-color:black;opacity:0.2;"></div>
16 
17   <div style="z-index:2;position:fixed;left:50%;top:50%;margin-left:-140px;
18   margin-top:-120px;">
19       <!--设置正在加载的图片-->
20       <img src="123.gif">
21       <!--设置编辑框，即模态对话框-->
22       <input />
23       <input />
24       <input />
25       <input />
26   </div>
27 </body>
28 </html>

(12)简单的页面布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         body{
 9             margin:0 auto;
10         }
11 
12         .pg-header{
13             height: 48px;
14             background-color: blue;
15         }
16 
17         .pg-body .menu{
18             background-color: red;
19             position: absolute;
20             top:50px;
21             left: 0;
22             bottom: 0;
23             width: 200px;
24             overflow: auto;
25         }
26 
27         .pg-body .content{
28             background-color: aqua;
29             position: absolute;
30             top:50px;
31             left: 210px;
32             bottom: 0px;
33             right: 0px;
34             overflow: auto;
35         }
36     </style>
37 </head>
38 <body>
39   <div class="pg-header"></div>
40   <div class="pg-body">
41       <div class="menu">
42           <a>目录1</a> <br/>
43       </div>
44       <div class="content">
45           内容
46           <div style="height:500px">
47               <h1 style="color:red">标题1</h1>
48           </div>
49       </div>
50   </div>
51 </body>
52 </html>

参考资料：

http://www.cnblogs.com/luotianshuai/p/5167944.html

http://www.cnblogs.com/yangyinghua/p/5159156.html

posted on 2016-01-31 17:24 人生苦短，python当歌阅读(307) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

web前端基础——初识CSS

1 CSS概要

2 CSS的三种存在形式

3 CSS中的选择器(重点)

4 CSS中常用的属性

公告