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标签中直接写入属性和属性值

  <div style="color:red;">

      第1种：标签内联

  </div>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

       <!--定义样式-->

       <style>

           .re{

                color:red;

              }

         #name{

                background-color: antiquewhite;

              }

          <!--<应用于所有的span标签>-->

          span{

                font-size: 100px;

              }

       </style>

  </head>

  <body>
    <!--通过class引用样式-->

  <span class="re">第2种：页面嵌入</span>

  <span style="color:#ddddde" class="re">第2种：标签内联和页面嵌入同时存在</span>
    <!--所有id值为name的都会应用引用的样式-->

  <span id="name" class="re">第2种：引用id值，页面嵌入</span>

 </body>

 </html>

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

#已写好的CSS文件，命名为common.css
1 .re{

      color:red

    }

 .name{

        background-color: green;

      }

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <!--导入CSS样式表文件-->

     <link rel="stylesheet" href="common.css">

 </head>

 <body>

   <span class="re">第3种：引入外部CSS文件</span>

   <span style="color:#ddddde" class="re">第3种：标签内联和引入外部CSS文件同时存在</span>

   <span id="name" class="re">第3种：引用id，引用外部CSS文件</span>

 </body>

 </html>

3 CSS中的选择器(重点)

3.1 class/id/标签选择器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

       <!--定义样式-->

       <style>

          <!--"."表示CSS中的class选择器-->

        .re{

               color:red;

             }

          <!--#name表示id选择器，id=name的内容都会应用该样式-->

          #name{

              background-color: antiquewhite;

             }

          <!--span、p、div表示标签选择器，标签为定义的标签选择器中的内容都会应用该样式-->

          span{

              font-size: 100px;

                 }

          p{

             color:blue

             }

        div{

             color:yellow

             }

       </style>

 <body>

  <div>

      应用上面div中定义的样式

  </div>

  <p>

      应用上面p中定义的样式

  </p>

  <span class="re">aaa</span>

  <span style="color:#ddddde" class="re">bbb</span>

  <span id="name" class="re">ccc</span>

 </body>

 </html>

3.2 关联选择器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>
          /*CSS中的注释符号为/**/,注意与HTML注释的区别*/

         /*第1种形式：container下的li标签样式*/

         .container li{

               background-color: red;

          }

         /*第2种形式：container中的li标签中的a标签样式，这种形式下后面的都为HTML标签*/

            .container li a{

                background-color: green;

            }

         /*第3种形式：(1)先找class=container的标签;(2)再找container下class=li的标签;(3)再找li下class=b的标签*/

            .container .li .b{

                background-color: yellow;

            }

     </style>

 </head>

 <body>

 <div class="container">

      <ul>

           <li>关联选择器：第一种形式</li>

           <li>

              <a>关联选择器：第二种形式</a>

           </li>

           <li>

              <a class="l">

                 <span class="b">关联选择器：第三种形式</span>

              </a>

           </li>

      </ul>

 </div>

 </body>

 </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 组合选择器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

       .c1 #i1 b,a .cc1,.cc2{

           color: red;

       }

     </style>

 </head>

 <body>

   <!--上面的组合标签知识可以拆分成下面三种情况，注意逗号的作用-->

   <!--第1种情况：.c1 #i1 b-->

   <!--第2种情况：.c1 #i1 a .cc1-->

   <!--第3种情况：.c1 #i1 .cc2-->

  <div class="c1">

      <div id="i1">

          <!--第1种情况-->

          <a>

              <span class="cc1">.c1 #i1 a .cc1</span>

          </a>

          <br/>

          <!--第2种情况-->

          <b>.c1 #i1 b</b>

          <br/>

          <!--第3种情况-->

          <span class="cc2">.c1 #i1 .cc2</span>

      </div>

  </div>

 </body>

 </html>

3.4 属性选择器

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         /*属性选择器，选择input标签自有的属性*/

        .con input[type="text"][name="username"]{

            border: 3px solid red;

        }

         /*属性选择器，选择自定义属性*/

         .con input[self_define="attr"]{

            border: 3px solid red;

         }

     </style>

 </head>

 <body>

 <div class="con">

     <input type="text" name="username">

     <!--HTML中可以自定义属性，例如下面的self_define-->

     <input self_define="attr" type="text" name="username" value="自定义">

     <input type="file">

     <input type="password">

     <input type="text">

     <input type="button">

     <input type="checkbox">

     <input type="reset">

 </div>

 </body>

 </html>

