html&css部分小结
css 属性
color: 用来设置文本元素的字体颜色
16进制：最常用, 每两位数字代表 红色, 绿色, 蓝色, #cc6600 #代表是16进制数,
可以使用在线颜色表查找对应颜色
红,绿,蓝: rgb(80%, 40%, 0% ) 或 rgb(255, 255, 0);
颜色名字 ( 名字很少, 只有17种 ) yellow
font-weight: 控制文本的粗细(bold, normal)
left: 元素如何放置它的左侧
line-height: 文本之间的行间距
top: 控制元素顶部位置
padding: 0px;">border: 元素周围边框
margin: 想在元素边缘和内容之间有一些空间, 边界
font-size: 把文本变大变小
定义大小可以用像素 : font-size: 14px;
定义大小可以用百分数 : font-size: 150%; ( 相对于父元素 )
定义大小可以用倍数: font-size: 1.2em; ( 表明放大父元素1.2倍 )
定义大小可以用关键字 : font-size: small; ( xx-small, x-small 等等, 基本上不同级别相差20% )
技巧: 选择一个关键字(推荐用small或medium)定义body字体大小, 也就是默认网页字体
用em或百分比把别的元素的字体大小指定为参照body字体大小的尺寸
这个技巧的好处是, 当需要修改字体时, 只需要修改默认字体就可以达到全部都变的作用.
font-style: italic; 斜体 not italic
text-align: 本文对齐样式
font-family: 字体系, 例如 Verdana 等(用于不一样的场合, 如报纸印刷 等等 )
1. sans-serif family : 可读性好
2. serif family: 报纸印刷
3. monospace family: 等宽字体
4. Cursive family: 比较有趣
5. Fantasy Family: 比较有趣
text-decoration: 给文本添加更多样式,下划线等 ( underline, overline, line-through, none )
盒子: 由里到外
内容区 -> 补白 -> 边框 -> 边界 ( 有点类似夹心, 共3层 )
除了大小之外, 不能编辑补白和边界的其他方面.
可以指定多个式样表，顺序很重要, 一个式样表会覆盖在它之前链接式样表中的式样, 最下边的优先权最高
块元素是从头流到尾, 每两个元素之间有换行( 默认占满屏幕整个宽度 )
内联元素在水平方向上一个接一个地流, 从左上方到右下方( 宽度不够时, 就会向下 )
当浏览器并排放置两个内联元素, 这两个元素之间的空间是两个内联元素边界之和
当浏览器并列放置两个块元素，这两个元素之间(上下) 是两个块元素中较大的边界值
float 属性让一个元素尽可能靠左或靠右, 然后让它后面的元素流到这个元素的周围.
飘移元素会放在正常元素之上, 就感觉它飘起来一样, 因为飘移元素不再是正常流的一部分
====================流动布局========= important ==================================
flow: 网页正常的布局流, 块元素从上到下, 会有换行, 内联元素从左上到右下, 当碰到
float时, 理解 float的元素为漂移, 即飘到整个网页之上, 但是 float最好是放置在块级别上,
例如<p>, 那么 这段文件会飘在网页上, 它下边的html元素会向上跟它高度对齐, 并且会“围绕”
着它，将自己的内容显示出来.
无论飘移元素是左还是右, 都不会影响它后边的元素正常的流布局, 即 后边元素的高度和“围绕”
做布局时, 跟编程一样, 先从大的逻辑环境着手, 比如先分2块地方, 2块地方再继续分别跟多
要有逻辑层次
左右分栏问题：
例如：当你需要左右分两边时, 由于float是漂浮, 比如右边设置的是漂浮, 那么你可以把左边部分
的边界设置的比右边漂浮部分的宽度宽一些, 这样其实漂浮内容是覆盖在左边内容上, 但是由于左边
边界很宽, 所以看起来像是分了左右部分, 例如漂浮部分宽度是 280, 左边部分边界就可以设置为330
左边或右边, 只能固定一遍宽度, 一般固定漂浮宽度, 然后让别人“围绕”，如果两边都设置宽度, 当浏览器宽度
变更时, 就会出现两边谁也不管谁, 出现重叠或大缺口现象
clear 属性, 不准许漂浮元素出现在它的左,右. 例如 clear: right; 在页脚中使用可以防止页脚上移
因为 页脚元素不准许漂浮出现在它的左右.
=================凝胶布局========== important ====================================
介于冻结布局和流动布局之间
内容区的宽度是固定的，单边界随着浏览器窗口扩大或缩小
凝胶物布局锁定了页面中内容区得宽度，单把它放到浏览器中央.
把元素的左右边界设置为 aoto, margin-left: auto; margin-right: auto
=================绝对布局========== important ====================================
绝对布局来分栏
position: absolute; ( static, absolute, fixed, relative )
top: 100px;
right: 200px;
width: 280px;
绝对布局也在流布局以外
流元素中的内容根本不知道绝对布局的存在
设置表格边框的间距
border-spacing: 10px30px;
border-collapse: collapse; // 压缩表格边框为一个边框
可以将表格中的单元格扩展为多行多列
<td rowspan="2" colspan="2"> // 扩展为 2 行, 2 列
table 可以嵌入<td> 标签中嵌入 <table>
table table th { // 嵌套表格的式样
}
<ul>
<li>
</ul>
li {
list-style-type: disc;
list-style-image: url(images/backpack.gif);
}
html 头文件
<!DOCTYPE html PUBLIC "-//W3C//DTD/ XHTML 1.0 Strict// EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8895-1" />
浙公网安备 33010602011771号