CSS,叠样式表(英文全称:Cascading Style Sheets)是一种用来表现
HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS的类型
css的类型主要分为三种,分别是:行内样式表、内部样式表、外部样式表。
- 行内样式表: 即为在标签内部加入一个style属性的一种样式表。
- 内部样式表:
在HTML文件的标签里面加入一个标签里面写样式的一种样式表。 - 外部样式表 在外部新建一个CSS为后缀的文件 然后使用link标签进行引入。
例如:< link rel=“stylesheet” href="" >
此处 “rel”意为被链接文档为样式表。“href”此处填写样式表的保存路径。 - 在三种样式表中存在着一定的优先级
1.就近原则
即为离需要填写样式的标签越近,则优先表现样式。
2.执行顺序
从上至下依次执行同样的属性,后面执行的样式会覆盖前面执行的样式。
css中的选择器
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说 ,就是选择标签用的。(本例子为 h1标签的标签选择器)
语法格式为:
以上CSS做了两件事:
1.找到所有的h1标签。选择器 (选对人)。
2.设置这些标签的样式,比如颜色为红色(做对事) .
基本选择器主要分四种:标签选择器、类选择器、id选择器、通配符选择器
标签选择器
直接写上标签名 ,可以选择所有相同标签。
类选择器
如果想要差异化选择不同的标签,单独选-个或者某几个标签,可以使用类选择器。
类选择器在HTML中以class属性表示,在CSS中,类选择器以-一个点".” 号显示。
①类选择器使用".” (英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
②可以理解为给这个标签起了一个名字,来表示。
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名,尽量使用英文字母来表示。
⑤命名要有意义,尽量使别人-眼就知道这个类名的目的。
⑥命名规范:
要做到见名识意
不能以数字开头(class选择器必须以字母开头)
不能用中文字符
记忆口诀:样式点定义,结构类调用。一个或多个,开发最常用。
Id选择器:
id选择器和类选择器的区别
①类选择器( class )好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
②id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
③id 选择器和类选择器最大的不同在于使用次数上。
④类选择器在修改样式中用的最多,id选择器般用于页面唯性的元素上,经常和JavaScript 搭配使用。
通配符选择器
可以改变所有标签的样式用法: *{} (选择所有的标签)
四大选择器的优缺点:
!建议!:
●每个基础选择器都有使用场景,都需要掌握
●如果是修改样式,类选择器是使用最多的
*四大选择器的优先级:
优先级:
( id > class > 标签 > )
CSS字体属性:
直接输入1次#,并按下space后,将生成1级标题。
输入2次#,并按下space后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。
如何改变文本的样式
字体系列
CSS使用font-family属性定义文本的字体系列。如:
P { font-family: “微软雅黑”;}
div {font-family: Arial, “Microsoft Yahei”,“微软雅黑”; }
●各种字体之间必须使用英文状态下的逗号隔开
●一般情况下,如果有空格隔开的多个单词组成的字体加引号.
●尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
●最常见的几个字体: body {font-family. 'Microsoft YaHei" tahoma,aral,‘Hiragino Sans GB’;}
字体复合属性:
字体属性可以把以上文字样式综合来写,这样可以更节约代码:
body {
font: font-style font-weight font- size/line- height font- family;
}
●使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
●不需要设置的属性可以省略 (取默认值) , 但必须保留font-size和font-family属性,否则font属性将不起作用
背景样式
background-color 背景颜色
background-image 背景图片
属性: url()
background-repeat 背景图片平铺
属性:
repeat 默认 X Y都平铺
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat 不平铺
background-size 背景图片大小
- value1 value2 px 宽 高
- % % 宽高
- cover 等比放大 铺满全部区域为止
- contain 等比放大 直到背景图像的右边或者下边停止
颜色的表现形式
1.英文字符 (提前定义好的)
2.十六进制 (使用#开头)
3.rgb (三原色) 取值范围 0-255
4.rgba a是透明度
尺寸标签
width 宽度
height 高度
宽度和高度设置 目前只能使用在块级元素上 行级元素不起作用
复合选择器
什么是复合选择器?
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
●复合选择器可以更准确、更高效的选择目标元素(标签)
●复合选择器 是由两个或多个基础选择器,通过不同的方式组合而成的
●常用的复合选择器包括 :后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器
后代选择器又称为包含选择器,可以选择父元索里面子元索。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
上述语法表示选择元素1里面的所有元素2 (后代元素)。
例如:
●元素1和元素2中间用空格隔开
●元素1是父级,元素2是子级,最终选择的是元素2
●元素2 可以是儿子,也可以是孙子等,只要是元素1的后代即可
● 元素1和元素2可以是任意基础选择器
子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。 简单理解就是选亲儿子元素.
语法:
例如:
●元素1和元素2中间用大于号隔开
●元素1 是父级,元素2是子级,最终选择的是元素2
●元素2 必须是亲儿子,其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器
并集选择器
并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明。
井集选择器是各选择器通过英文逗号(, )连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
上述语法表示选择元素1和元素2。
例如:
●元素1和元素2中间用逗号隔开
●逗号可以理解为和的意思
●并集选择器通常用于集体声明
伪类选择器
连接伪类选择器
伪类选择器总结