文档章节

css高级教程第一章笔记

Q_z
 Q_z
发布于 2014/01/30 20:59
字数 1095
阅读 246
收藏 19

 

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

1、css:可以将文档的表现部分与内容分开

2、id:是唯一的,id可以用来标识持久的结构性元素,如:主导航和内容区域,id还可以用来表示一次性元素。链接的表单
3、class:适合标识内容的类型或相似的条目。
4、多类症的问题:不要过度的依赖的类

5、div:
 一、添加结构的一个元素是div元素
 二、div实际上代表部分、将文档分割为有意义的区域的方法
 三、通过将主要内容区域包围在div中并分配id就可以在文档中添加结构和意义。
-----------------------万恶的分割线-------------------------------------

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

DTD(文档类型定义)


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

浏览器模式

标准模式和怪异模式


doctype切换
 一、xhtml文档包含形式完整的doctype-----------------标准模式表现。
 二、严格DTD的doctype  -------------标准模式表现。
 三、过渡的DTD和url ----------标准模式表现。
 四、过渡的DTD没有url ----------怪异模式表现。
 五、doctype不存在和形式不正确 ----------------怪异模式表现

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

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

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


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

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


 类型选择器-----用来寻找特点类型的元素(标签)也称为(元素选择器)
 后代选择器-----用来寻找特点元素和元素组的后代,


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

类型选择(元素选择器) id选择器 后代选择器

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

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

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

通用选择器


高级选择器(有兼容性问题)
 1、子选择器
  只选择元素的直接后代,叫子元素
  特点:只会在选择的子类上应用样式,其他的子类不会有任何样式
   #nav li {只会对li产生样式};
  例子:demo(子类选择器).html
 2.通用选择器(兼容的ie6和更低的版本)
  可以使用通用选择器模拟子选择器的效果,
  具体的步骤:
   一、先在所有后代上应用你希望的子元素具有的样式
   二、使用通用选择器覆盖子元素的后代上的样式
   #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>


  样式表中使用特殊性(--------有问题--------)

© 著作权归作者所有

共有 人打赏支持
Q_z

Q_z

粉丝 18
博文 17
码字总数 14466
作品 0
成都
程序员
knockout2.0系列教程汇总

本文档对knockout2.x的基本使用方法做了讲解,虽然不是十分全面,但也几乎涵盖了knockout2.x的知识(除了高级用法、自定义绑定) 高级应用 分享到:

zuolz1985
2013/05/11
0
0
哪里可以找到 Kali Linux 的教程?

Kali Linux 秘籍 原书:Kali Linux Cookbook 译者:飞龙 在线阅读 PDF格式 EPUB格式 MOBI格式 Github Git@OSC 目录: 第一章 安装和启动Kali 第二章 定制 Kali Linux 第三章 高级测试环境 第...

wizardforcel0
07/02
0
0
总有你要的编程书单(GitHub )

目录 IDE IntelliJ IDEA 简体中文专题教程 MySQL 21分钟MySQL入门教程 MySQL索引背后的数据结构及算法原理 NoSQL Disque 使用教程 Neo4j .rb 中文資源 Redis 命令参考 Redis 设计与实现 The ...

汇智网
2017/11/22
0
0
free-programming-books-zh.md

语言无关MySQL NoSQL PostgreSQL Web WEB服务器 其它 函数式概念 分布式系统 在线教育 大数据 操作系统 数据库 智能系统 正则表达式 版本控制 程序员杂谈 管理和监控 编程艺术 编译原理 编辑...

银月光海
2016/05/20
70
0
免费的编程中文书籍索引

免费的编程中文书籍索引,欢迎投稿。 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。 stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版 github 上的一个流行的编...

modernizr
2014/04/08
6.9K
24

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部