CSS

CSS样式表或层叠样式表：美化样式
按书写位置分为：
行内样式>内嵌样式>链接样式
一、行内式



二、内部样式表（写在head标签中）

表格内字体大小默认为16px
三、外部样式表
所有的样式放在css中

html中用link标签（放在head头部标签中）链接

• 选择器
  一、标签选择器
  
  二、类选择器（可以使用多次）

多类名选择器

样式显示效果跟HTML元素的类名先后顺序没有关系，受css样式书写的上下顺序有关
各个类名中间用空格隔开
三、id选择器（只能使用一次）

四、通配符选择器（使用较少）

• 字体相关样式
  一、font-size：字号（em：相对与当前对象内文本的字体尺寸 px:像素，别忘了加单位px）
  二、font-family：；字体（微软雅黑：microsoft yahei）
  三、font-weight字体粗细
  normal：正常的字体（相当于number400）
  bold：粗体（相当于number700）
  bolder：特粗体 lighter：细体
  

四、font-style：字体风格（字体样式倾斜）
normal:正常的字体
italic:斜体

五、字体连写
1.有一定的顺序
2.font-size和font-family不可省略

• 文本样式
  一、字体颜色：color
  1.预定义的文本的颜色：red、green等
  2.#ff0000或#f00红色 #00ff00绿色
  3.RGB代码，红色rgb（255,0,0），如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须要写成0%
  

二、line-height：行间距（行高，单位一般用px）
三、text-align： 文本水平对齐方式（让盒子中的内容对齐）
left：左对齐 right：右对齐 center：居中对齐
四、text-indent：首行缩进
五、text-decoration：文本修饰

• 调试工具
  F12或者查看“元素”/“页面信息”可查看代码
• 复合选择器
  一、后代选择器：
  

二、子代选择器
ul>li加tab键自动生成父子代关系
三、交集选择器

四、并集选择器（用逗号隔开）
五、链接伪类选择器
类.one 伪类:link（link；visited；hover；active顺序不能变）lv hao

• 快捷方式
  
• 标签显示模式
  一、块级元素（block-level）
  总是从新行开始
  可以设置高、宽等
  宽度默认是容器的100%
  background-color：背景色
  二、行内元素（inline-level）
  相邻行内元素在一行上
  指定高、宽无效，但水平的padding和margin可以设置
  默认宽度就是它本身内容的宽度
  行内元素只能放行内元素
  
  三、行内块元素
  即可设置宽、高，也可一行放多个
  四、标签显示模式转换
  
• 规范
  demo和 { 间，：和12间要有空格
  
  选择器的嵌套层级尽量不大于三级
• 行高
  如果盒子的高度是50，文字内容高度为16，则上下距离平分为17
  设立行高为60，则上下距离平分为22
  22大于17，则整体文字偏下
  
• CSS三大特性
  一、层叠性
  样式冲突：就近原则
  二、继承性
  height不继承，与文本相关的会继承
  三、优先级
  类选择器高于标签选择器
  1、权重相同，就近原则
  
  2、权重会叠加
  3、继承过来的权重为0

• 背景
  background-image:url( );
  background-repeat:no-repeat;
  
• CSS的浮动
  浮动的元素会脱离正常的文档流，在正常的文档流中不占空间
  
• 例子
  一、购物车：

二、背景透明（rgba）

• 盒子
  一、 边框（border）
  border-width：边框粗细
  border-color：边框颜色
  border-style：边框样式（none:无边框 solid:实线边框 dashed:虚线 dotted：点线）
  
  
  细线表格边框
  
  二、内边距（padding）

盒子宽度：
三、外边距（margin）
每个浏览器有默认的内外边距

• 盒子水平居中
  1、必须是块级元素
  2、盒子必须指定宽度（否则盒子和浏览器一样宽）
  

• 外边距合并
  相邻块元素垂直外边距的合并：最终两个盒子的距离以最大的那个为准
  嵌套块元素垂直外边距的合并：设置大盒子顶部内边距没问题，设置小盒子顶部外边距出现问题
  
  如果给定宽度值，padding会撑开盒子

• 盒子圆角（border-radius）
  最小数值为0；
  
  文字水平垂直居中
  

• 盒子阴影（box-shadow）
  
  

• 浮动(float)
  一、 浮动的盒子无法跨越内边距和边框
  二、要让三个盒子在同一行，则都要加浮动
  三、元素添加浮动后，元素会具有行内块元素的特性
  

• 导航栏