样式表和图片

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>