CSS笔记(一)
CSS样式表作用在文件中、元素上有以下几种方式:
1、链接进来
2、导入进来
3、内部 CSS
4、行内样式,直接作用在某个元素上
注意:1和2是外部文件,1是link进来,2是import进来,但是某些浏览器貌似不支持import,所以大多link进来
3是写在head上
4是只能作用在某些元素上,不具备全局性
下面是链接和导入外部样式表的方法:
这是一个.css文件,就是我们的外部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>师然学习笔记</title>
<!--
描述:链接外部样式
-->
<!--
<link href="css/outer.css" rel="stylesheet" type="text/css">
-->
<!--
描述:导入外部样式
-->
<!--
<style type="text/css">
@import url("css/outer.css");
</style>
-->
</head>
<body>
<table>
<tr>
<td>师然学习H5</td>
</tr>
<tr>
<td>师然学习iOS</td>
</tr>
<tr>
<td>师然学习java</td>
</tr>
</table>
</body>
</html>
效果如下:
以下是内部样式表和行内样式表的代码
注意,如果内部样式和行内样式重叠,行内样式表级别更高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>师然学习笔记</title>
<!--
描述:这个是内部样式表
-->
<style type="text/css">
table{
background-color:#003366 ;
}
td{
background-color:#FF0F0F ;
font-family: "微软雅黑";
font-size: 30pt;
</style>
</head>
<body>
<!--
描述:行内样式表
-->
<div style="font-size: 18px;
color: #60c;
height:30px;
width: 200px;
border-top: 3px
solid #CCCCCC;
border-left: 3px solid #CCCCCC;
border-bottom: 3px solid #CCCCCC;
border-right: 3px solid #CCCCCC;">aaaa</div>
<hr/>
<table style="">
<tr>
<td style="
font-family: '楷体_GB2312';
font-size: 20pt;
text-shadow: -8px 6px 2px #333;">师然学习H5</td>
</tr>
<tr>
<td>师然学习iOS</td>
</tr>
<tr>
<td>师然学习java</td>
</tr>
</table>
</body>
</html>
效果如下: