1.什么是CSS
- css的主要使用场景就是美化网页,布局页面的
- CSS是层叠样式表
- CSS也是一种标记语言
- CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式
- CSS让我们的网页更加丰富多彩,布局更加灵活自如。
2.CSS 规则
由两个主要的部分组成:选择器以及一条或多条声明
选择器是永固指定CSS样式的HTML标签,花括号以内是对该对象设置的具体样式
补充:
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分
3.CSS代码风格
1.样式格式书写
1)紧凑格式
2)展开格式
2.样式大小写
强烈推荐样式选择器、属性名、属性值关键字全部使用小写字母,特殊情况除外
3.空格规范
1)属性值前面,冒号后面,保留一个空格
2)选择器(标签)和大括号中间保留空格
4.CSS选择器
- 选择器分为基础选择器和复合选择器两大类
1.基础选择器
是由单个选择器组成的,包括:标签选择器、类选择器、id选择器和通配符选择器
(1)标签选择器(元素选择器)
指用HTML标签作为选择器,按标签名分类,为页面中某一类标签指定统一的CSS样式
语法:
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
…
}
(2)类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
类选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“."号显示
语法:
.类名 {
属性1:属性值1;
…
}
类选择器口诀:样式点定义 结构类(class)调用 一个或多个 开发最常用
(3)id选择器
HTML元素以id属性来设置id选择器,CSS中id选择器以”#“来定义
语法:
#id名 {
属性1:属性值1;
…
}
id选择器口诀:样式#定义,结构id调用,只能调用一次,别人切勿调用
id选择器和类选择器的区别
1》类选择器(class)好比人的名字,一个人可以有很多名字,同时一个名字也可以被多人使用
2》id选择器好比人的身份证号码,全国是唯一的,不得重复
3》id选择器和类选择器最大的不同在于使用次数上
4》类选择器在修改样式中用的最多,id选择器一般用于唯一性的元素上,经常和JavaScript搭配使用
(4)通配符选择器
在CSS中,通配符选择器使用”*“来定义,它表示选取页面中所有元素(标签)
语法:
* {
属性1;属性值1;
…
}
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用
5.CSS字体属性
1.Fonts(字体)
用于定义字体系列、大小、粗细、和文字样式(如斜体)
(1)字体系类
用font-family属性定义文本的字体系列
(2)字体大小
用font-size属性定义字体大小
语法:
p {
font-size: 20px;
}
- px(像素)大小是我们网页的最常用的单位
- 标题标签比较特殊,需要单独指定文字大小
(3)字体粗细
CSS使用font-weight属性设置文本字体的粗细
- normal 默认值(不加粗的)
- bold 定义粗体(加粗的)
范围:100-900
400等同于normal,而700等同于bold 注意这个数字后面不跟单位
让加粗标签(比如h和strong等)不加粗,或者其他标签加粗
实际开发时,我们更喜欢用数字表示加粗
(4)文字样式
CSS使用font-style属性设置文本的风格
- normal 默认值,浏览器会显示标准的字体样式font-style:normal;
- italic 浏览器会显示倾斜的字体样式
注意:平时我们很少给文字加倾斜体,反而要给斜体标签(em,i)改为不倾斜字体
6.文字复合属性
语法:
body {
font : font-style font-weight font-size/line-height font-family;
}
- 使用font属性时,必须按照上面语法格式中的顺序书写,不能跟换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用
CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1.文本颜色:color
基本语法:
div {
color:pink;
}
- 预定义颜色值:red、green、blue…
- 十六进制:#FF0000,#FF6600…
- RGB代码:rgb(255,0,0)或rgb(100%,0%,0%)
开发中最常用的是十六进制
2.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
基本语法:
div {
text-align:center;
}
- left 左对齐(默认值)
- right 右对齐
- center 局中对齐
3.装饰文本
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等。
基本语法:
div {
text-decoration:underline;
}
- none 默认,没有装饰线(最常用)
- underline 下划线,链接a自带下划线(常用)
- overline 上划线(几乎不用)
- line-through 删除线(不常用)
4.文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
div {
text-indent:10px;
}
p {
text-indent: 2em;
}
- em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
- 2em是缩进当前元素2个文字大小的距离。
5.行间距
line-height属性用于设置行间的距离(行高),可以控制文字与文字之间的距离;
p {
line-height:26px;
}
行间距=上间距+下间距+文本高度