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. Routing and controllers

    Routing and controllers We will build a very simple inventory system to display our album collection ...

  2. javascript笔记02：严格模式的特定要求

    1.严格模式变量必须声明,不然会报错: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. c++内联函数与静态函数

    不能是虚函数的成员函数有:静态成员函数,内联成员函数,构造函数.没有什么函数需要硬性规定为虚函数,一般析构函数会被定义为虚函数其他就是在继承类中可能需要override的类成员函数应该定义为虚函数 h ...

  4. How to center a div in bootstrap3

    There are two approaches to centering a column <div> in Bootstrap 3: Approach 1 (offsets): The ...

  5. 用指令修改DOM

    对于HTML5,input元素有autofocus这个属性,用户在第一次进入界面时就可以和用户交互,对于浏览器来说,可以 把键盘焦点定位在某个元素上,但是对于非input元素,则不可以,我们可以使用指 ...

  6. java基础学习总结四(控制语句<顺序、选择、循环>、方法)

    一:结构控制语句 结构控制语句分为3种,顺序语句.选择语句.循环语句. 1:顺序语句 就是自上而下的执行程序,默认执行顺序. 2:选择语句 if结构语句:如果满足条件,则执行该语句. if...els ...

  7. 关于新feature对应的增加一个新的测试单子(QA)和文档单子(Doucmentation)的步骤

    一,增加一个new feature的文档单子. 1.new feature 增加对应的文档单子(公司有一个组是专门写产品说明的)所以增加一个新的功能就要有这个新的功能对应的一个文档(Documenta ...

  8. JVM优化

    1.堆大小设置 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64 ...

  9. Java 线程的状态

    Java Thread的运行周期中, 有几种状态, 在 java.lang.Thread.State 中有详细定义和说明: NEW 状态是指线程刚创建, 尚未启动 RUNNABLE 状态是线程正在正常 ...

  10. [记录] js判断数组key是否存在

    数组中判断key是否存在 可以通过arrayObject.hasOwnProperty(key)来进行判断数组key是否存在,返回的是boolean值,如果存在就返回true,不存在就返回false ...