css学习

---

前言

css 英文全称【cascading style sheet】 层叠样式表

---

前端三层：HTML（结构层）、CSS（样式层）、JS（行为层）

一、行内样式

1.内联式

<p style="color:red;font-size:16px"></p>

2.嵌入式

<style type="text/css">
		span{
				color:red;
			}


</style>

注意属性结束后加分号；
3.外部式
使用链接格式

<link href="地址链接" rel="stylesheet" type="text/css"/>

二、选择器

css中的一种模式，用来选择网页中的标签添加样式
css分为基础选择器和高级选择器
基础选择器：标签选择器、id选择器、类选择器、通配符选择器
高级选择器：后代选择器、交集选择器、并集选择器

基础选择器

1.标签选择器

用常用标签名字作为选择器，使用后同名标签均会使用此属性。

p{
	color:red;//样式
}

2.id选择器

给标签赋予id属性

#id{							//#+添加的id名
		color:red;
}

3.class(类)选择器

赋予class属性，多个属性间用空格隔开

.cur{				//  . +添加的class名
	color:red;
}

<p class="cur"></p>

4.通配符选择器

清除元素默认间距

高级选择器

1.后代选择器

从祖先元素开始，从外到内寻找，从左到右写标签，用空格隔开。
可以省略一些祖先元素选择器，可以使用id/class选择器。
后代选择器作用于其所有后代。

div div ul li{			//div下的div下的ul中的所有li
		color:red;
}

2.交集选择器

被选中的标签，要同时符合多个基础选择器
一般标签选择器开头，类选择器紧邻,没有空格。

p.cur{		//表示既要是p标签，类也要是cur
	color:red;
}

3.并集选择器

基础选择器用，隔开，表示这些选择器一同添加样式。
可以结合其他选择器使用。

div p,div h1{ //表示p、h1标签同时添加样式
	color:red;
}

三、css特性

继承性

有些标签没有给他添加文字样式，却有某种样式，那是因为继承了其祖先元素的文字样式。

层叠性

如果网页中标签被多个选择器选中，添加样式，css通过一定手段，将最后一个选择器层叠，覆盖其他选择器。

css中，权重高的选择器会层叠掉权重低的选择器。
权重高低：
id选择器>类选择器>标签选择器>通配符选择器
同级选择器个数越多，权重越高
权重相同，选择后面的选择器

四、五大样式

1.文字、字体

1.color

颜色表示方式：
1.颜色英文
2.十六进制表示（例#FFFFFF）十六进制颜色汇总
3.rgb（red，green，blue）括号内数字为0~255的数字

2.font-size字体大小

默认大小16px
单位:
1.px => 像素
2.em => 继承祖先元素的几倍

3.font-family字体样式

微软雅黑、宋体、楷体…
可以设置多个字体，纯中文中后面的字体覆盖前面的字体，纯英文中，前面的字体优先级高。

4.line-height行高

默认居中，单位两种
1.像素
2.百分比
主要用于在盒子中垂直居中

5.font-weight加粗

属性值
1.纯数字100~700
2.英文单词：normal（正常，相当于数字400）、bold（加粗，相当于数字700）

6.font-style倾斜

font-style:italic;//文字倾斜

7.font复合样式

font：文字倾斜 加粗 字号/行高 “字体“；

8.文本样式

1.text-align对其方式
left、right、center
2.text-decoration线条修饰
none 无线
overline 上线
line-through 中线
underline 下线
3.text-indent文本缩进
控制首行缩进距离
单位
1.像素
2.em 多少个中文字符

2.盒模型

width、 height 、

3.背景图

background

1.

4.浮动

5.定位