css高级教程第一章笔记

 

大年30，今天刚刚看完第一章，上传上来一些笔记。

一、css:能够将文档的表现部分与内容分开

二、id:是惟一的，id能够用来标识持久的结构性元素，如：主导航和内容区域，id还能够用来表示一次性元素。连接的表单
三、class:适合标识内容的类型或类似的条目。
四、多类症的问题：不要过分的依赖的类

五、div:
 1、添加结构的一个元素是div元素
 2、div实际上表明部分、将文档分割为有意义的区域的方法
 3、经过将主要内容区域包围在div中并分配id就能够在文档中添加结构和意义。
-----------------------万恶的分割线-------------------------------------

1.1.2  文档类型、doctype切换和浏览器模式

DTD(文档类型定义)

IME type的缩写为(Multipurpose Internet Mail Extensions)表明互联网媒体类型(Internet media type)，MIME使用一个简单的字符串组成，最初是为了标识邮件Email附件的类型，在html文件中可使用content-type属性表示，描述了文件类型的互联网标准。MIME类型能包含视频、图像、文本、音频、应用程序等数据。

浏览器模式

标准模式和怪异模式

doctype切换
 1、xhtml文档包含形式完整的doctype-----------------标准模式表现。
 2、严格DTD的doctype  -------------标准模式表现。
 3、过渡的DTD和url ----------标准模式表现。
 4、过渡的DTD没有url ----------怪异模式表现。
 5、doctype不存在和形式不正确 ----------------怪异模式表现

doctype 是否存在的选择是方法的效果被称为doctype切换

doctype切换是浏览器用来区分遗留文档和符合标准的文档的手段

选择了错误的DOCTYPE，页面就一怪异模式表现，会出现不少不可估量的错误

每一个页面的都要的包含形式完整的doctype声明，而且要选择严格的DTD

-----------------------可恶的风格线---------------------------------
1.2  为样式找到目标

 类型选择器-----用来寻找特色类型的元素（标签）也称为（元素选择器）
 后代选择器-----用来寻找特色元素和元素组的后代，

#mainContent h1 {font-size:1.8em;}
这段代码有

类型选择（元素选择器） id选择器 后代选择器

注意事项：
发现文档中添加了许多没用的类，那么可能就是文档结构不合理的一个警告，必定要记住分析元素之间的差别，经常会发现差别是他们在页面上出现的位置，谨记不要给元素指定不一样类，而是将一个类或id应用透明的祖先，而后使用后代选择器定位他们

*伪类选择器
文档结构以外的其余条件对元素应用样式，就可使用伪类选择器

:link 和visited称为连接伪类--------------只能应用于锚元素
：hover、:active、:focus称为动态伪类--------能够用于任何元素

通用选择器

高级选择器（有兼容性问题）
 一、子选择器
  只选择元素的直接后代，叫子元素
  特色：只会在选择的子类上应用样式，其余的子类不会有任何样式
   #nav li {只会对li产生样式};
  例子：demo(子类选择器).html
 2.通用选择器（兼容的ie6和更低的版本）
  可使用通用选择器模拟子选择器的效果，
  具体的步骤:
   1、先在全部后代上应用你但愿的子元素具备的样式
   2、使用通用选择器覆盖子元素的后代上的样式
   #nav li *{background:url(12.png)no-repeat left top;}

 3.一个元素与另外一个元素的相邻关系对它应用样式。相邻选择器可用于定位同一个父元素下某个元素以后的元素   

 h1 + p {

 }

 

 属性选择器

  能够根据某个属性是否存在或属性的值来寻找元素
  一些属性能够有多个值，值之间用空格分隔，属性选择器容许更具属性值之一来寻找元素
  a[rel~='friend']{
   background-image:url(12.png);
  }

  <a href="www.baidu.com" rel="friend met colleague">xxxxx</a>

  样式表中使用特殊性（--------有问题--------）