4 CSS中常用的属性

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         /*此样式相当于只显示图片的部分区域，根据需要进行调整，其中height和width相当于孔的大小，

         background-position属性表示移动图片的坐标，图片左上角坐标为(0,0)，此处的移动是移动图片，

         即background-position的坐标为图片左上角的坐标*/

         .c{

             background-image: url("test.jpg");

             height: 80px;

             width:80px;

             background-repeat: no-repeat;

             background-position: -24px -130px;

         }

     </style>

 </head>

 <body>

     <div style="background-color: red">

         背景颜色

     </div>

     <!--背景图片-->

     <div style="background-image: url(favicon.ico);height: 80px;" >

     </div>

     <!--div为块级标签，默认会铺满选中的区域，加上background-repeat:no-repeat表示不重复-->

     <div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" >

     </div>

     <div class="c">

     </div>

 </body>

 </html>

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

 <!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->

 <!--第1种：线的粗细为1像素、实线、红色，边框的高度为10px-->

 <div style="border:1px solid red;height:10px"></div>

 <!--分割线-->
  <div style="height: 20px"></div>

 <!--第2种：线的粗细为1像素、点、蓝色，边框的高度为10px-->

 <div style="border:1px dotted blue;height:10px"></div>
  <!--分割线-->

 <div style="height: 20px"></div>

 <!--第3种：线的粗细为1像素、虚线、紫色，边框的高度为10px-->

 <div style="border:1px dashed purple;height:10px"></div>

 <!--在左边设置边框，像素为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>

 <div style="border: 1px solid red;height: 70px;">

     <div style="background-color:green; height:50px; margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:20px;">

     </div>

 </div>

 <h2>内边距，增加自己本身的大小，padding-top/bottom/left/right分别表示上下左右，如果单独写成padding则表示上下左右</h2>

 <div style="border: 1px solid red;height: 90px;">

     <div style="background-color: green;height: 60px;padding-top: 10px;">
      </div>

 </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显示属性

 <!--display为none时，内容将被隐藏不显示-->

 <div style="display: none;">display</div>

 <!--display为inline时，块级标签将变为内联标签-->

 <div style="background-color:red;display:inline">display</div>

 <!--display为block时，内联标签将变为块级标签-->

 <a style="background-color:red;display:block">display</a>

(5)cursor鼠标动作属性

 <div style="cursor:pointer">停放在这里显示小手(pointer)</div>

 <div style="cursor:help">停放在这里显示问号(help)</div>

 <div style="cursor:wait">停放在这里显示等待(wait)</div>

 <div style="cursor:move">停放在这里显示移动(move)</div>

 <div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

(6)浮动(float)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .w-letf{

             width: 20%;

             background-color: red;

             height: 400px;

             float: left;

         }

         .w-center{

             width: 40%;

             background-color: green;

             height: 400px;

             float: left;

         }

         .w-right{

             width: 20%;

             background-color: blue;

             height: 400px;

             float: left;

         }

     </style>

 </head>

 <body>

 <div class="w-letf"></div>

 <div class="w-center"></div>

 <div class="w-right"></div>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <!--第1种方法：<div style="background-color: red;height: 80px">此种方法不推荐-->

     <div style="background-color: red">

         <div style="float:left;">1111</div>

         <div style="float:left;">2222</div>

     <!--第2种方法:利用style的属性clear:both-->

         <div style="clear: both"></div>

     </div>

 </body>

 </html>

(7)position位置属性

fixed属性

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <!--定义页面大小-->

     <div id="top" style="height:2000px; background-color: #ddd;">

        <!--固定位置position为fixed，此处的固定位置是相对与浏览器而言的，不管滑动条如何拖动，“返回顶部”都固定在浏览器右下角-->

        <a style="position:fixed; right:30px;bottom:30px;">返回顶部</a>

        <!--结合锚一起使用，当点击“返回顶部”时，页面定位到顶部，但“返回顶部”依然在浏览器的右下角-->

        <a style="position:fixed; right:30px;bottom:30px;"href="#top">返回顶部</a>

     </div>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <!--定义页面大小-->

     <div id="top" style="height:2000px; background-color: #ddd;">

         <!--此时内容“abcd”位置相对于下面定义的框固定，不管如何操作，“abcd”都固定在框的右下角-->

         <div style="position: relative;background-color: beige;height:300px;width:300px;margin:0 auto;">

            <h1>修改数据</h1>

            <a style="position: absolute;right: 0px;bottom:0px">abcd</a>

         </div>

     </div>

 </body>

 </html>

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

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div style="overflow:auto;height:100px;background-color: red">

         aaaaaa <br/>

         aaaaaa <br/>

         aaaaaa <br/>

         aaaaaa <br/>

         aaaaaa <br/>

         aaaaaa <br/>

         aaaaaa <br/>

     </div>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         /*页面居中，消除页面默认的属性，也可以body标签中设置：<body style="margin:0 auto;"></body>*/

          body{

              margin:0 auto;

          }

     </style>

 </head>

 <body>

     <div style="height:100px;background-color: red">

     </div>

 </body>

 </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(标签的分层处理)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

   测试文本

   <input type="button" value="提交数据"/>

   <div style="height:2000px"></div>

   <!--设置div标签，位置为固定，占据整个屏幕(上下左右皆为0，设置透明度为0.1，

   这样看见底层的标签"测试文本")-->

   <div style="z-index:1;position:fixed;top:0;right:0;bottom:0;left:0;

      background-color:black;opacity:0.2;"></div>

   <div style="z-index:2;position:fixed;left:50%;top:50%;margin-left:-140px;

   margin-top:-120px;">

       <!--设置正在加载的图片-->

       <img src="123.gif">

       <!--设置编辑框，即模态对话框-->

       <input />

       <input />

       <input />

       <input />

   </div>

 </body>

 </html>

