CSS简介
css是层叠样式表,也是一种标记语言,css主要用于设置html页面的文本内容设置(字体、大小、对齐方式)图片外形(宽度、边框样式等)以及版面的布局和外观显示样式。css可以美化HTML,使其更加漂亮,让页面布局更加简单
### 语法规范
使用HTML时,需要遵循一定的语法规范:
css规则由两个主yi构成:选择器以及一条或多条声明
- 选择器是用于指定css样式的html标签,花括号内是对该对象设置的具体样式
- 属性和是属性值以“键值对”的形式出现
- 属性是对指定的对象设置样式属性,例如字体大小,文本颜色等
- 属性和属性值之间用英文":"隔开
- 多个“键值对”之间用英文封号(;)进行区分
css的代码风格
1.样式格式书写
1. 紧凑格式
h3 {color:pink; font-size:20px;}
2. 展开格式
h3 {
color:pink;
font-size:20px;
}
样式大小写都支持(但是强烈推荐样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外)
空格规范
属性值前面,冒号后面,保留一个空格
选择器 (标签)和大括号中间保留空格
选择器的作用
1.找到所有的的H1标签,选择器(选对人)
2.设置这些标签的样式,比如颜色为红色(做对事)
选择器的分类
分为基础选择器和符合选择器两大类:
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、id选择器、通配符选择器
基础选择器
1.1标签选择器
是指用HTML为标签作为选择器,按标签名分类,为页面中能否的某一类标签指定统一的样式
语法
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
作用:可以把某一类标签全部选择出来,比如<p>类等
优点:能快速为页面中同类型的标签统一设置样式
类选择器
差异化选择不同标签,单独选一个或者几个标签,可以使用类选择器
语法
.类名 {
属性1: 属性值1;
}
例如,将所有拥有red类的HTML元素均为红色
.red {
color:red;
}
结构需要用class来调用class类的意思
<div class="red">变红色</div>
类选择器在HTML中以class属性表示,在css中以一个.显示
- 类选择器使用“.”(英文点号)进行表示,后面紧跟类名(自定义,我们自己命名的)
- 可以理解为给标签起了一个名字,来表示
- 长名称或者词组可以使用中横线来为选择器命名。
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示
- 命名要有意义,尽量使别人一眼就知道这个类名的目
多类名:各个类名中间用空格隔开,就是给某个标签添加了多个类,这个婊气啊吗可以分别具备有这些类名的样式
<div class="red font "> </div>
可以调用多个类,用空格隔开
id选择器
可以为标有特定id的html元素指定特定的样式
HTML元素以id属性来设置id选择器,css中id选择器以"#"来定义。
#id名 {
属性1:属性值1;
}
例如,将id为nav元素中的内容设置为红色
#nav{
color:red;
}
注意:id属性只能在每个html文档中出现一次,口诀:样式#定义 结构id调用,别人切勿使用
通配符选择器
css中,通配符选择器使用*定义,他表示选取页面中所有元素(标签)
语法:
* {
属性1: 属性值1;
}
通配符选择器不需要调用,自动就给所有的元素使用样式(一般特殊情况才使用)
选择器的一个总结图’