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. phpstorm中设置代码上传到github

    参考: https://blog.csdn.net/Knight_quan/article/details/54894691 https://www.300168.com/biancheng/show ...

  2. linux命令之crontab定时执行任务【转】

    本文转载自:https://www.cnblogs.com/coffy/p/5608095.html 一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护 ...

  3. centos在图形界面和命令行之间切换的快捷键是什么?

    答: ctrl+alt+F1 或者ctrl+alt+F2 1.当前处于图形界面时,按ctrl+alt+F2可进入命令行模式 2. 当前处于命令行模式,按ctrl+alt+F1可进入图形界面

  4. 1823: [JSOI2010]满汉全席 2-sat

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1823 思路 建图,缩点tarjan 判断impossible 代码 #include < ...

  5. Git 收集别名

    .gitconfig文件夹一般是在C:\Users\Administrator路径下,用于全局的git的配置 下面是git别名的设置: [alias] last = log -1 --stat a = ...

  6. 浅谈Java中static关键字、权限修饰符

    1.实例变量:也称非静态成员变量,实例变量前没有static关键字,用来描述同一类事物的公共属性.访问方式:对象名.变量名.实例变量存储在堆区,对象有n个,数据就有n个.实例变量随着对象的创建而创建, ...

  7. python 之 模块

    在python模块,是一个python文件,以.py结尾,包含了python对象定义 和python语句 通过import语句 ,语法 import module1[,module2,module3, ...

  8. Unity3D学习笔记(三十六):Shader着色器(3)- 光照

    光照模型:用数学的方法模拟现实世界中的光照效果.   场景中模型身上的光反射到相机中的光线: 1.漫反射:产生明暗效果 2.高光反射:产生镜面反射,物体中有最亮且比较耀眼的一部分 3.自发光: 4.环 ...

  9. swagger实战踩坑1

    1.swagger error 有详细的错误信息 自己根据详细信息找问题 2.swagger error 无详细的错误信息 Controller是否重名=>重名,指定不同的   [Route(& ...

  10. js replace使用及正则表达式使用

    本文为博主原创,未经允许不得转载: js中replace方法与java中的replace方法相同,主要做替换. 表达式:stringObj.replace(rgExp, replaceText) 参数 ...