CSS学习（一）

来源：互联网发布：linux怎么打开vi 编辑：程序博客网时间：2024/05/20 06:24

1. CSS简单介绍

css主要是修饰页面的样式和布局。为什么会选择css去做呢？css可以单独作为一个外部引入文件，对多个页面都可以进行修饰。

2. css的用法

selecor:要修饰的元素类型，譬如h1

declaration:修饰的样式内容,多个declaration要用';'号隔开，以分号结尾。

property:元素的属性

value:元素的值

eg1.

==================================

<html>

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>

#id1{color:blue;font-size:12px;}

</style>

<body>

<h1 id="id1">this is my first css test</h1>

</body>

</html>

==================================

class的使用：

eg3.

==================================

<html>

.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文件