【CSS】CSS 层叠样式表 ③ ( CSS 引入方式

百科大全

更新时间：2025-10-05 10:53:4153

admin管理员组
文章数量:1794759

【CSS】CSS 层叠样式表 ③ ( CSS 引入方式

文章目录

一、CSS 引入方式 - 外链式
- 1、外链式 CSS 语法
- 2、CSS 代码
- 3、HTML 代码
二、CSS 样式规则

一、CSS 引入方式 - 外链式

1、外链式 CSS 语法

将 CSS 代码写在外部的 xxx.css 外部样式表文件中 , 然后在 HTML 的 head 标签中 , 使用

导入到 HTML 文件中 , 这样该 css 外部样式表可以被多个 HTML 文件使用 , 实现了样式共享 ;

在 head 中通过 link 标签引入 CSS 样式 , 该标签是单标签 , 需要在标签中设置如下属性 :

rel : 设置当前 HTML 文件与被链接的 CSS 文件之间的关系 , stylesheet 值表示被链接的文件是 CSS 脚本 ;
type : 设置被链接文件的类型 , text/css 值表示链接的外部文件是 CSS 文件 , 默认可以省略 ;
href : 设置外部文件的路径 , 相对路径或绝对路径 ;

2、CSS 代码

CSS 代码 :

h3 { color: blue; font-size:20px; } td { color: green; font-size:15px; } option { color: purple; font-size:15px; }

3、HTML 代码

引入 CSS 脚本的核心代码在 head 标签中 ,

HTML 完整代码 :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>用户注册</title> <base target="_blank"/> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>  <table width="600" align="center" border="1">  <caption><h3>用户注册信</h3></caption>  <tr>  <td>性别</td> <td>  <input type="radio" name="sex" checked="checked" /> <img src="images/man.jpg" /> 男 <input type="radio" name="sex" /> <img src="images/women.jpg" /> 女 </td> </tr>  <tr>  <td>籍贯</td> <td>   <select> <option>--请选择省--</option> <option>河北省</option> <option>山东省</option> <option>河南省</option> <option>山西省</option> </select>  <select> <option>--请选择市--</option> <option>衡水市</option> <option>邢台市</option> <option>保定市</option> <option>邯郸市</option> </select>  <select> <option>--请选择县--</option> <option>冀州区</option> <option>枣强市</option> <option>深州市</option> <option>桃城区</option> </select> </td> </tr>  <tr> <td>邮箱</td> <td> <input type="text" value="请输入邮箱"> </td> </tr>  <tr> <td>关注领域</td> <td> <input type="checkbox" name="like1"> 移动开发 <input type="checkbox" name="like2"> 后端开发 <input type="checkbox" name="like3"> 前端开发 </td> </tr>  <tr> <td>个人简介</td> <td> <textarea cols="50" rows="5"> </textarea> </td> </tr>  <tr> <td></td> <td> <input type="image" src="images/btn.png" /> </td> </tr>  <tr> <td></td> <td> <a href="www.baidu/">已有账号，立即登录</a> </td> </tr> </table> </body> </html>

二、CSS 样式规则

CSS 样式规则 :

选择器 { 属性名称1:属性值1; 属性名称2:属性值2; }

选择器设置 CSS 作用于哪些 HTML 标签 ;
具体的 CSS 样式以键值对方式进行设置 ;
键值对格式 : 键和值之间使用冒号隔开 , 每个键值对以分号结尾 ;

以

h3 { color: blue; font-size:20px; }

样式为例 :

h3 是选择器 ;
color: blue; 设置的是 CSS 样式键值对 , 字体颜色蓝色 , 键值对之间使用冒号隔开 , 以分号结尾 ;

本文标签：样式表方式 css

版权声明：本文标题：【CSS】CSS 层叠样式表 ③ ( CSS 引入方式内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686973990a124255.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。