仔细学习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的继承性~对于每个属性的继承性~

原文地址:https://www.cnblogs.com/hanyuxinting/p/4092722.html