(12)简单的页面布局

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body{

             margin:0 auto;

         }

         .pg-header{

             height: 48px;

             background-color: blue;

         }

         .pg-body .menu{

             background-color: red;

             position: absolute;

             top:50px;

             left: 0;

             bottom: 0;

             width: 200px;

             overflow: auto;

         }

         .pg-body .content{

             background-color: aqua;

             position: absolute;

             top:50px;

             left: 210px;

             bottom: 0px;

             right: 0px;

             overflow: auto;

         }

     </style>

 </head>

 <body>

   <div class="pg-header"></div>

   <div class="pg-body">

       <div class="menu">

           <a>目录1</a> <br/>

       </div>

       <div class="content">

           内容

           <div style="height:500px">

               <h1 style="color:red">标题1</h1>

           </div>

       </div>

   </div>

 </body>

 </html>

参考资料：

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

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

web前端基础——初识CSS的更多相关文章

Web前端基础(4):CSS(一)
1. CSS介绍现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
Web前端基础(5):CSS(二)
1. 盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
web前端基础——初识HTML
1 HTML概念 HTML(Hypertext Markup Language)即超文本标记语言,是网页的描述语言.它其实是一种描述网页的标准,它通过给需要描述的内容加上标签,浏览器按照HTML语言的 ...
web前端基础——初识HTML DOM编程
1 HTML DOM编程概述文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口.由于HTML文档被浏览器解析后就是一棵DOM树,要改 ...
web前端基础——初识JavaScript
1 JavaScript概述 JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚 ...
前端基础 & 初识CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.l 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法每个CS ...
Web前端基础(6):CSS(三)
1. 定位定位有三种:相对定位.绝对定位.固定定位 1.1 相对定位现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别. 2.设置相对定位之后,我们才可以使用四个方向的 ...
进击的Python【第十三章】：Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式一.web框架的本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

随机推荐

IOS 开发之 -- 获取本机通讯录里面所有的联系人，并传到后台
项目中遇到一个需求,就是需要在入口的时候,获取通讯录的权限,并把所有的联系人,以接口参数的形式传到后台,通过网上查资料,历时3个小时,终于完成, 话不多,直接上代码: 1,导入系统库 #import ...
Android 解决手机unauthorized错误
转自:http://blog.csdn.net/quicksand201/article/details/19190821 手机开发者选项中USB调试已经打开,在电脑命令行下输入adb devices ...
wap开发体会<转载>
前二天因工作需要,上头要求做一个wap版的网站,到网上学习了一天,弄了个beta版出来(http://wap.luckty.com 功能很一般),整理几点经验如下: 1.wap网站用的是wml标识,非 ...
python练习题集合-1
author:headsen chen date : 2018-05-31 17:59:04 notice:本文素材来自于:<< 笨方法学python >> 这本书,由本人 ...
【BZOJ2905】背单词 fail树+DFS序+线段树
[BZOJ2905]背单词 Description 给定一张包含N个单词的表,每个单词有个价值W.要求从中选出一个子序列使得其中的每个单词是后一个单词的子串,最大化子序列中W的和. Input 第一行 ...
算法分析中最常用的几种排序算法（插入排序、希尔排序、冒泡排序、选择排序、快速排序，归并排序）C 语言版
每次开始动手写算法,都是先把插入排序,冒泡排序写一遍,十次有九次是重复的,所以这次下定决心,将所有常规的排序算法写了一遍,以便日后熟悉. 以下代码总用一个main函数和一个自定义的CommonFunc ...
160505、oracle 修改字符集修改为ZHS16GBK
修改oracle字符集方法/步骤 oracle数据库的字符集更改 A.oracle server 端字符集查询 select userenv('language') from dual 其中N ...
OSharp DbContent初始化分析
DBContent初始化 —— 关联Entity查找一. 关联到具体的Entity 二. 通过EntityTypeConfiguration 关联到DbContent 三. ...
Storm-源码分析- metric
首先定义一系列metric相关的interface, IMetric, IReducer, ICombiner (backtype.storm.metric.api) 在task中, 创建一系列bui ...
react 将字符串解析为markdown
react 中有许多组件支持把字符串转化为markdown,并以html的形式展示出来.这里我试用了 react-markdown 和 hyperdown 两个库,发现hyperdown比较好,因为r ...