龙空技术网

使用CSS代替HTML标记属性

寒笛过霜天 40

前言:

当前姐妹们对“css3空心圆”大致比较关切,我们都想要了解一些“css3空心圆”的相关文章。那么小编也在网络上收集了一些对于“css3空心圆””的相关资讯,希望朋友们能喜欢,同学们快快来了解一下吧!

<font></font>标记和CSS替代语法

文本的大小 文本的颜色 文本的字体

size(1-7,默认值为3) color face

font-size color font-family

<font size=3 color="red" face="楷体">font标签的属性用法</font>
<p style="font-size:20px;color:red;font-family:楷体">文本的CSS用法</p>

<b>标记

font-weight:bold;

<i>标记

font-style:italic;

<u>标记

text-decoration:underline;

实例:

<font color="red" size="3"><b><i>欢迎光临我的网站</i></b></font>
<style type="text/css">.txt1{color:red;background:white;font-style:italic;font-weight:bold;}</style>
<font class="txt1">使用CSS</font><sup></sup> 文字上标字体标签(super)<sub></sub> 文字下标字体标签(subscipt)
.txt_super{vertical-align: super;}.txt_sub{vertical-align: sub;}

<hr/>标记

水平线的高度 对齐方式 宽度 颜色 边框颜色

size align width color

height text-align width background-color border-color

<hr size=50 align="center" width=100 color="red"/><hr style="height:50px;align:center;width:100px";background-color="red"/>

<ul>标记

type属性值

disc 默认值,实心圆。

circle 空心圆。

square 实心方块。

list-style-type:

disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、

upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。

默认值:disc(实心圆)

<ol>标记

type属性值

1 默认值。数字有序列表。(1、2、3、4)

a 按字母顺序排列的有序列表,小写。(a、b、c、d)

A 按字母顺序排列的有序列表,大写。(A、B、C、D)

i 罗马字母,小写。(i, ii, iii, iv)

I 罗马字母,大写。(I, II, III, IV)

list-style-type:

disc(实心圆)、circle(空心圆)、square(方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、

upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无项目符号)。

默认值:disc(实心圆)

<table>表格

实例:合并图片

利用HTML4提供cellpadding和cellspacing属性,可以达到合并图片的效果,但是HTML5已经确定不再支持这两个属性

<table cellpadding="0" cellspacing="0"><tr><td><img src="ch07_03/1.jpg"/></td><td><img src="ch07_03/2.jpg"/></td></tr><tr><td><img src="ch07_03/3.jpg"/></td><td><img src="ch07_03/4.jpg"/></td></tr></table>

使用CSS样式实现合并图片

<!DOCTYPE HTML><html><head><title>合并图片</title><style type="text/css">table{border-collapse: collapse;} /* 边框会合并为一个单一的边框 */td{padding:0;}img{display: block;}</style></head><body><table><tr><td><img src="ch07_03/1.jpg"/></td><td><img src="ch07_03/2.jpg"/></td></tr><tr><td><img src="ch07_03/3.jpg"/></td><td><img src="ch07_03/4.jpg"/></td></tr></table></body></html>

使用CSS语法进行定位

<!DOCTYPE HTML><html><head><title>合并图片</title><style type="text/css">div{position:absolute;left: 50px;top: 50px;}img{position:absolute;}#img2{left:171px;}#img3{top:200px;}#img4{left:171px;top:200px;}</style></head><body><div><img src="ch07_03/1.jpg" id="img1"/><img src="ch07_03/2.jpg" id="img2"/><img src="ch07_03/3.jpg" id="img3"/><img src="ch07_03/4.jpg" id="img4"/></div></body></html>

标签: #css3空心圆