样式表的使用
程序员文章站
2022-04-16 23:36:04
...
1.内行式：不需要定义选择器，直接利用style属性直接为元素设置样式，只对当前标签起作用。
例如：<p style="color:blue;font-size:20px;text-align:center>所要显示内容</p>
2.内嵌式：需要定义选择器，利用<style></style>标签对，将样式表（选择器）定义在<head></head>标签对之间，内嵌样式表的作用范围是该html文档。
例如：
定义样式表：
<style type="text/css">
#title{color:#FF7B0B;font-size=20px;font-width=bod;text-align:center;}
#i{color:blue;}
table{text-align:left;}
#t{text-align:right;}
</style><tr><td id="title" colspan="3" align="center" height="40"><h2>填写注册信息</h2></td></tr> <!--通过id使用--><td id="i">用户名由字母开头，后跟字母，数字或者下划线</td>3.连接式：先编写css样式表文档，后缀名为.css，然后在<head></head>标签对之间通过<link>标签使用，格式为：
<link href="css样式表文档所在路径(绝对路径/相对路径)" rel="stylesheet" text="text/css">
例如：
编写css样式表文档css.css：
#title{color:#FF7B0B;font-size=20px;font-width=bod;text-align:center;}
#i{color:blue;}
table{text-align:left;}
#t{text-align:right} <link href="css.css" rel="stylesheet" type="text/css"><body>
<form action="">
<table border="0" width="750">
<tr><td id="title" colspan="3" align="center" height="40"><h2>填写注册信息</h2></td></tr>
<tr><td align="right">用户名:*</td>
<td><input type="text" name="username"></td>
<td id="i">用户名由字母开头，后跟字母，数字或者下划线</td>
</tr>
<tr><td align="right">密码:*</td>
<td><input type="password" name="userpw"></td>
<td id="i">设置登录密码，至少6位</td>
</tr>
<tr><td align="right">确认密码:*</td>
<td><input type="password"></td>
<td id="i">请再次输入你的密码进行确认</td>
</tr>
<tr><td align="right">性别:*</td>
<td><input type="radio" name="sexname" value="男" checked>男
<input type="radio" name="sexname" value="女">女
</td><td id="i">请选择您的性别</td>
<tr>
<tr><td align="right">邮箱地址:*</td>
<td><input type="text"></td>
<td id="i">请填写您的常用的邮箱</td>
<tr>
<tr><td align="right">基本情况:*</td>
<td colspan="2"><textarea rows="5" cols="50"></textarea></td>
<tr>
<tr><td colspan="3" align="center" height="40" id="i"><input type="checkbox">
我已仔细阅读并同意接受用户使用协议</td>
</tr>
<tr><td colspan="3" align="center"><input type="submit" value=确认>
<input type="reset" value="取消">
</td>
</tr>
</table>
</form>
</body>4.导入式：使用方法类似链接式，不同在于在css样式表在<head></head>之间，<style></style>之内通过import导入
格式：<style type="text/css">@import url(css样式表路径名)</style>
例如：
<style type="text/css">@import url(css.css)</style>