您的位置:CSS5 > CSS笔记 >

常用HTML元素与CSS属性

发布日期:2019-07-12 08:36:26 来源:CSS5

最简单的网页结构应该是这样:

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>

<meta charset="utf-8" /> 对整个网页编码的定义

在body标签内出现的,就是网页的具体内容,较常见的html标签有下面这些:

1. div标签——主要用于网页结构的布局,一般采用id和class区分不同的div,例如定义一个网页的底部版权信息,可以写为:

<div class="copy">XXX 版权所有</div>
2. p标签——表示段落,比如公司简介的文字可以写为:

<p>本公司成立于2005年,主要提供xxxx等业务。</p>
3. h1--h6标签——标题标签,权重由h1到h6依次递减,h1具有唯一性,每个页面只出现一次,例如,可以将网页主标题放在h1里,副标题放在h2里,相关内容放在h3里,等等……

4. ul标签——表示列表,与li标签配合使用,例如:

<ul><li>产品1</li><li>产品2</li><li>产品3</li></ul>
类似的还有有序列表ol,用法相似,一般网页的导航菜单就使用列表标签来实现……

5. img标签——图片表示,在网页中展示图片的时候用。如:

<img src="images/1.jpg" alt="产品图片" />

6. span标签——表示行内元素,比如:

<p>联系电话:<span>88888888</span></p>
文本中的某部分加上了span标签,便于在CSS中给它单独定义样式……

7. a标签——表示链接,例如:

<a href="http://www.css5.com.cn">CSS5</a>
含义是给“CSS5”这几个字加上对应的链接。如果是给图片加上链接,则应当写为:

<a href="http://www.css5.com.cn"><img src="logo.jpg" alt="产品图片" /></a>

8. strong和em标签——表示强调,在文章中某个关键词或某句话比较重要,可以加上此标签,在没定义样式的情况下,一般强调的文本会显示粗体或斜体。

9. 此外还有一些标签,如表格标签table,以及表示音频或视频的标签audio和video等等,在网页模板中用的较少的标签这里就不再赘述,将以上标签使用灵活的话,制作网页模板就基本够用了,其他的标签再慢慢研究就可以了。

关于CSS,也有很多定义各种样式的“代码”:

1. background——表示背景,例如给名为top的p标签定义背景,我们可以写为:

#top {background:#ccc;}
这表示背景是浅灰色,如果要用图片作为背景,则应写作:

#top {background: #00FF00 url(bg.png) no-repeat;}
这里的no-repeat表示不重复显示背景,如果需要重复,则去掉该属性即可;

2. text-align——表示文本居左、居右和居中的设置,最常用的:

p {text-align:center}
意思就是将这段文本居中;

text-align:left
文本内容靠左居左

text-align:right
文本内容靠右 居右

3. font——定义字体和字号,例如:

#one {font:bold 12px/20px arial}
表示文字为粗体,12px大小,行间距为20px,字体为arial,如需单独定义字号和字体,则写为:

font-size:14px;font-family:arial;
单独定义是否加粗,则使用:

font-weight:bold;
font-weight:normal
单独设置行间距,则使用:

line-height:24px;
line-height:150%;

4. padding和margin——分别定义内边距和外边距,例如:

#two {padding:0 5px 0 6px;margin:10px;}
表示two标签的内边距分别为0,5px,0,6px,四边外边据都为10px,当分别定义四边边距的时候,按照上、右、下、左的顺序,只定义两个数字,则表示上下,左右,只定义一个数字,则表示四边相同距离;

5. border——表示边框,一般写为:

#xxx {border:1px solid #eee}
则表示边框宽度为1px,颜色为#eee,如果单独定义下边框,则写为border-bottom,其他四边亦然;

6. 链接样式:我们可以分别定义链接文本的样式与鼠标指向链接时的样式,比如:

a {text-decoration: none;color:red;}
a:hover {text-decoration: underline;color:blue;}
意思是链接文本不显示下划线,颜色为红色,当鼠标指向时显示下划线,并显示为蓝色。此外还有a:visited标签定义已经访问过的链接样式,可以自己试一下;

7. 上述text-decoration定义文字是否加下划线,不一定针对链接使用,如果将给普通文本加下划线也是可以的,至于a:hover表示鼠标指向链接时的样式,同样的,也可以使用p:hover表示鼠标指向该段落时的样式;

8. height和width——表示高度和宽度,例如:

img {height:50px;width:200px;}
则定义了图片的宽和高,如果width:100%则表示宽度为整个屏幕的宽度;

9. float:left和float:right——常用来布局的浮动标签,它表示元素的流动方向,例如float:left表示向左浮动,下方的元素就会自动显示在右边;

10. display——定义元素的类型,最常用的display:none表示隐藏该元素,display:inline表示元素在行内显示,display:block表示元素以块状显示;

11. clear:both——表示清除浮动,不希望元素有浮动效果,则可以给元素加上此定义。

12. position:absolute和position:relative——表示绝对定位,通常是父级定义position:relative,子级定义position:absolute绝对定位属性,子级使用left或right和top或bottom进行绝对定位。对于初学者来说这个可能不易理解,暂时可以不作研究,并不是每个网页模板都会用到绝对定位。

标签(Tag): css 属性 html
本文分享URL地址:http://www.css5.com.cn/biji/1555.shtml

作者:CSS5原创

上一页:上一篇:Discuz退出登陆报错Discuz! System Error
下一页:下一篇:宝塔如何开启ssi让shtml网页内include正常显示