css基础汇总

1 css语法

选择器 {属性1：值1;
              属性2：值2
               ...;}

例如：
.c1 {500px;
	height:100px;
	background-color:#F00;}

2 css导入样式

代码块
1. 行内样式-->把css样式写到标签的style属性里
2. style标签中定义
3. 写在单独的css文件中，通过link标签导入
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />

3 css选择器

3-1 基本选择器

代码块
1. ID选择器      --> HTML标签都有唯一的ID
2. 类选择器      --> HTML标签可以设置class属性
3. 标签选择器    --> p,div,h1等等还有其它标签定义样式，对大范围使用
4. 通用选择器 *

3-2 组合选择器

代码块
1. div p    后代选择器（对后代所有div后面的p都生效）
2. div>p    儿子选择器（只对后代所有div后面的一层p生效）
3. div+p    毗邻选择器（对div同级的后面的p生效）
4. div~p    弟弟选择器 （对div同级的后面的p生效）
3和4有什么区别呢？

3-3 分组和嵌套

代码块
分组：（对分组的标签都生效，标签之间用逗号隔开）
div,p{
	color:#F00;}

嵌套：div.p

3-4 属性选择器

代码块
1. div[s14]              找到有s14这个属性的div标签
2. input[type='email']   找到type是email的input标签
<form>
邮箱：<input type="email" value="请输入邮箱"></input>
</form>

input[type="email"]{
	color:#F00;
	background-color:#CCC;}

3-5 伪类选择器

代码块
1. :hover     --> 鼠标移动到标签上时应用的样式
2. :focus     --> input标签获取焦点时应用的样式

3-6 伪元素选择器

代码块
p:before {    --> 在P标签内部的最前面追加一个内容
					content: "*";
					color: red;
				}
				p:after {     --> 在P标签内部的最后面追加一个内容
					
				}
				清除浮动：
				.clearfix:after{
					content: "";
					clear: both;
					display: block;
				}
		

4 CSS选择器的优先级

代码块
1. 样式名一样的话
				类似 变量覆盖 最后加载的那个样式生效
2. 样式名不一样
				根据 权重计算
				内联样式(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承(0)
3. 不讲道理的，强制
				!important

5 css属性

5-1 文字相关的属性

代码块
1. font-family: "字体1", "字体2", 
				2. font-size        字体大小
				3. font-weight		字体粗细
				4. color            字体颜色
					1. 英文的颜色名    red
					2. 16进制颜色代码  #FF0000
					3. RGB             rgb(255, 0, 0)
					4. rgba(255, 0, 0, 0.4) 0.4指的是不透明度

5-2 宽度和高度

代码块
1. width             宽
2. height			 高
					只有块儿级标签设置宽和高才有效 

5-3 背景background

background-color: red
background-image: url(...)

5-4 文本样式

代码块
1. 水平居中
					text-align: center
				2. 单行文本的垂直居中
					line-height=父标签的高度
				3. 文本装饰线
					text-decoration: none/under-line/over-line/line-through

5-5css的盒子模型

内容-->padding-->border-->margin

5-6 浮动

float: left/right
浮动的副作用：需要在自己后面清除浮动

5-7 定位

代码块
2. 绝对定位     --> 相对自己已经定位过的祖先标签
3. 固定定位     --> 相对于屏幕做定位

5-7 溢出

			overflow: hidden/scroll/auto

5-8 边框

			border: 1px solid red;
			border-radius: 50%

5-9 display

			1. block
			2. inline
			3. inline-block
			4. none