CSS四种形式
CSS的四种使用方式:
1 、链接外部样式文件
2 、导入外部样式
3 、使用内部样式定义
4 、使用行内样式
1. 链接外部样式表, 就是把样式表保存为一个样式表文件, 然后在页面中用< link rel= "stylesheet" type= "text/css" href= "*.css" > 链接这个样式表文件.
2. 内部样式表, 就是把样式表放到页面的< head> 区里.
3. 导入外部样式表, 用@import, 在< head> 与< / head> < style type= "text/css" >
< ! --
@import "*.css"
-- >
< / style>
4. 内嵌样式, 就是在标签内写入style= "" , 比如: < td style= "border-left:#cccccc" > .
1 、链接外部css样式
< link href= "outer.css" rel= "stylesheet" type= "text/css" / >
< ! DOCTYPE html>
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html;charest=utf-8" / >
< title> 链接外部css样式< / title>
< link href= "outer.css" rel= "stylesheet" type= "text/css" / >
< / head>
< body>
< table class = "table" >
< tr>
< td> AAA< / td>
< / tr>
< tr>
< td> BBB< / td>
< / tr>
< tr>
< td> CCC< / td>
< / tr>
< / table>
< / body>
< / html>
. table{
background- color: #003366 ;
width: 400 px;
}
td{
background- color: #fff;
font- family: "楷体_GB2312" ;
font- size: 20 pt;
text- shadow: - 8 px 6 px 2 px #333 ;
}
text- shadow: 用于连接一个或多个阴影文本。指定每2 或3 个长度值和一个可选的颜色值用逗号分隔开。
四个参数:
h- shadow:必需,水平阴影的位置,允许负值
v- shadow:必需,垂直阴影的位置,允许负值
blur:可选,模糊的距离
color:可选,阴影的颜色
2 、内部样式
通常不建议使用:
1 、无法做到css样式被其他html文档使用
2 、2 、会导致html文件过大,大量重复下载,导致网络负载加重
3 、3 、如果需要改变整个网站的风格时,需要大量修改,不利于工程化管理
< ! DOCTYPE html>
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=utf-8" >
< title> 内部样式单< / title>
< ! -- 通常不建议使用:1 、无法做到css样式被其他html文档使用2 、会导致html文件过大,大量重复下载,导致网络负载加重3 、如果需要改变整个网站的风格时,需要大量修改,不利于工程化管理-- >
< style type= "text/css" >
table{
background- color: #003366 ;
}
td{
background- color: #FFFFFF;
font- family: "楷体_GB2312" ;
font- size: 20 pt;
text- shadow: - 8 px 6 px 2 px #333 ;
}
. title{
font- size: 18 px;
color: #60 C;
height: 30 px;
width: 200 px;
border- top: 3 px solid #cccccc;
border- left: 3 px solid #cccccc;
border- bottom: 3 px solid #000000 ;
border- right: 3 px solid #000000 ;
}
< / style>
< / head>
< body>
< div class = "title" > 哈哈哈哈哈< / div> < hr/ >
< table>
< ! -- < table class = "table" > 此时上边是. table-- >
< tr>
< td> AAA< / td>
< / tr>
< tr>
< td> BBB< / td>
< / tr>
< tr>
< td> CCC< / td>
< / tr>
< / table>
< / body>
< / html>
3 、内联css样式
< ! DOCTYPE html>
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html;charset=utf-8" >
< title> 内联css样式< / title>
< / head>
< body>
< div style= "font- size: 20 px;
color: #60 C;
height: 30 px;
width: 200 px;
border- top: 3 px solid #CCCCCC;
border- left: 3 px solid #CCCCCC;
border- bottom: 3 px solid #000000 ;
border- right: 3 px solid #000000 ; ">
HAHAHAHAHAHAHA:
< / div> < hr/ >
< table style= "background-color: #0099bb;" >
< tr>
< td style= "background- color: #FFFFFF;
font- family: '楷体_GB2312' ;
font- size: 20 pt;
text- shadow: - 8 px 6 px 2 px #333 ; "> AAAAAAAA< / td>
< / tr>
< tr>
< td style= "background- color: #FFFFFF;
font- family: '楷体_GB2312' ;
font- size: 20 pt;
text- shadow: - 8 px 6 px 2 px #333 ; "> BBBBBBB< / td>
< td> CCCCCCCC< / td>
< / tr>
< / table>
< / body>
< / html>