HF HTML&CSS第2版学习笔记（陆续更新）

来源：互联网发布：50岁知天命是什么意思编辑：程序博客网时间：2024/05/17 08:29

HTML文档在线检查

第一章认识HTML

HTML的全称是Hyper Text Makeup Language，简称HTML，译名超文本标记语言
Web服务器（把文件放到Web服务器上，浏览器就可以通过互联网得到你的Web页面）
HTML的作用：HTML告诉浏览器页面的内容和结构，然后浏览器就可以显示一个页面了。当浏览器读到HTML时，他会翻译文本中的标记（使用尖叫括号括起来的字符，例如<p>,<h1>等），标记会告诉浏览器文本的含义和结构。
注释 
2016/09/08

2016/01/17

HTML的常识性原则

一定要以<!doctype html> 开头（h5），除非是使用其他版本
除了doctype，其他元素都必须被嵌套在<html>和</html>之间
只有<head>和<body>元素可以直接放在<html>之中，其他元素必须被嵌套在<head>和<body>之中
应该在<head>模块中指定字符编码，例如<meta charest="utf-8">
只能在<head>模块中放置<title>、<meta>和<style>元素，而且<head>元素中必须包含一个<title>模块
不要把<a>元素嵌套在另一个<a>元素之中
不允许在类似<img>的void元素中嵌套任何内联元素
时刻检查元素必须的属性，例如<img>元素中应该包含src属性和alt属性，而且属性值应加上引号，特别是在有多个属性的情况

第7章 CSS入门
- 元素将会成为指定样式的场所
- 要为HTML直接增加CSS样式，需要在<head>元素中增加<style>和</style>标记，把CSS规则放在<style>标记之间，例如要将段落的字体颜色改为茶红色，可以这样写：

<style>        p {            color:maroon;        }</style>

当多个元素需要编写同一规则时，可以合并规则，类似这样：

<style>        h1,h2 {                font-family:sans-serif;                color: gray;              }</style>

如果需要为两个有相同规则的元素中的某一个添加单独的一种规则时，只需另外再增加一个规则即可：

<style>        h1,h2 {                font-family:sans-serif;                color: gray;              }        h1    {                border-bottom: 1px soild black;              }</style>

如上，这样就单独为h1元素添加了下划线

CSS的原理即是为HTML文件提供一个样式表，将所有需要的样式规则集中在一个CSS文档中，其他HTML文件直接引用这个样式表，从而避免在每一个HTML文档中写入<style>元素，方便进行大批量的修改。
HTML如何链接到CSS样式表，书p275/总第310

<link type="text/css"/*链接类型*/ rel="stylesheet"/*链接关系*/ href="lounge.css"/*路径*/>

2016/01/18
- 元素也可以从父元素继承样式，例如，<p>元素是<a>和<em>元素的父元素，为<p>元素创建样式时，<a>和<em>会自动继承样式，如果某一元素不需要继承父元素样式时，需要再增加一个规则来覆盖继承的属性样式，因为CSS总会使用最特定的那个规则。
- 当内容比较复杂时，可以使用注释，只要把注释的内容包在/*和*/之间即可，也可以使用注释包围CSS，这样浏览器会忽略这段CSS：

/*这个规则选择所有段落，指定字体颜色为绿色*/

2016/12/11更新

类的概念（class）：结合HTML和CSS，我们可以定义一类元素，并对属于该类的所有元素应用样式。
创建一个类有两步：
首先，为HTML中的元素增加一个class属性，这样就会把这个元素增加到这个类来；
其次，在CSS中选择这个类。
例如：
<p class = "greentea"> <img src="../images/green.jpg" alt = "Green Tea"> aaabbbccdd </p>
这样就为p元素添加了一个名为“greentea”的class属性。
创建一个类选择器：
要在CSS中创建一个类，并选择这个类中的一个元素，可以编写一个类选择器，如下：

p.greentea{     color:green;     }/*表示选择了属于greentea类的p元素，并将这个p元素的颜色指定为绿色*/

其中，需要对同一类的不同元素进行选择，就将选择器的p替换为需要的元素（同时在HTML文档中添加class属性），例如：

blockquote.greentea{            color:blue;            }/* blockquote块引用*/

如果是同时对p元素和blockquote元素进行选择呢？如下：

p.greentea,blockquote.greentea{                        color:green;                        }

如果希望同一类中的所有元素都有一样的样式呢？，如下：

.greentea{    color:green;    }/*这样规则会应用到所有属于greentea类的元素身上*/

同时，元素可以加入多个类，如下：

<p class="greentea raspberry blueberry">/*把各个类名放在class属性中，使用一个空格隔开，类名的顺序不重要*/

使用多个类名的用处，例如可以把p元素放在greentea类中，定义显示颜色；同时放在special类中，当商品促销时使用红色显示。

应用样式选择简单指南

当有选择器选择元素时，这个元素具有选择器指定的样式的属性和值
当该元素的父元素被指定时，该元素继承父级元素的指定样式的属性和值
如果该元素没有被指定，也没有父级元素，那么该元素使用默认值
如果有多个选择器选择该元素，则该元素获得最特定的样式的属性和值，如果有多个特定程度相同的选择器同时选择一个元素，则该元素获得样式表顺序最后一个选择器的指定样式的属性和值

