1. CSS简单介绍
css主要是修饰页面的样式和布局。为什么会选择css去做呢?css可以单独作为一个外部引入文件,对多个页面都可以进行修饰。
2. css的用法
selecor:要修饰的元素类型,譬如h1
declaration:修饰的样式内容,多个declaration要用';'号隔开,以分号结尾。
property:元素的属性
value:元素的值
eg1.
==================================
<html>
<head></head>
<stlyle>
h1{color:blue;font-size:12px;}
</style>
<body>
<h1>this is my first css test</h1>
</body>
</html>
==================================
该文作用的h1标签将会按照样式中的颜色和字体大小。
3. css中id和class
如果在文件中给某一些元素指定id(class)值,样式修饰时即可根据id(class)来做统一修饰。
eg2.
==================================
<html>
<head></head>
<stlyle>
#id1{color:blue;font-size:12px;}
</style>
<body>
<h1 id="id1">this is my first css test</h1>
</body>
</html>
==================================
class的使用:
eg3.
==================================
<html>
<head></head>
<stlyle>
.class1{color:blue;font-size:12px;} //针对所有元素中出现的class1起作用
h2.class1{color:red;font-size:12px;} //针对某一个元素下的class起作用
</style>
<body>
<h1 class="class1">this is my secode css test</h1>
<h2 class="class1">this is my third css test</h2>
</body>
</html>
==================================
4. 如何引用CSS
引用CSS有三种途径:
<1> 直接作用标签元素
参考以上。
<2> 内嵌引入CSS样式
参考以上,可以放在<head> <body>等位置
<3> 外部引入CSS文件
<link rel="stylesheet" type="text/css" href="mystyle.css" />