HTML文档在线检查
第一章 认识HTML
,
等),标记会告诉浏览器文本的含义和结构。
2016/01/17
HTML的常识性原则
开头(h5),除非是使用其他版本
和
之间
和
元素可以直接放在
之中,其他元素必须被嵌套在
和
之中
模块中指定字符编码,例如
模块中放置
、
和
元素,而且
元素中必须包含一个
模块
元素嵌套在另一个
元素之中
的void元素中嵌套任何内联元素
元素中应该包含src属性和alt属性,而且属性值应加上引号,特别是在有多个属性的情况第7章 CSS入门
- 元素将会成为指定样式的场所
- 要为HTML直接增加CSS样式,需要在元素中增加
和
标记,把CSS规则放在
标记之间,例如要将段落的字体颜色改为茶红色,可以这样写:
<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元素添加了下划线
元素,方便进行大批量的修改。type="text/css"/*链接类型*/ rel="stylesheet"/*链接关系*/ href="lounge.css"/*路径*/>
2016/01/18
- 元素也可以从父元素继承样式,例如,元素是
和
元素的父元素,为
元素创建样式时,
和
会自动继承样式,如果某一元素不需要继承父元素样式时,需要再增加一个规则来覆盖继承的属性样式,因为CSS总会使用最特定的那个规则。
- 当内容比较复杂时,可以使用注释,只要把注释的内容包在/*
和*/
之间即可,也可以使用注释包围CSS,这样浏览器会忽略这段CSS:
/*这个规则选择所有段落,指定字体颜色为绿色*/
应用样式选择简单指南
p { color:black;}/*选择所有段落的元素*/
.greentea { color:green;}/*选择类别为greentea的所有元素,相对特定一点*/
p.greentea { color:red;}/*选择类别为greentea的段落元素,更特定一点*/
p.raspberry { color:blue;}
p.blueberry { color:purple;}/*与上面特定程度相同,且顺序排在最后,因此这个段落被指定为紫色*/
2016/12/11更新
aaabbbccdd
p.greentea{
color:green;
}
2016/01/22
CSS验证工具
CSS的一些属性:
background-image:在元素后面放置一个图标
如上图所示,属于的
元素就继承了
的这个属性,属于
的
元素则不会继承这个属性。
第8章 增加字体和颜色样式
指定和改变字体的属性
字体系列:每个font-family包含一组有共同特征的字体
如何使用CSS指定字体系列:
body
{font-family/*可以指定多个字体*/:Verdana,Geneva,Arial,san-serif;/*这类似于一个字体候选列表,当没有用户计算机没有Verdana字体时依次选择Geneva字体和Arial字体,都没有时选用一种san-serif字体来显示*/
}
HTML如何链接到CSS样式表,书p275/总第310
type="text/css"/*链接类型*/ rel="stylesheet"/*链接关系*/ href="lounge.css"/*路径*/>
注意,当用户不一定有所指定的字体时,可以使用Web字体向用户的浏览器提供一种字体,这里需要使用一种新的特性,@font-face。
Web字体工作方式:
如果想为Web上的用户提供字体,就必须把这些字体文件放在服务器上或者利用一个托管服务。
2016/01/26
如何指定字体大小
font-size:14px /* 这里14和px之间不能有空格,14px的意思是指字体系列中最高的位置跟最低位置的差别是14个像素*/
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(并不固定,可以更改)
规则中的字体大小,相当于页面默认字体大小; em
或者百分数,指定其他元素大小,这样的好处在于,改变web页面的大小就会很容易,只需要改变
字体,其他字体就会自动增大,如:body{font-size:small;}
h1{font-size:150%;}
h2{font-size:120%;}
一般而言,是默认文本的200%,
是150%,
是120%,
是100%。
font-weight:bold;/*使用粗体*/
font-weight:normal;/*去掉粗体*/
font-style:italic;/*斜体风格,并不是所有字体都支持斜体风格,所以需要用下一个倾斜风格*/
font-style:oblique
的区别,
用来指定结构,表示文字需要强调,其样式可能会改变,所以不能指望在所有浏览器中都是斜体。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章 盒模型