仔细学习CSS（一）

推荐编辑器：Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE)；

Style Master, Dreamweaver or GoLive

For HTML and CSS, we want simple, plain text files.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
DOCTYPE means DOCument TYPE
Between <head> and </head> there is room for various kinds of information that is not shown on screen.
<body>里的就是用来显示的了~

'2em' means 2 times the size of the current font.

什么是CSS及使用的好处：

cascading Style Sheet：层叠样式表

控制网页样式、能将样式信息与网页内容分离的、一种标记性语言。

不需要编译，由浏览器执行。为浏览器解释型语言。

作用于：页面布局、字体、颜色、背景、特效等。

 

相关组织和历史：

1994提出、1996年浏览器支持、W3C（world wide web consortium）的CSS组。

1996、CSS1；

1998、CSS2；目前是CSS2.1；

CSS3 已经开始应用了~

 

可用于多种设备：手机、电视、打印机、幻灯片等。

 

比传统HTML的优势（内容老啦，可忽视）：控制、排版（对应：html的标记）；

　　提高网页浏览速度：table全加载完显示？css加载点显示点？

　　可维护性、易维护性、SEO等。

 

CSS基本语法：

　　a{font-size:12px;font-family:"Microsoft Yahei";display:inline-block;}　

　　.last{}/*类选择符*/

　　#last{}　/*ID选择符，局限性很大。我个人不喜欢在html结构中使用id。*/

　　H1, H2, H3 { font-style: bold }/*合并多个selector*/

 

　　CSS1 定义了50种。　　CSS2 在CSS1的基础上增加了70种，定义了大概120种属性。

 

HTML里使用CSS的方式，一般四种：

1. 直接写在标签里。

<span style="display:block;height:20px;">我不喜欢这样写。不建议。</span>

2. 在header头里加一段css代码。

<style type="text/css">/*MIME类型，浏览器不支持CSS，则会过滤掉。一般不建议。*/

　　li{list-style-type:none;}　

</style>

3. 在header头引入一个css文件。一般都用这种方式。

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

4. @import 引入。

 

浏览器和CSS：

　　兼容性问题；

　　是否支持CSS。<style type="text/css"></style>（现在）| <!--注释-->（过去）

　　<style type="text/css"></style> 告知浏览器引入文件的类型，支持也读文件，不支持忽视之。

 

树结构与继承:

　　子节点通用样式可以放在父节点写，（代码重构）样式预设；

　　也增加了可读性。（书写规范）

重写：

　　能够重写是因为：更具有指向性。更具体。

　　　　　　　　　　与顺序无关！？

不是所有的属性都可继承！

　　比方说：background...

　　你在body上写个background，再看它的子节点，你会发现。。

　　why？

　　　　There are two reasons: first, transparent backgrounds are faster to display (there is nothing to display!) than other ­backgrounds.

　　　　元素背景默认为 transparent。

　　　　Second, since background images are aligned relative to the element they belong to, you would otherwise not always end up with a smooth background surface.

　　Tips：如果background 属性存在时，记得增设一个 color 值。确保文字和背景不一致~？

 

问题：需要研究下CSS的继承性~对于每个属性的继承性~

posted on 2014-11-12 17:02  hanyuxinting  阅读(148)  评论(0)  编辑  收藏  举报

导航