十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
html的字体样式主要通过css的font-size以及font-family来定义的,标签详解如下:
创新互联建站专业为企业提供大渡口网站建设、大渡口做网站、大渡口网站设计、大渡口网站制作等企业网站建设、网页设计与制作、大渡口企业网站模板建站服务,十年大渡口做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
font-size
指定字体大小,常用单位有em和px
font-family
指定使用的字体
常用的中文字体有微软雅黑和宋体,英文字体有Arial
可以同时指定多个字体,使用英文的逗号分隔,浏览器会按顺序查找,找不到就找下一个,全部没找到就使用系统默认的
字体用中文表示 则需要用双引号或者单引号分隔,英文字体一般不需要用引号,但是如果 有特殊字符的(如空格,反斜杠,#,$等)也需要使用引号
font-weight
字体粗细(bold相等于设置该属性的值为700,normal相等于设置该属性值为400–不用单位,建议使用数字因为解析会更快)
fon-style
normal(一般用于让斜体不倾斜,em标签有加重强调的语义 但是字体会倾斜,可以为em 标签设置 font-style 属性值为 normal 取消其倾斜的效果)
字体样式可以连写
即 所有的字体样式 使用一个语句,但是有一定的语法规则和顺序
选择器 { font : font-style font-weight font-size/line-height font-family; }
字体样式连写时需要注意:一定要按顺序写,可以有省略不写的样式但是一定要按顺序,而且font-size和font-family是不可以省略的,否则会不起作用
文本外观样式
color:字体颜色
预定义的颜色如green,red等
十六进制,顺序是红绿蓝,十六进制是最常用的颜色表示方式
#ff0000 表示红色,等同于#f00(缩写,必须是两两相同的才可以进行缩写);#00f表示蓝色;#0f0表示绿色;#fff表示白色(所有的颜色都满格),#000000即#000表示黑色(所有的颜色都没有)
RGB代码:rgb(255,255,255)表示白色
文本修饰:text-decoration:none、underlined(比较常用,用于添加下划线和取消下划线)
line-hight:行间距,一般情况下,行间距只需要比字体大小大7或8个像素就可以了
text-align:文本内容的水平对齐方式
text-indent:段落首行缩进,单位使用em,1em就是一个字,所以该样式值为2em 表示 段落首行缩进两个字符
.s1{font-family:Arial}
.s2{font-family:Courier}
.s3{font-family:Verdana}
这是样式类型 就如下面的
#s{font-family:Courier} 用法: p id="s"/p
table{color:#ccc} 用法: tabletrtd/td/tr/table 作用与页面所有 table标签
去找些CSS 文档 学学看看吧 。不难的
可以换 {font-family:"你指定的字体"}
但是如果别人没有装你所指定的字体的话,还是会以系统默认字体显示
所以,要是换成一些很特殊的字体的话就没有必要了
font可以设置文本样式,粗细,大小,字体,不继承CSS的font属性。你可以多看看这方面的视频,比如说“HTML5 矢量绘图新功能- Canvas 基本用法”
直接从数据库提取的话,你判断一下就可以了,使用不同的样式
页面定义好样式,使用class就可以了
style
.top_1 {width:240px;height:40px;background-image:url(图片地址);background-repeat:no-repeat;br/fonct-size:14px;border:#666 1px solid;background-color:#ccc;padding-left:40px;br/padding-top:10px}
.top_2 {background-image:url(图片地址);background-repeat:no-repeat;}
.top_3 {background-image:url(图片地址);background-repeat:no-repeat;}
.top_4 {background-image:url(图片地址);background-repeat:no-repeat;}
ul {list-style:none;padding:0px;margin:0px}
li {font-size:12px;padding-left:10px;list-style:none;}
/style
div id=topbox
div class='top_1'记录1/div
div id="oTopBox"
li class=top_2记录2/li
li class=top_3记录3/li
li class=top_other记录4/li
/div
/div
新浪是序号图片是一个,所以只需定义三个样式,第一个直接用,第二、三个一个样式,其他是一个样式
JS改变从第二到第10个序号图片。
var obj = document.getElementById("oTopBox") //使用确定对象范围
var oItem = obj.getElementsByTagName("li") //返回一个数组
for (i=0;ioItem.length,i++)
{
switch (i)
{
// 在这里设置每个LI的背景,因为图片中每个序号的位置是固定的,只要设置background-position就可以了
case 1: oItem[i].style.backgroundPosition= "-528px -35px"; break;
case 2: ......
}
//如果图片放置位置有规律,新浪好像是在一列,这样左边距相同,提取高度就可以了,直接设置
oItem[i].style.backgroundPosition = "40px"+ i*20 +"px"; //这里的20好比是序号的高度
}
如果你不想在一个图里放需要,那就多定义样式,这样就不需要脚本了。
style type=text/css
.baidu{font-size:14px;line-height:1.5;}
a{color:#0000cc;}
/style
这种格式的Css是内联式的,写在网页htm代码head/head之间,
给你解释下:
.baidu{font-size:14px;line-height:1.5;}
这句的意思是定义一个名字为baidu的css样式,它的字号是14px,行距是1.5倍,比如span class=baidu文字内容.../span,其中的“文字内容...”就应用了这个样式。
a{color:#0000cc;}
这句定义了这个网页中所有的超级链接的默认颜色为#0000cc