样式表的使用

最新推荐文章于 2022-05-26 21:12:14 发布

i_belive_my_love

最新推荐文章于 2022-05-26 21:12:14 发布

阅读量258

点赞数

分类专栏： javaweb 文章标签： java web

本文链接：https://blog.csdn.net/i_belive_my_love/article/details/77985477

版权

javaweb 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

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>标签使用，格式为：

例如：

编写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}

使用：（css.css存放路径与html文件相同）

 <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>

其余同上（链接式）。

i_belive_my_love

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录