CSS 基础

选择器

1 常用选择器
---------------------------------------------------------------------------
  1 *{}   选中所有元素
  2 div{}   所有div元素
  3 .hh{}   所有 hh类名
  4 #hh{}   id名
  5 div span{}   后代选择器
  6 div>span{}   父子选择器
  7 .hh,.kk{}   多选选择器
---------------------------------------------------------------------------

2 伪类选择器
---------------------------------------------------------------------------
  1 a:link{}   -->选择未被访问时的链接样式
  2 a:visited{}   -->选择已被访问过的链接样式
  3 a:hover{}     -->选择鼠标指针位于其上时的链接样式
  4 a:active{}    -->选择活动链接(鼠标按下未弹起时的链接)  注意设置a链接的时候, 要按照这个顺序设置
  5 input:focus{}  --> 设置 input 聚焦时的样式
---------------------------------------------------------------------------

3 结构伪类选择器
---------------------------------------------------------------------------
  1 div:first-child{}   --> 同级元素中的第一个元素, 且只能是 div
  2 div:last-child{}    --> 同级元素中的最后一个元素, 且只能是 div
  3 div:nth-child(n  2n  5-n  even  add){}   --> 同级元素中指定位置的元素, 且只能是 div  (5-n表示前5个)

  4 div:first-of-type{}   --> 同级元素中的第一个 div, 无视其他元素
  5 div:last-of-type{}    --> 同级元素中的最后一个 div, 无视其他元素
  6 div:nth-of-type(n ..){}   --> 同级元素的div集合中的指定位置的 div, 无视其他元素
---------------------------------------------------------------------------

4 属性选择器
---------------------------------------------------------------------------
  1 input[value]{}    --> 带有 value属性的 input
  2 input[value = "hh"]{}  --> value属性值为 hh 的input
  3 div[att^="hh"]{}  --> att属性值为 hh开头的div
  4 div[att$="hh"]{}  --> att属性值为 hh结尾的div
  5 div[att*="hh"]{}  --> att属性值包含 hh的 div
---------------------------------------------------------------------------

5 伪元素选择器
  1 div::before {content: "hh";}   --> 在div元素内部的前面插入内容
  2 div::after {content: "hh";}    --> 在div元素内部的后面插入内容

常用属性

1 字体
---------------------------------------------------------------------------
  1 font-family: Arial, 'Microsoft YaHei', Helvetica, sans-serif;   //依次显示
  2 font-size: 16px;    
  3 font-weight: 700/400;
  4 font-style: normal /italic;   //正常 /斜体
  5 text-transform: uppercase  lowercase  capitalize  none;   //英文大小写: 全大 全小 首字母大 正常
  6 font: style > weight > size > family;      //简写顺序; size family 是俩个必写属性;
---------------------------------------------------------------------------

2 文本
---------------------------------------------------------------------------
  1 color: red;   --> 设置文本颜色  'red / #666666 / rgb(65, 187, 76) / rgba(0,25,55,.5)'
  2 text-align: left;  --> 设置元素内部文本的水平对齐方式  'left center right'
  3 line-height: 1;    --> 设置文本的行高, 单行用 px, 多行用纯数字  '1.5 24px'
  4 text-indent: 2em;  --> 首行缩进  '2em 20px'
  5 text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);  == 文字阴影: 水平位置 /垂直位置 /模糊距离 /color
  6 text-decoration: none;    --> 装饰文本--下划线 删除线 上划线  'underline  line-through  overline'
  7 resize: none;  --> 防止拖拽文本域
  8 text-shadow:2px 2px 0px #fff + -2px -2px 0px #FFFFFF ->通过字体阴影实现字体描边(也可以使用 CS3 的方式)
---------------------------------------------------------------------------

3 背景
---------------------------------------------------------------------------
  1 background-color: red;    // 默认值 transparent (透明色)
  2 background: url("路径");
  3 background-repeat: repeat /no-repeat /repeat-x /repeat-y;  //默认平铺/不平铺/x轴平铺/y轴平铺 
  4 background-position: X Y;    //背景定位 'left /center /right /top /bottom' 或 'px 或%'
  5 background-attachment: scroll;  //背景图像默认滚动 / 固定不动 'fixed'
  6 background-size: cover;     //背景图片的大小  'cover  px 或%'
  7 background: red url('') no-repeat fixed conter top;  --> 简写顺序
---------------------------------------------------------------------------

4 盒模型相关
---------------------------------------------------------------------------
  1 margin / padding  -> 内外边距
  2 border: 1px solid red;   //边框: dashed 虚线 --- dotted 点线
  3 border-radius: 50%;      //设置圆形 圆角矩形 左上到左下  'px 或%'
  4 box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .2) "inset";  //盒子阴影: 水平/垂直/模糊/尺寸/color/内阴影
  5 display: none;       //隐藏不占位
  6 visibility: hidden;  //占位隐藏
  7 overflow: visible;   //溢出隐藏'hidden'  可弄滚动条'scroll  auto' 
---------------------------------------------------------------------------

5 其他
---------------------------------------------------------------------------
  1 list-style: none;   //清除列表样式 li
  2 cursor: auto;  //鼠标样式  'pointer_小手  default_箭头  wait_等待  no-drop_禁止  help_问号  move_拖动  crosshair_十字架'
  3 outline: 0 / none  //清除表单聚焦时默认的蓝色框框
  4 vertical-align: ;  //设置元素的垂直对齐方式  'px % middle'
---------------------------------------------------------------------------

6 CS3
---------------------------------------------------------------------------
  1 box-sizing: border-box;    //取消 padding 和 border 会撑大宽高的情况
  2 transition: all .2s;       //0.2秒的一个过度效果, 发生变化的元素添加
  3 opacity: .9;    //设置元素的透明度 90%
  4 filter: blur(5px);         //滤镜效果, 值越大元素越模糊
  5 width: calc(100% - 30px);  //设置子盒子的宽度永远比父盒子小 30px  '函数 +-*/'
---------------------------------------------------------------------------

7 CS3 -> 2D
---------------------------------------------------------------------------
  1 transform: translate(x,y);   //移动 不影响别人, %相对于自身宽度 (水平垂直居中可用到)
  2 transform: rotate(360deg);   //旋转, 和移动动画有冲突, 都需要就总写可以解决
  3 transform-origin: 50% 50%;   //设置旋转中心点 (默认50%)  'px 或 方位名词'
  4 transform: scale(x,y);       //缩放, 数字单位 ' 2 , 0.5'
  5 transform: translate() rotate() scale();  //总写, 注意顺序问题, 有位移要先写位移
---------------------------------------------------------------------------