目录
1.css基础知识
1.1 css的基础概念
Css是层叠样式表(Cascading Style Sheets)的简称。
有时我们也会称之为CSS样式表或级联样式表
CSS是一种标记语言
CSS主要用于设置HTML页面中的文本内容(字体,大小,对齐方式等)、图片的外形(宽,边框样式,边距等)以及版面的布局和外观相似样式。
简单来说:CSS可以美化HTML,让html更加漂亮,让页面布局更加简单。
总结:
1.Html主要做结构,显示元素内容。
2.css美化html,布局网页。
3.Css最大价值:让html专注于结构呈现,样式交给css,实现结构与样式相分离。
1.2 css的语法规范
css的规则主要由:选择器以及一条或者多条声明组成
注意:
1.选择器适用于指定CSS样式的Html标签,花括号内是对该项目设置具体的样式
2.属性和属性值以“键值对”的形式出现
3.属性是对指定的对象设置的样式属性 ,例如字体大小,问题颜色等
4.属性和属性值直接可以用英文“:”分开
5.多个键值对之间用“;”进行结尾
1.3 css的样式风格
(1)紧凑格式
(2)展开格式
(3)空格规范
属性值前面,冒号后面,保留一个空格
选择器(标签)和大括号中间保留一个空格
2.CSS选择器
2.1 css选择器基础知识
选择器就是根据不同的需求把不同的标签选出来。
选择器分为:
基础选择器 由单个选择器组成的包括:
标签选择器 : 可以把某一类标签全部选择出来
类选择器 : 可以差异化选择不同的标签,单独选一个或者多个
id选择器:
2.2类选择器知识点
语法:
结构需要class属性来调用class的意思
口诀:样式点定义,结构类调用,一个或多个,开发最常用
注意:
(1)类选择器使用“.”(英文点号)进行标识,后面紧跟着类名(自定义,我们自己命名)
(2)可以理解为自己给标签起一个名字,来表示
(3)长名字或词组可以使用中横线来为选择器命名
(4)不要使用纯数字,中文等命名,尽量使用英文字母来表示
2.3 类选择器的多类名
1.多类名的使用方式
(1)在标签class属性中写多个类名
(2)多个类名必须用空格隔开
(3)这些标签就可以分别具有这些类名的样式
2.多类名在开发中的使用场景
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面
(2)这些标签都可以调用这个公共的类,然后再调用自己独有的类
(3)节省CSS代码,统一修改方便
2.4 id选择器
id选择器可以为标有特定id的html元素指定特定的样式
html元素以id属性来设置id选择器,css中的id选择器以"#"来定义
口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
2.5 id选择器和类选择器的区别
(1)类选择器好比人名,一个人可以有多个名字,同时一个名字可以被多个人使用。
(2)id选择器好比人的身份证号码,全国唯一,不能重复。
(3)id选择器和类选择器最大的不同在于使用次数上
(4)类选择器在修改样式中用的最多,id选择器一般用在页面的唯一性元素上,经常和Js搭配使用。
2.6 通配符选择器
在css中,通配符选择器使用“*”定义,它表示选取页面中所以元素(标签)
3.选择器总结