精通CSS
高级Web标准解决方案(第2版)
第一章
基础知识
一、设计代码格式
1、如果元素有恰当的含义,就应该尽量使用他们。
h1,h2
ul,ol和dl
strong和em
abbr,acronym和code
fieldset、legend和label
caption、thead、tbody和tfoot
用标记的好处:
1,搜索引擎可以识别出标题并予以重视。
2,屏幕阅读器的用户可以依靠标题进行页面导航。
3,有意义的标记可以简便的将元素调整为你所需要的样式。它在文档中添加结构并且创建一个底层框架。可以直接设置元素的样式,而不需要添加其他标识符,因此避免了不必要的代码膨胀。

第二章
为样式找到应用目标

2.1常用的选择器

类型选择器

类型选择器也就是我们所说的元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
例如:
p{color:red;}
h1{ font-weight:bold;}

后代选择器
后代选择器(descendant selector)又称为包含选择器。
根据上下文选择元素
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:
h1 em {color:red;}

ID 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red {color:red;}
#green {color:green;}

类 选择器
在 CSS 中,类选择器以一个点号显示:
.center {text-align: center}

子元素选择器
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:

<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻同胞选择器

相邻同胞选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

属性选择器

对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。

转载于:https://blog.51cto.com/almaz/616104

精通CSS高级Web标准解决方案(第2版)学习笔记相关推荐

  1. 精通CSS高级WEB标准解决方案(第三版)笔记

    精通CSS高级WEB标准解决方案(第三版)笔记 1 CSS选择符 1.1 类型选择符 1.2 ID选择符 1.3 类选择符 1.4 后代选择符 1.5 子选择符 1.6 相邻同辈选择符 1.6 一般同 ...

  2. 精通CSS高级Web标准解决方案(第三版)读书笔记

    标签 <abbr title='这是对缩写词的解释'>缩写词</abbr> <aside></aside>定义article以外的内容,但是与artic ...

  3. 精通CSS:高级Web标准解决方案(中文电子书下载)

    诶呀!~好不容易在网上找到了中文电子版的,但是已图片形式显示出来的 文件又太大,整了半天都没整理出来,控件还不够了,这里上传了后面几章的内容 下面给出目录,需要的朋友可以下载,博客园的个人空间也太小了 ...

  4. 精通CSS:高级Web标准解决方案(第2版)中文扫描版电子书pdf下载

    精通CSS:高级Web标准解决方案(第2版)中文扫描版电子书pdf下载链接: https://pan.baidu.com/s/15NcNlcFgCP23sE3XAM_2_A 提取码获取方式:关注下面微 ...

  5. 精通CSS:高级Web标准解决方案(第2版)--前言

    一 这是我的第一本也是现在仅有的关于CSS纸质书,2013-08-06 购自某东,对于患有拖延症的我来说,260多页现在还没看完也不足为奇.期间拾起放下多次,每次都是从头来过,想想都要悲哀一下,最大的 ...

  6. 《精通CSS-高级Web标准解决方案》 笔记

    文章目录 第一章:基础知识 标记简史 文档类型和DOCTYPE 浏览器模式和DOCTYPE切换 第二章:为样式找到应用目标 选择器 层叠和特殊性 对文档应用样式 第三章:可视化格式模型 盒模型概述 定 ...

  7. html5与css 1. web标准及组成

    html5与css 1. web标准及组成 学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4. ...

  8. 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.4 统一资源定位符

    本节书摘来自异步社区<21天学通HTML+CSS+JavaScript Web开发(第7版)>一书中的第1章,第1.4节,作者:[美]Laura Lemay(劳拉·莱梅) , Rafe C ...

  9. 《Java Web开发入门很简单》学习笔记

    <Java Web开发入门很简单>学习笔记 1123 第1章 了解Java Web开发领域 Java Web主要涉及技术包括:HTML.JavaScript.CSS.JSP.Servlet ...

最新文章

  1. FPGA(3)验证数字逻辑(与门、与非门、二选一数据选择器、2-4译码器、半加器、全加器)
  2. Linux下C/C++编译环境搭建
  3. 麻烦不断,Uber因保护用户隐私不力要接受20年的审计
  4. Mysql错误: Lock wait timeout exceeded 解决办法
  5. MF_RC522_射频识别参考程序注释(2018年4月27号)
  6. c语言循环与数组训练题,C语言循环数组练习题解读.doc
  7. pytest测试框架(四)---使用pytest-html生成测试报告
  8. js之事件冒泡和事件捕获详细介绍
  9. 【T1】飞跃专业版库存期初无法同步到【U+】通用财务
  10. 「开发者说」钉钉连接平台实现OA审批与企业内部系统数据互通
  11. The kernel appears to have died. It will restart automatically.
  12. 词性标记:VA,VC,VE,VV等
  13. 在手机上玩魔兽争霸2
  14. HDU - 4747 Mex(线段树)
  15. 正点原子Alpha Linux开发板相关资料分享
  16. 智慧城市的互联网大脑架构图,大社交网络与智慧城市结合是关键
  17. turtle小乌龟画笔
  18. 千万别让“预期收益”给忽悠了
  19. 如何优雅的在微信公众号中编辑代码
  20. 公众号文章、底部菜单栏关键词自动回复投票、报名、预约、查询等链接?

热门文章

  1. 某些微型计算机使用Pentium,2010四川省计算机等级考试二级理论考试试题及答案...
  2. c语言中srand的作用,C语言中srand(), rand(), time()函数  转载
  3. oracle主备不同步,主备环境下数据不一致重新部署复制
  4. android 智能家居 pdf,智能家居项目化教程.pdf
  5. 什么是jQuery?
  6. Spring框架学习笔记04:初探Spring——采用Java配置类管理Bean
  7. 数据库笔记02:查询与统计数据
  8. 【BZOJ4289】Tax,堆优化dijsktra的最短路问题
  9. C ++基础 | 格式化输出,文件输入输出(File IO),头文件(Header Files)_3
  10. bzoj3190 [JLOI2013]赛车 半平面交