CSS基础学习笔记

css注释:

/*css没有单行注释符*/

引用方式

内嵌式

1
2
3
4
5
<head>
<style type="text/css">
选择器 {属性1:属性值1;属性2:属性值2;}
</style>
</head>

浏览器是从上到下解析代码的,把CSS代码放在头部便于提前被加载和解析

内嵌式CSS只对所在的HTML页面有效,对于一个网站来说,不建议使用这种方式

链入式

1
2
3
<head>
<link href="css文件路径" type="text/css" rel="stylesheet">
</head>

同一个css文件可被多个html页面链接使用,一个html页面也可以链接多个css文件

选择器

标记选择器

所有HTML标记都可以作为标记选择器的标记名

语法:

标记名 {属性名:属性值}
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
p {color:red;}
</style>
</head>
<body>
<p>hello</p>
</body>
</html>

类选择器

语法:

.类名 {属性名:属性值;}

其中,类名在标签中用class标记

id选择器

语法:

#id名 {属性名:属性值;}

其中,id名在标签中用id标记

通配符选择器

语法:

* {属性名:属性值}

它是所有选择器中作用范围最广的,能匹配页面中所有的元素

* {
    margin:0; /*定义外边距*/
    padding:0; /*定义内边距*/
}

上述css能够清除所有HTML标记的默认边距