入门css(个人笔记）

一、CSS开篇介绍

1、基本概念

css 层叠样式表 Cascading Style Sheets 网页的样式

2.基本写法和语法

选择器、样式属性名、样式属性值
选择器{
样式属性名：样式属性值；
样式属性名：样式属性值；
}
学习css主要是学习和掌握我们常用的css样式属性名和对性的属性值
选择器：用来匹配我们对应的标签的。目的是让css可以知道去修饰哪些标签内容

3.引入方式

	写法一  写在html里面的style标签之间。style一般放在head标签里面
	写法二  写在外部的css文件里面，然后通过link标签引入这个样式文件
	<link rel="stylesheet" href="style.css" />
	写法三	写在标签的style属性里面
一般使用第二种

行为、结构、表现分离
js html css

4.常用选择器

    标签选择器   标签名		所有对应标签
	统配选择器   *			所有标签元素
	class选择器 .class值		找到所有拥有该class值的标签
	id选择器     #id值		找到所有拥有该id值的标签

后代选择器
	选择器1 选择器2{样式描述}  	选择器1下的全部选择器2
子代选择器
	选择器1>选择器2{样式描述} 	只找儿子这一层里的选择器2
修饰选择器
	标签.class值		class为该值的标签

选择器1，选择器2{样式描述} 选择器1和选择器2

5.选择器的优先级

如果某个样式已经被前面的选择器定义了，后面又写了怎么办
优先级相同的情况下，后者会把前者覆盖

权重	
通配选择器 * 		0
标签选择器 标签名	1
class选择器			10
id选择器				100
内联样式(写在标签内)	1000
!important(写在某个具体属性值后面)		最高/无穷大

二、常用样式属性

css里面如何书写注释：/*注释内容*/

1.border 边框

值：宽度 xpx

类型 solid(实线)/dotted(原点虚线)/dashed(虚线) 默认solid
颜色 英文/#色号/rgb(a,b,c) 默认为黑色
定义方法：
多边定义：border：width type color
单边定义：border-left/right/top/bottom:width type color
多边属性定义：border-width/style/color：值
单边属性定义：border-left/right/top/bottom-width/style/color：值

border-radius：xpx；有弧度的边框 圆的半径

2.尺寸相关样式

width 宽度
height 高度
值：xpx %
如果值为%，参考的是父标签进行百分比计算
块元素：默认宽度是他所在父元素的宽度，默认独占一行
行内元素(b、i、s、span、u)：宽高无效！！！
行内块元素宽高有效

max-width/height 	最大宽度/高度
min-width/height	最小宽度/高度

3.字体相关css属性：

	font-size  字体大小		一般pc端，最小字体到12px
	font-family  字体	    font-family："";
	font-weight  字体加粗    值：normal bold(加粗) 数字 
	font-style  字体样式     值：italic(倾斜)

4.文本相关样式：

	color 			   	 设置字体颜色  			颜色单词、#色号、rgb(r,g,b)
	text-align 			 设置文本对齐方式 		center、left、right、justify(两端对齐)
	text-decoration  	 设置删除线   			none、line-through(<s>)
	text-transform 		 设置字母大小写 			uppercase(大写)\lowercase(小写)\capitalize(首字母大写)
	letter-spacing 		 设置字间距				xpx
	line-height 		 设置行高   				xpx
	white-spacing  		 控制换行				nowrap/normal
	overflow 			 超出隐藏				hidden
	text-overflow   	 显示省略号 				ellipsis

三、常用样式属性二

1.列表相关样式

list-style:none;		去除列表前面的点
list-style-type:		规定点的类型 circle(空心圆)、desc
list-style-image:url(); 自定义点的类型
list-style-position 	点放在外面还是里面

2.背景相关样式

background-color 设置背景色
background-image 设置背景图片
background-repeat 设置平铺 no-repeat(不平铺时虚线下无图片)、repeat-x(横向平铺)、repeat-y(纵向平铺)
background-size 背景图大小 px 百分比(100%只控制x 100% 100% 同时控制x、y) cover contain
background-position 背景图对齐方式 right top\left top\left bottom\right top\center center(默认靠齐左上角)

简写
background：blue url(img.jpg) center center no-repeat

3.表格相关样式

border-collapse 	 	 表格风格效果  		collapse(边框合并)、separate(默认分开)
vertical-align   		 单元格内容垂直方向   top、middle、bottom

4.轮廓、边框阴影

轮廓  outline
	outline：width style color
	outline-width  宽度
	outline-style  风格
	outline-color  颜色
边框阴影  box-shadow
	box-shadow:横向偏移 纵向偏移 阴影模糊距离 颜色(rgba(r,g,b,0.1透明度)) 内部inset\外部

5.隐藏和显示、透明、hover样式

display:none;  消失,浏览器中没有位置
	块元素 		独占一行		宽高有效  display:block;
	行内元素		一行里面		宽高无效	 display:inline;
	行内块元素	一行里面		宽高有效	 display:inline-block;（有间距，可以让font-size=0，空格占位）

显示和隐藏
visibility 保留位置，显示和隐藏 visible，hidden
opacity 透明度（0-1）

a的链接样式
	a:link  	鼠标没有点击的时候
	a:hover  	鼠标移动到上面的时候
	a:active   	鼠标点击的时候
	a:visited   鼠标点击之后，访问过 

所有标签都有hover的样式

四、常用样式属性三

1.浮动布局

浮动
	如何让块元素到一行，且宽高有效
	1.变成行内块元素 display:inline-block
	2.浮动：float：left\right\none;

	浮动的元素，其实在网页上是没有位置

存在问题：父元素丧失高度，后面内容会跟上来，导致布局混乱
解决方法：
方法一：给父元素加上 overflow：hidden；(溢出隐藏)
方法二：浮动的父元素后面加上一个空标签，这个空标签加上 clear：both；(清除两端浮动)缺陷：父元素还是没有高度
方法三：给父元素加上一个高度
overflow：hidden(隐藏）、auto(滚动条）
overflow-x：hidden、scroll
overflow-y：hidden\scroll
好处：可以解决浮动的元素，父元素没有高度的问题。可以让他随内容高度，自动撑起来

2.盒子模型

盒子模型    content-box   向外扩张
	一个标签的大小，到底由哪些部分组成
		content  内容
		padding  内边距		内容边框与盒子边框之间的距离，影响盒子大小
		margin   外边距		盒子在网页里和别人排版之间的间距，影响盒子位置
		border   线边框
	一个元素的大小=content+padding+border
	一个元素在网页中占据位置的大写=元素大小+margin
	
width、height属性规定了内容区大小，标签元素的大小会随padding、border的大小而变化
html标签很多都带有默认样式
	很多标签都有自带的margin和padding
	*{margin：0；padding：0；}
	
margin：值  			四边
margin：值1 值2 		上下 左右
margin：值1 auto   	上下外边距 水平居中
margin：值1 值2 值3  上 左右 下
margin：值1 值2 值3 值4 上 右 下 左（顺时针)
margin-left/right/top/bottom 各边

padding：值  			四边
padding：值1 值2 		上下 左右
padding：值1 值2 值3  上 左右 下
padding：值1 值2 值3 值4 上 右 下 左（顺时针)
padding-left/right/top/bottom 各边

3.怪异盒子模型

怪异盒子模型  border-box   向内压缩
	width,height = 元素大小 = content+border+padding
	
	box-sizing 	描述了盒子模型的类型，有一定的兼容问题

4.定位方式

定位：
	三个定位、两个判断、一个层级
三个定位：position 		left/right top/bottom
	固定定位  fixed     
	相对定位  relative
	绝对定位  absolute
两个判断：
	该元素定位后在网页中是否还有位置
	该元素定位相对于谁进行偏移
	
	固定定位fixed         没有了位置   参考body
	相对定位relative    	 依然有位值   参考自己原来的位置
	绝对定位absolute  	 没有了位置   参考父类中由内向外第一个含有定位的元素
一个层级：z-index
	层级高低问题

五、浏览器兼容问题

方法一：IE条件注释法
<!--[if lte IE 8]>
	<link rel="stylesheet" href="./css/style.css"/>
<![endif]-->
!不等于 lt小于 lte小于等于
方法二：css属性前缀法
方法三：选择器前缀法

六、补充

段落缩进：text-indent：2em；
圆弧边框：border-radius：xpx；有弧度的边框 圆的半径
最后一个li：li：last-child{}
给定：*{padding：0；margin：0；}