目录
- CSS语法规范及代码风格
- CSS基础选择器
一、CSS语法规范及代码风格
1.1CSS语法规范
CSS规则有两个主要的部分构成:选择器以及一条或多条声明。
- 选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分
所有的样式,都包含在<style>标签内,表示是样式表。一般写在</head>上方。如下:
<head>
<style>
h4{
color:blue;
font-size: 100px;
}
</style>
</head>
1.2CSS代码风格
1.2.1样式格式书写
推荐使用展开格式,更加直观,如下:
h3 {
color: pink;
font-size: 20px;
}
1.2.2样式大小写
推荐样式选择器、属性名、属性关键字全部使用小写字母,如1.2.1中的代码块。
1.2.3空格规范
属性值前面,冒号后面,保留一个空格;选择器(标签)和大括号中间保留空格。如1.2.1中的代码块。
二、CSS基础选择器
2.1选择器分类
选择器分为基础选择器和符合选择器两大类。基础选择器由单个选择器构成。包括:标签选择器、类选择器、id选择器和通配符选择器。
2.2标签选择器
标签选择器是指用HTML标签名词作为选择器,为页面中某一类标签指定统一的CSS样式。语法如下:
标签名 {
属性1: 属性值1;
属性2: 属性值2;
}
2.3类选择器
使用类选择器差异化选择不同的标签,就是不会像标签选择器一样全部选择。语法如下:
.类名 {
属性1: 属性值1;
属性2: 属性值2;
}
类选择器在HTML中以class属性表示,在CSS中,类选择器以"."显示。
可以给一个标签指定多个类名,从而达到更多的选择目的。使用方式如下:
<div class="red font20">小明</div>
在class里面写多个类名,之间用空格分开。
2.4 id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。
id选择器一般用于页面唯一性的元素上,经常和Javascript搭配使用。
语法如下:
#id名 {
属性1: 属性值1;
属性2: 属性值2;
}
2.5 通配符选择器
通配符用"*"定义,表示选取页面中所有元素,语法如下:
* {
属性1: 属性值1;
属性2: 属性值2;
}
通配符在特殊情况下才使用。