Getting started with CSS

前言

CSS 的 rule

作者做了一个非常形象的比喻,将 CSS 必做 renovate the house,在这里,CSS 包括了三个部分:

  1. Selector:the location of the HTML element
  2. Property:properties in that location
  3. Style:like black, or 1px...

适配 style 的第二种方式:

第一种:在 HTML 中的 head 里面添加 <style>element
第二种:建立一个 CSS file,这个 CSS file 还有一个名字叫做 stylesheet,然后在 HTML 中用一个叫做<link>的 void element 去链接。

的参数

详细介绍

  • type 在 HTML5 是 optional 的了,可加也可以不加。
  • rel 参数是用来表示 relationship between HTML file and the linked file,这里链接的是 HTML 的stylesheet,
  • href 的参数的 value 为 relative path 或者 URL.

对每个element 添加不同的效果

通过 class 可以做到这一点,操作方法为两个步骤:
1.In HTML,adding class attribute to and element,like:
<p class="greentea">
2.Creating a class selector:,;like this:
p.greentea

其他知识

  • 当两个 element 有相同的 presentation 的时候,可以用 h1,h2 这样的方式。
  • bordor-bottom 这个 style 和 underline 是不同的,border-bottom很长。
  • 当存在两个对于同一个 element 的 style 的时候,选取 more specific 的那个,也就是说:如果有h1,就不选 body 样式,如果有.classname 这样的标示,就不选 h1。
  • 在 HTML 中,一个 element 可以属于多个 class,比如可以是:<p class="blueberry greentea raspberry>,在应用的时候,同样是应用 more specific 的那一个,当同一等级的时候,会应用 stylesheet 中的 last 的那个style。
  • 有一个 property ,比如说font,是具有inheritance 的特性的,但是有的就没有,比如border,区分这一点可以用 common-sense,比如说:border 加在 body 上,不会加在每一个 p 上。
  • 选择字体的时候用的 property 的名字叫 font-family,现在介绍了 serif 和 sans-serif.
  • 可以在 CSS 里面添加注释,格式为:/**/
  • 在分析 heritance 的时候,就像是 child 遗传 parent 的格式,如果 parent 被设置了更加具体的 style ,那么它的 children 就不会 inherit 那个比 parent 还大的parent 的style.

HTML第七章总结的更多相关文章

  1. 精通Web Analytics 2.0 (9) 第七章:失败更快:爆发测试与实验的能量

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第七章:失败更快:爆发测试与实验的能量 欢迎来到实验和测试这个棒极了的世界! 如果Web拥有一个超越所有其他渠道的巨大优势,它就 ...

  2. 《Entity Framework 6 Recipes》中文翻译系列 (38) ------ 第七章 使用对象服务之动态创建连接字符串和从数据库读取模型

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第七章 使用对象服务 本章篇幅适中,对真实应用中的常见问题提供了切实可行的解决方案. ...

  3. 《Entity Framework 6 Recipes》中文翻译系列 (41) ------ 第七章 使用对象服务之标识关系中使用依赖实体与异步查询保存

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 7-7  标识关系中使用依赖实体 问题 你想在标识关系中插入,更新和删除一个依赖实体 ...

  4. Java语言程序设计(基础篇) 第七章 一维数组

    第七章 一维数组 7.2 数组的基础知识 1.一旦数组被创建,它的大小是固定的.使用一个数组引用变量,通过下标来访问数组中的元素. 2.数组是用来存储数据的集合,但是,通常我们会发现把数组看作一个存储 ...

  5. objective-c第七章课后练习2

    题:改变第七章例子中print方法,增加bool参数,判断如果是YES则对分数进行约简 @interface Fraction : NSObject { //int num,den; } @prope ...

  6. 读《编写可维护的JavaScript》第七章总结

      第七章 事件处理 7.1 典型用法 作者首先给了个我们一个处理事件的方法.看起来也没啥俩样,不过后来给出的优化方法很值得学习: // 不好的写法 function handleClick(even ...

  7. 第七章 LED将为我们闪烁:控制发光二极管

     第七章 LED将为我们闪烁:控制发光二极管 本章我们将会看到一个完整的linux驱动程序,通过linux驱动程序控制LED的四个小灯,通俗的说就是通过向linux驱动程序来控制LED小灯的开关.用到 ...

  8. Getting Started With Hazelcast 读书笔记(第七章)

    第七章 部署策略 Hazelcast具有适应性,能根据不同的架构和应用进行特定的部署配置,每个应用可以根据具体情况选择最优的配置: 数据与应用紧密结合的模式(重点,of就是这种) 胖客户端模式(最好用 ...

  9. apue第七章学习总结

    apue第七章学习总结 1.main函数 程序是如何执行有关的c程序的? C程序总是从main函数开始执行.main函数的原型是 int main(int argc,char *argv[]); 其中 ...

  10. [Effective Java]第七章 方法

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

随机推荐

  1. Android - Resource 之 Menu 小结

    定义一个application的菜单,由MenuInflater召唤. 位置: res/menu/filename.xml 类型:指向Menu resource 文法: <?xml versio ...

  2. Stanford CS231n实践笔记(课时14卷积神经网络详解 上)

    本课我们主要来研究一个"浏览器中的卷积神经网络" 这只是一个展示项目,但是能够帮助直观地看到一些东西 地址:https://cs.stanford.edu/people/karpa ...

  3. 20145325张梓靖 《网络对抗技术》 PC平台逆向破解

    20145325张梓靖 <网络对抗技术> PC平台逆向破解 学习任务 shellcode注入:shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并 ...

  4. Codeforces 526F Pudding Monsters - CDQ分治 - 桶排序

    In this problem you will meet the simplified model of game Pudding Monsters. An important process in ...

  5. 1.面向过程编程 2.面向对象编程 3.类和对象 4.python 创建类和对象 如何使用对象 5.属性的查找顺序 6.初始化函数 7.绑定方法 与非绑定方法

    1.面向过程编程 面向过程:一种编程思想在编写代码时 要时刻想着过程这个两个字过程指的是什么? 解决问题的步骤 流程,即第一步干什么 第二步干什么,其目的是将一个复杂的问题,拆分为若干的小的问题,按照 ...

  6. linux内核中的hisi_sas是什么?

    答: 是一个HISILICON SAS 控制器驱动(HISILICON SAS controller driver)

  7. 枚举+排序|神奇算式|2014年蓝桥杯A组题解析第三题-fishers

    标题:神奇算式 由4个不同的数字,组成的一个乘法算式,它们的乘积仍然由这4个数字组成. 比如: 210 x 6 = 1260 8 x 473 = 3784 27 x 81 = 2187 都符合要求. ...

  8. 用yarn代替cnpm,cnpm漏包有点严重

    npm 的方式  npm  install  -g  yarn   安装完成后,你可以测试下自己的版本 yarn --version 开始使用 单独安装包的方式add 不是install,后面不用加 ...

  9. JavaWeb--简单分页技术

    分页需要的技术点:1.前台分页标签的使用 2.前台上一页,下一页显示的业务逻辑 3.MSQL用到的语句  limit 4.封装pageBean对象 这个是PageBean用到的 分页公式: int t ...

  10. linux mysql操作命令大全

    1.linux下启动mysql的命令:mysqladmin start/ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysql的命令:mysqla ...