第1章 (X)HTML与CSS核心基础

　　这一章重点介绍了4个方面的问题。先介绍了 HTML和XHTML的发展历程以及需要注意的问题，然后介绍了如何将CSS引入HTML，接着讲解了CSS的各种选择器，及其各自的使用方法，最后中袋说明了CSS的继承与层叠特性，以及它们的作用。

1.1 HTML与XHTML

　　HTML与XHTML是一种语言的不同阶段，类似于文言文和白话文的关系。因为它们也常被写作为（X）HTML。XHTML是HTML的“严谨版”。

1.1.2 DOCTYPE（文档类型）的含义与选择

　　　“DOCTYPE”（文档类型）的声明，是告诉浏览器，使用哪种规范来解释这个文档中的代码。　　

　　HTML 4.01和XHTML1.0分别对应于一种严格（Strict）类型和一种过渡（Transitional）类型。　过渡类型兼容以前版本定义的，而在新版本中已经废弃的标记和属性。

　　严格类型则不兼容已经废弃的标记和属性。简易使用XHTML1.0 过渡类型，这样可以按照XHTML的标准书写符合Web标准的网页代码。

1.1.3 XHTML与HTML的重要区别

　　在XHTML中标记名称必须小写；属性名称必须小写；标记必须严格嵌套；即使是空元素的标记也必须封闭；属性值必须用双引号括起来；属性值必须使用完整形式；应该区分“内容标记”和“结构标记”（例如<p>标记是内容标记，<table>标记是结构标记，不允许讲<table>标记置于<p>内部，可将<p>标记置于<td></td>之间。）

1.2 （X）HTML与CSS

　　（X）HTML与CSS的关系就是“内容”与”形式“的关系，由（X）HTML确定网页内容，通过CSS决定页面的表现形式。

1.2.2 在HTML中引入CSS的方法

　　在HTML中，引入CSS的方法 主要有：行内式、内嵌式、导入式、链接式4种。　　

　　1. 行内式：在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。

　　2. 嵌入式：对页面中的各种元素的设置集中在<head></head>之间。

　　3. 导入式和链接式：目的都是将一个独立的CSS文件引入HTML文件中。链接式使用HTML的标记引入外部CSS文件，如

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

　　　　导入式需使用： <style type="text/css">  @import"mystyle.css";</style>

1.3 基本CSS选择器 selector

　　标记选择器、类别选择器和ID选择器3种。

1.3.1 标记选择器

　　选择器包含： 选择器本身、属性和值。

　　如 h1{ color:red,font-size:12px;}.

1.3.2 类别选择器

　　类别选择器的名称由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。 如 .class{color:green;}

　　最好通过标记选择器定义 标记的全局显示方案，再通过clss选择器突出标记进行单独设置。这样可提高代码的编写效率。

1.3.3 ID选择器

　　ID选择器只能在HTML页面中使用一次，针对性更强。

1.4 复合选择器

　　复合选择器是基本选择器通过不同的连接方式构成。

1.4.1 “交集”选择器

　　由两个选择器直接连接构成。第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。不能有空格。 如 h3.class

1.4.2 "并集“选择器

　　同时选中各个基本选择器选择的范围。

　　*{ }  表示全局声明。

1.4.3 后代选择器

　　通过嵌套方式对特殊位置的HTML标记进行声明。如  p span{}  <p><span></span></p>

　　在构建HTML框架时，通常只给外层标记（父标记）定义class或id，内层标记能通过嵌套表示的则利用嵌套的方式。

1.5 CSS的继承特性

1.5.1 所有的CSS语句都是基于各个标记之间的继承关系的。在每一个分支中，称上层标记为其下层标记的”父“标记；下层标记称为上层标记的”子“标记。　

1.5.2 CSS继承的运用　

　　CSS继承指的是子标记会继承父标记的所有样式风格，并可以在附表及样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。

1.6 CSS的层叠特性

　　优先级规则： 行内样式>ID样式>类别样式>标记样式。  越特殊的样式，优先级越高。

　　两个类别样式优先级相同，以前者为准。 如 <div class="purple red"></div>,  以purple为准。

　　

　　

CSS 设计彻底研究（一）(X)HTML与CSS核心基础的更多相关文章

  1. CSS 设计彻底研究（五）文字与图像

    第五章 文字与图像 5.1.2 设置字体 通过font-family属性设置字体.可以声明多种字体,字体之间用逗号分隔开.如一些字体名称中间有空格,需用双引号将其引起来,使浏览器知道这是一种字体的名称 ...

  2. CSS 设计彻底研究（四）盒子的浮动与定位

    第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元 ...

  3. CSS 设计彻底研究（三）深入理解盒子模型

    第三章 深入理解盒子模型 盒子模型是CSS控制页面的基础.需要清楚“盒子”的含义是什么,以及盒子的组成.此外,应该理解DOM的基本概念,以及DOM树是如何与一个HTML文档对应的,在此基础上充分理解“ ...

  4. 结构化CSS设计思维

    LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...

  5. 优化网站设计（七）：避免在CSS中使用表达式

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  6. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  7. 《CSS 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  8. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  9. CSS设计指南之浮动与清除

    原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...

随机推荐

  1. 从字节理解Unicode（UTF8/UTF16)

    如果你不知道或者不了解什么是Unicode/UTF8/UTF16,请详细阅读这篇文章(这也是这篇博文的先决条件): 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 但是如果你看完以上文章 ...

  2. HDU 4810 这道题 是属于什么类型？

    统计每一位出现1的个数  求组合数 直接贴代码 #include <iostream> #include <cstdio> #include <cmath> #in ...

  3. 高级I/O函数(2)-splice函数

    splice函数: 功能描述:用于在两个文件描述符之间移动数据,也是零拷贝操作.函数定义如下: #include <fcntl.h> ssize_t splice(int fd_in,lo ...

  4. Gulp:基于流的自动化构建工具

    前言 先说说为什么会使用gulp. 当你沉醉于撸代码之时,是否想过正规的前端代码需要走哪些流程,复杂的不说了,有几点想必你也思考过,比如: 1.代码的压缩合并.图片压缩怎么搞: 2.代码校验,是否规范 ...

  5. ashx中session的使用

    在平常的页面上是用是很容易就的到request,response对像,从而对其进行一些操作,但在ashx(一般处理程序)中却是有一点的不同, 在ashx你无法正常的使用session,即 contex ...

  6. debug模式启动provider

    debug 模式启动 1 sts中的配置见图片 2 centos中 ./knowledge-start.sh debug win系统ip ./knowledge-start.sh debug 192. ...

  7. 《Programming WPF》翻译 第8章 3.Storyboard

    原文:<Programming WPF>翻译 第8章 3.Storyboard Storyboard是动画的集合.如果你使用了标记,所有的动画必须要被定义在一个Storyboard中.(在 ...

  8. 无人参与安装IIS 6.0

    使用脚本安装 IIS 从“开始”菜单,单击“运行”. 在“打开”框中,键入 cmd,然后单击“确定”. 在命令提示符下,键入 Sysocmgr.exe /i:sysoc.inf /u:%path_to ...

  9. Thinkpad E430+CentOS 6.4+ linux-3.10.12内核网卡驱动（无线+有线）配置

    配置并编译安装内核模块和内核后,解压附件 firmware.tar.bz2,拷贝其中的rtlwifi文件夹到/lib/firmware下,然后 执行装载内核模块命令: sudo modprobe rt ...

  10. 06_Elasticsearch 批量获取mget

    06_Elasticsearch 批量获取mget 现在有: http://192.168.32.81:9200/bank/bank_account/1 http://192.168.32.81:92 ...