文档章节

css高级教程第一章笔记

Q_z
 Q_z
发布于 2014/01/30 20:59
字数 1095
阅读 248
收藏 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
成都
程序员
私信 提问
JavaScript面向对象的编程指南学习笔记

JavaScript面向对象的编程指南学习笔记 第一章 1,用自己的语言描述出,什么是对象、类、封装、聚合、继承、多态? 第二章 1,在控制台输入表达式后,返回undefined原因: 2, css 中颜色表示的...

优惠券发放
05/18
0
0
哪里可以找到 Kali Linux 的教程?

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

wizardforcel0
07/02
0
0
knockout2.0系列教程汇总

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

zuolz1985
2013/05/11
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

没有更多内容

加载失败,请刷新页面

加载更多

不用编写程序代码,送你一个爬虫程序批量采集猫眼电影票房数据

"大数据"是一个体量特别大,数据类别特别大的数据集,并且这样的数据集无法用传统数据库工具对其内容进行抓取、管理和处理。 "大数据"首先是指数据体量(volumes)大,指代大型数据集,一般在1...

技术阿飞
15分钟前
0
0
【Flutter教程】从零构建电商应用(一)

在这个系列中,我们将学习如何使用google的移动开发框架flutter创建一个电商应用。本文是flutter框架系列教程的第一部分,将学习如何安装Flutter开发环境并创建第一个Flutter应用,并学习Flu...

笔阁
36分钟前
5
0
什么是以太坊DAO?(三)

Decentralized Autonomous Organization,简称DAO,以太坊中重要的概念。一般翻译为去中心化的自治组织。 投票支付合约的所有费用和行动需要时间,并要求用户始终保持活跃,知情和专注。另一...

geek12345
38分钟前
2
0
一个本科学生对Linux的认知

一个本科学生对Linux的认知 我是一名大三的普通一本大学的软件工程的一名学生,学校开设了一些关于系统开发的课程,纸上得来终觉浅,学校的课程课时较短,想要在56个课时之内学会一些公司需要...

linuxCool
今天
3
0
CentOS 安装Tomcat

Tomcat 介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Java 程序写的网站用tomcat+jdk来运...

野雪球
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部