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. QSqlQueryModel的实例操作

    QSqlQueryModel类为SQL的结果集提供了一个只读的数据模型,下面我们先利用这个类进行一个最简单的操作. 我们新建Qt4 Gui Application工程,我这里工程名为queryMode ...

  2. php动态调用方法_sux

    <form  action=""> <input type="hidden" name="mod" id="mo ...

  3. js中一些容易混淆的方法

    JavaScript中有一些名字十分冗长的函数名称,导致使用时会混乱,特此整理一番,加深印象. ①Object.getOwnPropertyDescriptor     --读取某个对象特定属性的属性 ...

  4. ios知识点

    在controller中加载plist数据 1,设置属性NSArray 或可变数组NSMutableArray @property(nonatomic,strong)NSArray *message; ...

  5. 深入理解计算机系统第二版习题解答CSAPP 2.12

    对于下面的值,写出变量x的C语言表达式.代码应该对任何字长w≥8都能工作.我们给出当x=0x87654321以及w=32时表达式的结果,仅供参考. A.x的最低有效字节,其他位均为0.[0x00000 ...

  6. [转载]GDB十分钟教程

    转自:http://blog.csdn.net/liigo/article/details/582231/ GDB十分钟教程 作者: liigo原文链接: http://blog.csdn.net/l ...

  7. mysql数据库常用语句

    关于mysql数据库常用命令的整理: 一:对于数据库的操作 show databases;显示当前用户下所有的数据库名称 use database_name;进入当前数据库 create databa ...

  8. 我、实战nginx+naxsi(WAF)之一

    差不多,一个星期多的时间都过去了.但是还是感觉时间过的太快,总是不禁的让人长叹一声,关于nginx和(naxsi)WAF这个问题,也算是只走出了第一步,在遇到了各种乱七八糟的错误之后总算是想要静下心来 ...

  9. 焦点轮播图——myfocus焦点图库

    网站网址: http://demo.jb51.net/js/myfocus/demo.html 简单3步,你即可以用上myFocus. Step 1. 在html的标签内引入相关文件 <scri ...

  10. tcl/tk

    http://blog.csdn.net/dulixin/article/category/365058 http://blog.csdn.net/dulixin/article/category/3 ...