精通CSS高级Web标准解决方案(第2版)学习笔记
精通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版)学习笔记相关推荐
- 精通CSS高级WEB标准解决方案(第三版)笔记
精通CSS高级WEB标准解决方案(第三版)笔记 1 CSS选择符 1.1 类型选择符 1.2 ID选择符 1.3 类选择符 1.4 后代选择符 1.5 子选择符 1.6 相邻同辈选择符 1.6 一般同 ...
- 精通CSS高级Web标准解决方案(第三版)读书笔记
标签 <abbr title='这是对缩写词的解释'>缩写词</abbr> <aside></aside>定义article以外的内容,但是与artic ...
- 精通CSS:高级Web标准解决方案(中文电子书下载)
诶呀!~好不容易在网上找到了中文电子版的,但是已图片形式显示出来的 文件又太大,整了半天都没整理出来,控件还不够了,这里上传了后面几章的内容 下面给出目录,需要的朋友可以下载,博客园的个人空间也太小了 ...
- 精通CSS:高级Web标准解决方案(第2版)中文扫描版电子书pdf下载
精通CSS:高级Web标准解决方案(第2版)中文扫描版电子书pdf下载链接: https://pan.baidu.com/s/15NcNlcFgCP23sE3XAM_2_A 提取码获取方式:关注下面微 ...
- 精通CSS:高级Web标准解决方案(第2版)--前言
一 这是我的第一本也是现在仅有的关于CSS纸质书,2013-08-06 购自某东,对于患有拖延症的我来说,260多页现在还没看完也不足为奇.期间拾起放下多次,每次都是从头来过,想想都要悲哀一下,最大的 ...
- 《精通CSS-高级Web标准解决方案》 笔记
文章目录 第一章:基础知识 标记简史 文档类型和DOCTYPE 浏览器模式和DOCTYPE切换 第二章:为样式找到应用目标 选择器 层叠和特殊性 对文档应用样式 第三章:可视化格式模型 盒模型概述 定 ...
- html5与css 1. web标准及组成
html5与css 1. web标准及组成 学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4. ...
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——1.4 统一资源定位符
本节书摘来自异步社区<21天学通HTML+CSS+JavaScript Web开发(第7版)>一书中的第1章,第1.4节,作者:[美]Laura Lemay(劳拉·莱梅) , Rafe C ...
- 《Java Web开发入门很简单》学习笔记
<Java Web开发入门很简单>学习笔记 1123 第1章 了解Java Web开发领域 Java Web主要涉及技术包括:HTML.JavaScript.CSS.JSP.Servlet ...
最新文章
- FPGA(3)验证数字逻辑(与门、与非门、二选一数据选择器、2-4译码器、半加器、全加器)
- Linux下C/C++编译环境搭建
- 麻烦不断,Uber因保护用户隐私不力要接受20年的审计
- Mysql错误: Lock wait timeout exceeded 解决办法
- MF_RC522_射频识别参考程序注释(2018年4月27号)
- c语言循环与数组训练题,C语言循环数组练习题解读.doc
- pytest测试框架(四)---使用pytest-html生成测试报告
- js之事件冒泡和事件捕获详细介绍
- 【T1】飞跃专业版库存期初无法同步到【U+】通用财务
- 「开发者说」钉钉连接平台实现OA审批与企业内部系统数据互通
- The kernel appears to have died. It will restart automatically.
- 词性标记:VA,VC,VE,VV等
- 在手机上玩魔兽争霸2
- HDU - 4747 Mex(线段树)
- 正点原子Alpha Linux开发板相关资料分享
- 智慧城市的互联网大脑架构图,大社交网络与智慧城市结合是关键
- turtle小乌龟画笔
- 千万别让“预期收益”给忽悠了
- 如何优雅的在微信公众号中编辑代码
- 公众号文章、底部菜单栏关键词自动回复投票、报名、预约、查询等链接?
热门文章
- 某些微型计算机使用Pentium,2010四川省计算机等级考试二级理论考试试题及答案...
- c语言中srand的作用,C语言中srand(), rand(), time()函数 转载
- oracle主备不同步,主备环境下数据不一致重新部署复制
- android 智能家居 pdf,智能家居项目化教程.pdf
- 什么是jQuery?
- Spring框架学习笔记04:初探Spring——采用Java配置类管理Bean
- 数据库笔记02:查询与统计数据
- 【BZOJ4289】Tax,堆优化dijsktra的最短路问题
- C ++基础 | 格式化输出,文件输入输出(File IO),头文件(Header Files)_3
- bzoj3190 [JLOI2013]赛车 半平面交