p { color:black;}/*选择所有段落的元素*/.greentea { color:green;}/*选择类别为greentea的所有元素，相对特定一点*/p.greentea { color:red;}/*选择类别为greentea的段落元素，更特定一点*/p.raspberry { color:blue;}p.blueberry { color:purple;}/*与上面特定程度相同，且顺序排在最后，因此这个段落被指定为紫色*/

2016/01/22
CSS验证工具
CSS的一些属性：

color：设置文本元素的字体颜色
left：指定一个元素左边所在的位置
font-weight：控制文本粗细
line-height：控制文本元素的行间距
top：指定一个元素顶部所在的位置
text-align：文本左对齐/居中/右对齐
letter-spacing：字母之间设置的间距
background-color：元素的背景颜色
font-style：文本斜体
border：元素周围加边框实线/凸起/虚线
list-style：改变列表项的外观
padding：内边距
font-size：文本大小
background-image：在元素后面放置一个图标
元素的继承要看实际的归属，而不是主观按照属性，如下题：
如上图所示，属于<h2>的<em>元素就继承了<body>的这个属性，属于<p>的<em>元素则不会继承这个属性。

第8章增加字体和颜色样式

指定和改变字体的属性

font-family 定制字体
font-size 控制字体大小
font-weight 控制字体粗细
text-decoration 装饰文本，上/下划线，删除线

字体系列：每个font-family包含一组有共同特征的字体

san-serif：没有衬线的字体
serif：衬线字体
Monospace：固定宽度字体
cursive：类似手写体
fantasy：有某种风格的装饰体

如何使用CSS指定字体系列：

body    {font-family/*可以指定多个字体*/：Verdana，Geneva，Arial，san-serif；/*这类似于一个字体候选列表，当没有用户计算机没有Verdana字体时依次选择Geneva字体和Arial字体，都没有时选用一种san-serif字体来显示*/}

HTML如何链接到CSS样式表，书p275/总第310

<link type="text/css"/*链接类型*/ rel="stylesheet"/*链接关系*/ href="lounge.css"/*路径*/>

注意，当用户不一定有所指定的字体时，可以使用Web字体向用户的浏览器提供一种字体，这里需要使用一种新的特性，@font-face。
Web字体工作方式：

浏览器获取一个引用这些字体的HTML页面；
浏览器从服务器获取这个页面所需的Web字体；
浏览器使用这个字体显示这个页面。

如果想为Web上的用户提供字体，就必须把这些字体文件放在服务器上或者利用一个托管服务。
2016/01/26

如何指定字体大小

font-size：14px /* 这里14和px之间不能有空格，14px的意思是指字体系列中最高的位置跟最低位置的差别是14个像素*/

用百分数指定相对于另一个字体（即父级字体）的大小
使用em（类似倍数）指定相对应另一个字体的大小，如

body{    font-size：14px；}/*父级字体大小为14px*/h1{    font-size：150%；}/*h1字体相对于父级放大150%，即14*1.5=21px*/h2{    font-size：1.2em；}/*h2字体相对于父级放大1.2倍，即14*1.2=16.8px，有时候浏览器会四舍五入为17px*/

使用关键字指定字体大小，可以把字体指定为xx-small、x-small、small、medium、large、x-large和xx-large，每个大小都比前一个大20%，small通常被定义为12px（并不固定，可以更改）
如何指定字体大小：
1.选择一个关键字，指定它作为<body>规则中的字体大小，相当于页面默认字体大小；
2.使用em或者百分数，指定其他元素大小，这样的好处在于，改变web页面的大小就会很容易，只需要改变<body>字体，其他字体就会自动增大，如：

body｛font-size：small；｝h1｛font-size：150%；｝h2｛font-size：120%；｝

一般而言，<h1>是默认文本的200%，<h2>是150%，<h3>是120%，<h4>是100%。

改变字体粗细：

font-weight：bold；/*使用粗体*/font-weight:normal;/*去掉粗体*/

使用斜体/倾斜风格：

font-style：italic；/*斜体风格，并不是所有字体都支持斜体风格，所以需要用下一个倾斜风格*/font-style：oblique

斜体/倾斜风格与<em>的区别，<em>用来指定结构，表示文字需要强调，其样式可能会改变，所以不能指望在所有浏览器中都是斜体。
调整行距：

body{     line-height:1.6em;/*这里将各行之间的间距改为1.6em，即字体大小的1.6倍，而且这个属性可以继承*/}

Web颜色
- 指定颜色有很多种方法：指定颜色名；RGB指定相对百分比；十六进制码指定；
- 指定Web颜色的最终目的是告诉浏览器一个颜色中红、绿、蓝分别的量是多少，举例如下：

body{     background-color:silver;}/*使用颜色名指定颜色*/body{     background-color:rgb(80%,40%,0%);}/*使用RGB相对百分比制定颜色*/body{     background-color:rgb(204,102,0);}/*使用0~255的红绿蓝分量值指定颜色*/body{     background-color:#cc6600;}/*使用十六进制码制定颜色*/

十六进制码表示颜色
文本装饰

em｛    text-decoration:line-through;}/*删除线*/em{    text-decoration:underline overline;}/*上划线和下划线*/em{    text-decoration:none;}/*无装饰*/

第9章盒模型

盒模型（box model）是CSS看待元素的一种方式，CSS将每个元素看作由一个盒子来表示。

0 0