CSS是Cascading Style Sheets的缩写，即层叠样式表，它用于表现HTML的样式，即HTML只是去写该网页有哪些内容，至于如何去表现它们，由CSS去定制。

*************时代的呼唤*************

1.在之前，我们直接把网页的格式写到HTML中去，这样会造成格式的混乱，而且难以阅读和修改，不过这不是最大的问题，最大的问题在于我们想给网页换一个表达样式的时候，需要修改的地方不仅很多关键是非常零散，需要花费很大的力气去定位这些样式。

2.于是，把网页内容与其表现形式相分离的想法就出现了，CSS能够实现对网页中的对象的精确控制，而且支持几乎所有的字体字号样式，还拥有对网页对象和模型样式进行编辑的能力，并且能够进行一定的交互设计，因此功能还是比较强大的。

3.CSS的可读性也很强，稍微熟悉一点英语的，也能够很轻松的读懂CSS代码所要表述的意思，并且取修改它的样式。

***********CSS的历史*************

1.1996年12月17日，CSS1发布，1999年，此推荐被修订。

2.1999年1月1日，CSS2发布，并且增加了对媒介和一些字体的支持。

3.2001年5月23日，CSS3发布，但是只是一项草案，并没有成为W3C的推荐标准，W3C的推荐标准还是1998年5月12日退出的CSS2.

**************CSS快速入门*************

1.CSS的入门比HTML并不高多少，也是一句话入门，剩下的就是实战了。

2.CSS的语法如下：

选择器{ 声明1；声明2；声明3；.....声明N}

3.这里的声明是以 “属性:值”的形式，而且多个声明之间用分号进行分割，即C语言的语句分隔符。

4.这里的属性是我们希望设置的样式属性，至于具体的属性，我们后面会说。

5.先看一个例子：

h1 {color:red; font-size:14px;}

这里的h1就是选择器，当然这里我们直接用标签当做选择器了，后面的color属性取值为red，而后面的font-size属性取值为14个像素。

6.其中color：red就可以理解为一个声明。

7.我们的CSS由多个这样的规则组成。

*************示例*************

1.我们先写一个HTML文件，取名为”xin.html“，内容如下：

<html>

<head>

    <title>2014年辛星CSS教学夏季版</title>

    <link rel="stylesheet" type="text/css" href="my.css">

</head>

<body>

    <p>辛星CSS，期待您的关注，分享知识，传递温情</p>

</body>

</html>

2.可以从第四行代码看出，它导入了一个my.css文件，然后我们在同一目录下新建一个my.css文件，书写内容如下：

p{color: green;font-size: 14px;text-align: center;}

3.我们都保存完毕之后，就可以双击打开my.html文件，发现文字都在中间并且是绿色的。

4.至此，我们大致理解了css的工作机理，下面我们开始深入css的细节处开始学习。

*************小结**************

1.我们理解了CSS的由来，以及我们演示了CSS的语法。

2.然后我们通过一个小型的例子，演示了CSS的大致使用方式。

2014年度辛星css教程夏季版第一节的更多相关文章

  1. 2014年度辛星css教程夏季版第二节

    第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...

  2. 2014年度辛星html教程夏季版第一节

    从今天起开始在博客园开启自己的html教程啦,先从第一节开始把,首先推荐一个网站,就是http:/www.w3cschool.cc,这是一个公开的教学网站,但是它有一个问题,那就是虽然很全面,但是不是 ...

  3. 2014年度辛星css教程夏季版第六节

    这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...

  4. 2014年度辛星css教程夏季版第五节

    本小节我们讲解css中的”盒模型“,即”box model“,它通常用于在布局的时候使用,这个”盒模型“也有人成为”框模型“,其实原理都一样,它的大致原理是这样的,它把一个HTML元素分为了这么几个部 ...

  5. 2014年度辛星css教程夏季版第四节

    接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了css之后再完善它. ************** ...

  6. 2014年度辛星css教程夏季版第三节

    第二节我们讲述的几乎全是CSS的选择器,那么下面这一节我们来讲一下CSS的颜色和文本的一些东西,虽然我对调色不大敏感,但是对于颜色还是比较感兴趣的. *********CSS中的颜色********* ...

  7. 2014年度辛星css教程夏季版第七节

    本小节我们研究浮动的问题,浮动使得布局更加灵活,虽然我们前面也有关于布局的讲解,但是它们提供的内容还是太有限了,要想获得更强大的布局,还必须使用浮动才能完成更灵活的布局. ***********浮动* ...

  8. 2014年度辛星html教程夏季版第二节

    上面一节中我们介绍了HTML文件的书写和几个标签,接下来我们来认识几个其他的标签,这里我们主要介绍一下head标签和文本标签. ***************head标签*************** ...

  9. 2014年度辛星html教程夏季版第八节

    经过前面七节的学习,我感觉大家的HTML的功底也差不多了,而且我特别的删去了某些东西,比如框架,如果回到几年前,那么框架是非常流行的,但是现在都到了2014年了,这些东西早就该被遗忘了,因此,我果断的 ...

随机推荐

  1. CSS_样式sample

    <!DOCTYPE HTML> <html> <head> <title>div浮动</title> <style type=&quo ...

  2. 【转】频点CTO张成：基于Cocos2d的MMORPG开发经验

    http://www.9ria.com/plus/view.php?aid=27698 作者: zhiyuanzhe3 发表时间: 2013-06-29 17:46 6月29日,由9Tech社区.51 ...

  3. 16% off MPPS V16 ECU tuning tool for EDC15 EDC16 EDC17

    EOBD2.FR is offering 16% discount off the latest MPPS V16 ECU chip tuning tool. The device is now so ...

  4. 学习jQuery后的部分总结

    1.remove和empty <div id="div1"> <ul id="ul1"> <li>嘿嘿</li> ...

  5. C# for AUTOCAD ActiveX获取图形对象坐标程序

    C# for AUTOCAD ActiveX获取图形对象坐标程序 using System;using System.Collections.Generic;using System.Componen ...

  6. jvm内存模型及分配参数

    jvm内存模型 程序计数器:是一块很小的内存空间.当线程数量超过cpu数量时,线程之间根据时间片轮询抢夺cpu资源.每一个线程都必须用一个独立的程序计数器,用于记录下一条要运行的指令. java虚拟机 ...

  7. Linux清空内存缓存

    > /proc/sys/vm/drop_caches

  8. Hive over HBase和Hive over HDFS性能比较分析

    http://superlxw1234.iteye.com/blog/2008274 环境配置: hadoop-2.0.0-cdh4.3.0 (4 nodes, 24G mem/node) hbase ...

  9. scala学习笔记：各种奇怪的写法

    Unit函数的定义: def foo()={println("hi")} 等号可以省略: def foo(){println("hi")} update方法: ...

  10. c++和c#之间的类型转换

    //C#调用C++的DLL搜集整理的所有数据类型转换方式,可能会有重复或者多种方案,自己多测试        //c++:HANDLE(void   *)          ----    c#:Sy ...