4、CSS核心属性

一、css文本属性

字体大小 font-size

		默认字体大小为16px
		最小字体为12ps
		单位：px是像素大小，单位还有em、rem、pt、vw、vh

字体颜色 color

		单词
		#6位数字，16进制颜色，＃后边前两位为红色色域，中间两位为绿色色域，后两位为蓝色色域，取值0-9，a- f ;

当每个色域的两个值都相同时，可以简写为三位。#00ff00一＃0f0
rgb (0-255,0-255,0-255）颜色，()内分别为红、绿、蓝三色域取值，取值范围为0-255

字体类型 font-family

		案例
			font-family:"狂草","楷体123","楷体";
		特点
			font-family后面可以跟多种字体，第一个能被识别则显示第一个，否则往后顺延，如果都不识别则显示默认字体
			字体类型需加""号，字体之间用,隔开

字体粗细 font - weight

字体风格 font - style

文本水平对齐方式 text - align

行高 line-height

文本修饰属性 text- decoration

		案例text-decoration: none;
		属性值
			overline上划线
			underline下划线
			line- through删除线
			none，取消文本修饰(一般用来取消a标签的默认样式)
	首行缩进 text - indent
	案例:text- indent:32px;
	特点
		1.仅对一个元素内的第一行文字生效。
		2.首行缩进支持负数。

补充

宽度width
高度height
特点
1.只有默认独占一行的元素，支持设置宽高。
2.默认独占一行的元素在设置宽高之前，默认宽度为100%， 默认高度由内容撑开。
3.宽度和高度需要带单位。

二、复写形式

一组属性的简写形式就是复写属性

		1. font 文字的复写属性
			结构: font :weight style size/line- height family;
			建议:不推荐不用，主要是不够灵活。
		2. list-style列表的复写属性

list- style:none;取消li的默认样式

三、边框属性 border

*1.复写形式

		border:边框宽度 边框线型 边框颜色 ;

2.单一属性

		border -width 边框宽度
		border-style 边框线型
		*solid 实线
		double 双线
		dashed 虚线
		dotted 点划线
		border -color 边框颜色

3.特点:边框加在元素宽高之外，会改变盒子整体大小。

4.边框的多参数应用

		边框的单一属性可以跟多个值
			一个值：上下左右四个方向的参数
			两个值：上下、 左右
			三个值：上、 左右、下
			四个值：上、右、下、左

*5.单一方向边框

		border- left 左边框
		border-right 右边框
		border - top 上边框
		border - bottom 下边框

四、背景属性 background

1. background-color 背景色

2. background- image :url() 背景图;

		特点
			1.背景图可以理解为元素身上的花纹
			2.当背景图比元素大时，默认会被裁切
			3.当背景图比元素小时，默认会平铺(其实不管有没有元素大，都会平铺)
			4.背景图会出现在背景色的上层，盖着背景色

3. background-repeat 背景图是否平铺

		属性值:
			repeat(默认值)  平铺
			no-repeat  不平铺
			repeat-x  x轴平铺
			repeat-y  y轴平铺

4. background - position 背景图定位

  1)形式  background-position:x y;
  2)特点
    第一个参数为X轴位移，正数向右，负数向左；第二个参数为Y轴位移，正数向下，负数向上
    关键值参数：右上 right bottom
    第二个参数可省略，省略后默认补全为center

5.background-size 背景图大小

  特点
      1)2个数值参数
      2)2个百分比参数
      3)两种写法都可以只写一个参数，等比例缩放
      4)属性值
        cover   等比缩放,撑满整个元素,多余部分会被裁减掉
        contain 等比缩放,不裁切,易留白

6.background-attachment 背景图固定

  属性
      fixed             背景图固定
      scroll(默认值)    背景图滚动
  特点:固定后,背景图的参照物为整个浏览器窗口

7.复写属性 background

  background:背景色 背景图 平铺 位置/大小 固定:
  带/的不能省略

五、浮动 float

1.属性值

  left
  right
  none

2.特点

  1)浮动元素半脱离文档流，元素本身脱离文档，但是文字不脱离文档
  2)在未浮动时独占一行的元素在浮动后元素多大，就占据多大空间
  3)浮动元素只能影响到其下边的元素，不会影响其上边的元素
  4)浮动元素会受到父元素边界的影响，放不下会换行
  5)浮动加给谁,谁的位置就会发生变化

3.建议：

同级元素要浮动都浮动，要不浮动都不浮动

4.浮动bug及解决方法：

父元素不写高度，高度由子元素撑开，这时候如果子元素浮动，父元素会失去高度，这种现象叫高度塌陷
解决：给父元素添加高度

6.PS量图：

  标尺CTRL+R(单位：英寸右键点击标尺改为像素)
  点击标尺拖拽辅助线
  矩形选框量宽高
  切（扣）图：框选后Ctrl+c，Ctrl+n，Ctrl+v，Ctrl+s