样式表和图片
1.样式 创建样式规则
在head中插入<style> h1 {color:red font-size:14px}
a:link{color:aqua;} a:visited{color:darkgreen;}</style> 链接的颜色 访问过的颜色
嵌套标识符创建 ol ul {list-style-type:circle} ul b {color:blue}
为应用样式创建类和标识 <li class ="new">hello world</li> <li id="special"> 哈哈哈</li>
<style> .new {color:red} #special {color:blue} </style>
2.使用样式表改变文本格式
指定字体系列 和 尺寸大小 颜色 背景颜色 粗体和倾斜格式 <p style="font-family:Arial,He;emetic,sans-serif;font-size:x-small ;color:blue;background-color:yellow;font-weight:bold;font-style:italic"> 适用于这段文字</p>
大小可以设置为em 为一倍 2em 也可以为xx-small x-small small medium large x-large xx-large 颜色 可以为RGB #FFFF00 粗体数值为100(最浅)-900(最深)
应用删除和下划线text-decoration 属性<p style="text-decoration:underline">文字下划线</p>
简写的 List price:<del>$24.00</del> <ins>Now 9.9$</ins>
创建内联跨度 <span class="textContext">测试内容</span> 在style 写 .textContext {
color:red background-color:blue;font-family:Arial;}
调整字符间距 词语间距(word spacing) 和字符间距(letter spacing)默认为0 通常增加或缩减1像素已足够 <p style="letter-spacing:4px">This text has increased letter spacing </p>
3.使用样式改变段落格式
段落缩进 首行缩进 <p style="text-indent:20px"> 内边距 <p style="padding:20px"> 外边距<p style="margin:20px"> margin-left 上下左右都可以
设定边框样式 border-style:solid 边框间空 padding:15px 边框宽度和颜色 border-width border-color 边框各边的格式化 border-top-color 设定边框四边 border:2px green solid
段落的水平对齐 text-align :center ;right ;left ;justify(左右两端对齐) 设定行距line-height
4.图像显示
插入图像 <img src="logo.gif" alt ="my test image" style ="float:left"> 可以为路径 images/logo.gif 网址也可以 alt 表是图片的描述一般用户看不到 只有图片错误的时候显示
图片的位置 left right
图片的字符文本向下移动 先清空样式 应该在文本中写 <h2 style="clear:left"> 向左移动</h2>
设置图片的大小 height width margin(外边距) padding(内边距)
添加超文本链接<a href="http://www.aaa.jpg" >
向图像中添加标题 <figure>表示图标 <figurecaption>来关联图像的标题
<figure> <img src="logo.jpg"> <figurecaption>关联一张图片</figurecaption></figure>
