css入门学习day01笔记

css选择器及css规则

一、思维脑图(css)

二、选择器

1、核心选择器

1. 标签选择器

例如:      div {}         //选中所有<div>,为他们应用一些规则

2. id选择器

例如:     .second {}      //选中class为second的元素

3. 逗号选择器

例如:      div,#one {}    //选中div和one的元素

4. 组合选择器

例如:     div#one {}      //选中所有div中id为one的元素

5. 普遍选择器

例如:     *	             //不单独使用,效率会降低;用于配合其他选择器使用

2、层次选择器

1. 子元素选择器

例如：    .nav > ul > li {}          //.nav下的直接子元素ul下的直接子元素li中加入规则

2. 后代选择器

例如 :   .nav li {}		            //nav下面的所有li

3. 下一个兄弟选择器

例如：   .products > li.ios + *{}	//代表li.ios之后的下一个

4. 之后所有兄弟选择

例如：   .products > li.ios ~ *{}	//代表li.ios之后的所有

3、属性选择器/过滤器

一般用于表单元素，格式为：selector[]

• input[placeholder] //选中所有input
• input[type=text] //选中所有单行文本框
• input[type^=t] //选中所有t开头的
• input[type$=t] //选中所有t结尾的
• input[type*=t] //选中所有包含t的

4、伪类选择器/过滤器

与状态相关

1. :link //a标签还未被访问
2. :hover //光标悬浮到元素上才会被选中
3. :active //a标签激活
4. :visited //a标签访问过

与状态相关

1. :first-child //判断li是不是第一个孩子
2. :last-child //判断li是不是最后一个孩子
3. :nth-child(v) //判断li是第几个
   注：v 为数字，公式，关键字(如:3、even偶数、odd奇数、2n+1)
4. :first-of-type //这一种类型里的第一个
5. :last-of-type //这一种类型里的最后一个
6. :nth-of-type //这一种类型里的第几个

5、伪元素选择器

• ::after
  例如：.nav > ul::after{} //在.nav下的直接子元素ul里面的最后面插入一个节点

• ::before
  例如： .nav > ul::before{} // 在.nav下的直接子元素ul里面的最前面插入一个节点
  副作用：在dom节点中产生一个新节点

• 需要了解

   ::first-letter	   句首
   ::first-line	   首行
   ::selection	   选中的
  

三、思维脑图(css规则)

四、规则

1、 字体样式

• 字体样式在css中可以被继承

font-family:"微软雅黑","Microsoft YaHei","宋体",serif;
font-size:12px; //字体大小
注:浏览器默认字体为16px
font-weight:bold; //字体粗细（normal、bolder、100~900）
font-style:normal; //是否开启斜体（italic）
line-height:2em; //行高【文本垂直居中】
font:style weight size/line-height family;

例如：italic bold 12px/2em ‘Microsoft YaHei’,serif

网络字体

• 它主要用于字体图标库（在这里推荐iconfont/fontawesome）

使用步骤：
1) 在iconfont网站中选择图标，加入项目，产生代码
2) 将产生的代码在html中通过link引用如http://at.alicdn.com/t/font_1328534_f3dyyeuoew.css
3) 再应用css中定义好的类，来使用对应的图标

2、文本样式

• 文本样式与字体样式一样可以被继承。
  color:#333; //字体颜色
text-align:center //【文本水平居中】
text-decoration-line //underline 、line-through 、overline 、none
text-decoration-style //solid 、dotted 、double 、dashed 、wavy 、...
text-decoration-color //颜色
text-decoration:none; //字体装饰
text-indent:2em; //文本缩进

   text-shadow:
   
          >  例如：text-shadow:12px 2px 3px #ccc;
  

3、列表样式

list-style-type //circle 、square 、...
list-style-image //url('')
list-style-position //outside 、inside
list-style:none;

4、盒子样式(盒子，块元素)

width
height
margin-top
margin-right
margin-bottom
margin-left

margin

		margin:10px;				上右下左	
		margin:0 10px; 				上下为0，左右10px
		margin:0 5px 10px; 			上0，左右5px，下10px
		margin:0 5px 10px 15px; 	上右下左	

border-top

		border-top-style 	边框线类型
		border-top-width 	边框宽度
		border-top-color 	边框线颜色

border-right

	    border-right-style 	边框线类型
		border-right-width 	边框宽度
		border-right-color 	边框线颜色

border-bottom

		border-bottom-style 	边框线类型
		border-bottom-width 	边框宽度
		border-bottom-color 	边框线颜色

border-left

	    border-left-style 	边框线类型
		border-left-width 	边框宽度
		border-left-color 	边框线颜色

border: 1px solid #ededed; 【*】

        border-color
		border-style
		border-width

padding

		padding-top
		padding-right
		padding-bottom
		padding-left

---------- box-shadow: 5px 5px 10px #ccc;
---------- box-shadow: inset 0 0 3px lightblue;

border-radius //圆角半径

background-origin 背景铺设的起点

		border-box 		边框下
		padding-box 	内边距下
		content-box 	内容下

background-image //背景图片

		url

background-repeat //背景重复方式

	 repeat-x
	 repeat-y
	 no-repeat

background-color //背景颜色

		颜色

background-position //背景位置

		center
		top left
		10px 20px

background-clip //背景裁切方式

		border-box 		边框下
		padding-box 	内边距下
		content-box 	内容下

background //速写

		background:url('') no-repeat center;
		background-size:cover;
	=>
		background:center/cover padding-box url('') no-repeat ;

一个盒子的组成：

外边距 --------------- margin
边框 -------------------border
内边距 --------------- padding
内容 -------------------存放子元素或者内容的区域

盒子所占面积？
盒子存放内容的区域为多大?

盒子计算方式:

box-sizing:content-box;内容盒子（传统盒子）
-----------width = 内容宽
---------- height = 内容高
-----------所占的宽 = border + padding + width
-----------所占的高 = border + padding + height

box-sizing:border-box;边框盒子（怪异盒子）
-----------width = 边框以内所有的和
-----------width = border + padding + 内容宽

5、单位

颜色

		#333333 	=> #333
		#ededed
		rgb(0,0,0) 	=>#000000
		rgba(0,0,0,0.3)
		渐变

长度
-----绝对单位

    `px`

-----相对单位

em 		当前元素上的font-size的值
		font-size:12px ;
		1em = 12px;
		2em = 24px;
rem
		html{font-size:14px}
		1rem = 14px;
%
		width 相对于父元素
		border-radius 	相对于当前元素的width
					...

-----关键

		    center
			border-box
			content-box

-----函数

			url()
			rgb()
			rgba()

6. 选择器优先级

7. 布局

	1.浮动布局
	2.定位布局