1.css简介
css主要使用场景就是美化网页,布局页面的
(1)html局限性:只关注内容的语义
(2)css—网页的美容师:层叠样式表简称,css也是一种标记语言,主要用于设置html页面中的文本内容,图片的外形以及版面的布局和外观显示样式
(3)css语法规范:
css规则由两个主要的部分构成:选择器以及一条或多条声明
- 选择器用于指定css样式的HTML标签,花括号内是对该对象设置的具体样式
- 属性和属性值以键值对的形式出现
- 属性是对指定对象设置的样式属性,例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个键值对之间用英文“;”进行区分
(4)css代码风格
2.css基础选择器
(1)css选择器作用
选择器就是根据不同需求把不同标签选出来这就是选择器作用
(2)选择器分类
选择器分为基础选择器和复合选择器两大类
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
(3)标签选择器
是指用html标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的css样式
作用:标签选择器可以把某一类标签全部选择出来
优点:可以快速为页面中同类型的标签统一设置样式
缺点:不能设计差异化样式,只能选择选择全部的当前标签
(4)类选择器
如果想要差异化选择不同标签,单独选一个或者某几个标签,可以使用类选择器语法:结构需要用class属性来调用class类的意思
<div class='red'>变红色</div>
口诀:样式点定义,结构类调用,一个或多个,开发最常用
注意:
- 类选择器使用“.”进行标识,后面紧跟类名(自定义,我们自己命名的)
- 可以理解为给这个标签起了一个名字
- 长名称或词组可以使用中横线来为选择器命名
- 不要使用纯数字或中文命名,尽量使用英文命名
- 命名要有意义
类选择器——多类名
我们可以给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签,简单理解就是一个标签有多个名字
(1)多类名使用方式
<div class="red font20">亚瑟</div>
- 在class标签中写多个类名
- 多个类名中间必须用空格分开
(2)多类名开发使用场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后调用自己独有的类
- 从而节省css代码,统一修改也非常方便
(5)id选择器
id选择器可以为标有特定的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,css中id选择器以“#”来定义
#id名{
属性1: 属性值;
...
}
id选择器口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
id选择器和类选择器的区别:
- 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用
- id选择器好比人的身份证号码,是唯一的,不会重复
- id选择器和类选择器最大的不同在于使用次数上
- 类选择器在修改样式中使用的最多,id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用
(6)通配符选择器
在css中,通配符选择器用“*”定义,他表示选取页面中所有元素(标签)
语法:
*{
属性1:属性值1;
...
}
- 通配符选择器不需要调用,自动就给所有的元素使用样式
- 特殊情况才使用
3.css字体属性
css Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)
1.字体系列
css使用font-family属性定义文本的字体系列
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 尽可能使用系统默认自带字体,保证在任何用户浏览器中都能显示
- 最常见的字体:body{font-famly:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}
2.字体大小
css使用font-size属性定义字体大小
p {
font-size:20px;
}
- px(像素)大小是我们网页最常用的单位
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
- 可以给body指定整个页面文字的大小,但标题需要单独设置
3.字体粗细
css使用font-weight属性设置文本字体的粗细
属性值 | 描述 |
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100-900 | 400等同于normal,700等同于bold 注意这个数字后面不跟单位 |
4.文字样式
css使用font-style属性设置文本的风格
属性值 | 风格 |
normal | 默认值,浏览器会显示标准的字体样式 font-style:normal |
italic | 浏览器会显示斜体的字体样式 |
注意:平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体
5.字体的复合属性
字体属性可以把以上文字样式综合来写,这样更节约代码
body{
font:font-style font-weight font-size/line-height font-family;
}
- 使用font属性时,必须按照上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用