20160110HTML学习笔记关于CSS

为html文件体里面的内容加上各种效果可以通过CSS(Cascading Style Sheets)层叠样式表来实现下面粘贴一段代码来分析如何为内容加上各种效果

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

内部样式方法:可以看到文件体里面的各种元素所显示的效果都在文件头style元素里面描述,格式为        标识{样式:样式值

内联样式方法:通过a标签设置超链接时可以通过设置a标签内的style属性为"text-decoration:none"达到让当前超链接没有下划线的效果.

外部引用方法:在文件头用link标签可以链接一个外部样式表,link元素里面主要有三个属性rel和type和href,rel是单词relationship的缩写,rel的值设置为stylesheet,type值设置为text/css,href设置为所链接的css文件的全路径.

所谓内联样式方法是指通过设置html元素内部style属性实现各种样式.

内部样式方法是指通过html文件头的style元素实现各种样式.

外部引用方法是指通过html文件头的link元素调用外部css文件的方式实现各种样式.

例如通过style属性设置背景色为红色需要将style设置为"background-color:red;"需要注意的是旧版的html背景色是通过属性bgcolor设置的,通过bgcolor实现背景色为红色bgcolor="red"

可以通过style属性里面的 font-family和color和font-size设置字体,颜色,和大小.

可以通过style属性里面的test-align设置文本对齐方式.

当单个文件需要特别的样式时可以采用内部样式的方式,当多个文件采用统一样式时采用外部引用的方式,这样可以通过改变外部css文件叨叨快速修改多个文件样式的方法.

img标签里面常见属性有width,height,alt,title,border分别设置图片的宽度,高度,替换文字,图片补充信息,和边框,需要注意alt与title区别.

可以设置img标签里面的style属性值为float:left或者float:right使图片浮动与文字左右方.

可以设置area标签内的shape属性配合coords属性让图片的局部成为超链接.例如

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">是将图片上一个左上角点坐标为0,0右下角坐标为82,126的矩形区域作为指向href所指定的url的超链接.

下面是一个设置图像地图并使用地图的例子:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值