css部分知识总结

CSS总结

css全称：层叠样式表（cascading style sheets）

一般写法 ： 选择器 {属性:属性值;}
属性值后面的分号一定不能掉

css写法大致分为三种

1.内联样式表

注意点：
1.在head标签里面添加style标签
2.在H5以前添加style标签需要添加type属性并声明<style type=“text/css”></style>,但是在H5可以省略类型直接写style标签
3.在style标签里面设置属性时，是以键值对的方式声明：即 属性:“属性值”;
例如：给body设置一个黑色的背景颜色
body {
 background-color:black;
}
4.如果语法错误后面的样式将都不会执行

2.外部样式表

1.在html文件title标签下声明引入外部样式表，引入方式使用link标签
例：<link rel=“stylesheet” type=“text/css” href=“index.css”/>
2.属性设置方式和内联样式表相同

3.行内样式

1.行内样式直接写在标签前面
例： 在p标签上加一个字体为20px的样式
<p style=“font-style:20px”></p>
2.行内元素的权重均大于其他两种方式

属性

1.字体属性

• color:“red”;======改变字体的颜色 transparent 透明色
• font-size:“值”======改变字体大小
• font-weight:“值”======改变字体粗细
• font-style:“值”======改变字体的样式
• font-family:“值”======设置字体
• text-indent:“值”======首行缩进
• text-decoration:underline; ======下划线
• letter-spacing:(n)px；========字间距

大部分的文本属性都会被继承，但是盒子模型不会被继承

选择器

-	标签选择器     直接使用标签名选择对象
-	类选择器		  为标签添加一个class类名
				命名规则：
					- 只能用英文字母和数字
					- 特殊符号可以使用'_'和'-'
				使用规则:
					- 在样式表里面使用   方式 .类选择器名
-	ID选择器		为标签添加一个id名，且这个id名是唯一的
				命名规则：
					-	和类选择器相同
					-	id选择器必须是唯一的，不可重复
				使用方法：
					- 在标签中设置 id 属性值 
						id="value";
					- 在样式表中使用   #id属性值
- 通配符选择器   "*"
			代表选择所有的标签

选择器权重问题

一般使用4位数字来表示权重
	** 标签代表0,0,0,1
	** 类选择器代表 0,0,1,0
	** id选择器代表 0,1,0,0
	** 通配符选择器代表 0,0,0,0
	** 行内样式 1,0,0,0
	** !important   无穷大
各个权重之间不存在进位，10个标签选择器叠加，样式权重也不大于1个类选择器
权重相同的时候后面的样式覆盖前面的样式
权重越大优先级越高

浮动 float

常用属性值：
		1.left 左浮动
		2.right 右浮动
		3.none 不浮动
特点：
		1.会飘出文档流
		2.左右排列
		3.宽度会由内容撑开，可以支持宽高
		4.浮动可以盖住元素的类型(inline-block,inline,block)
		5.元素只要添加了浮动属性就支持宽高
浮动居中:使用定位

CSS选择器

后代选择器

- 选择器名 选择器名 {};  中间使用空格隔开

边框属性 border

1.border-color:“颜色”; 设置边框颜色
2.border-radius:""; 设置边框的圆角
如果盒子宽高相同，设置border-radius:50%; ，可以将盒子变成一个正圆
如果只需要设置一个角落为圆角，次属性可以设置4个值分别是：左上 右上 右下 坐下
3.使用边框画出一个三角形
>>3.1 盒子宽高为0；
>>3.2 哪边需要三角形就把另外三边设置为透明色transparent
4.连写方式：border:1px solid #CCC; 设置一个1像素的灰色边框

文字超出不换行添加如下代码

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
谷歌浏览器字体默认大小：默认16px  现阶段最小字体支持8px

盒子阴影 box-shadow

1.总共有5个值
- 控制盒子阴影左右位置
- 控制盒子阴影上下位置
- 控制阴影的模糊程度
- 控制阴影的大小
- 控制阴影的颜色
默认阴影是向外延伸，可以控制阴影向内延伸，在所有属性值后面加"inset"

文字阴影 text-shadow

和盒子阴影(box-shadow)一样，但是不能设置阴影大小属性

背景图 background-image

1.background-images:url();   设置背景图
2.background-repeat:no-repeat/repeat-x/repeat-y  设置背景平铺，分别代表不平铺、
沿x轴平铺、沿y轴平铺，默认是平铺
3.background-position:x y; 设置背景位置，y不写代表上下居中，两个值可以给固定单位
，也可以给英文单词 left top bottom right center
4.background-size:宽 高； 设置背景图片的大小
	由于此属性是CSS3的属性，IE可能会出现兼容性问题
	cover 覆盖填满整个盒子，图片可能会被裁切。但是不会变形
	contain 保证图片完整性的前提下，最大限度的显示图片
5.background-color   设置背景颜色
6.background:linear-gradient();线性渐变，也属于css3的属性，且如果添加兼容前缀，需
加在linera前面