css

CSS 化妆术

day01

使用css

link 引入外部的css文件 <link rel="stylesheet" type="text/css" href="./01.css">
<style></style> 在html中写
使用html元素的style属性尽量不要使用这种

注释

/**/

格式

选择器 {
    CSS属性：值;
    CSS属性：值;
}

选择器 {CSS属性：值;CSS属性：值}

####

css长度单位

px 像素 常见16px 最小 12px 浏览器不同这个值也不同
em 默认大小的倍数
百分比 默认大小参照

css颜色单位

colorname: red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字  rgb（34,45，23） rgb（20%，57%，100%）
16进制  #abcdef   #f90 #ccc   推荐使用的

css选择器

1 标签名选择器
tagname {
    
}

2 类名
.classname {
    
}
3 id选择器
idname {
    
}
4 全局选择器
* {
    
}
5 组合 后代元素
选择器 选择器

6 组合 子元素
选择器>选择器
7 群组
选择器，选择器,...
8 多条件选择器
p.item

选择器优先级

id > class > tagname > *
组合选择器 数数

字体

font-family 非衬线字体：微软雅黑 sans-serify 衬线字体：宋体 serify
font-size: 30px; 字体大小
font-weight normal/blod 加粗
font-style notmal/italic 倾斜
font-variant normal/small-caps 对英文小写才有效小型大写
font 复合属性
```
font:[weight|style|variant] size family
```

颜色

color

文本

word-spacing: 30px; 字符间隔针对英文
letter-spacing: 10px; 字符间隔针对汉字
text-align: left/center/right; 字体水平对齐方式：默认左对齐
vertical-align: baseline/middle; 顶线、基线、底线字体都是在顶线和底线之间蹦跶只有把文字和图片一起写的时候有点用
line-height 行高
text-decoration: none/overline/underline/line-through 默认none 最常用来处理超链接的下划线
text-indent:2em 首行缩进
word-wrap:break-word; 对于长链接或长单词自动断行
overflow-wrap:break-word 和上面的一样 css3起的别名
white-space: pre/pre-wrap; 格式化输出 /保证换行并缩进

day02

尺寸

width max-width min-width 后面还会在讲先用width
height max-height min-height

边框

border-style 边框风格 solid / dotted / dashed / double / none
border-width 边框宽度
border-color 边框颜色
border 复合属性 border: 1px solid #ccc

内边距边框与文字的距离

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

padding

padding: 值;  上下左右
padding: 值1 值2；   值1：上下  值2：左右
padding: 值1 值2 值3;  值1：上 值2：左右  值3:下
padding: 值2 值2 值3 值4；  值1：上  值2：右  值3：下  值4：左

背景属性

background-color 背景颜色 transparent 默认透明色
background-image 背景图片 url()
background-repeat 背景图片平铺 repeat no-repeat repeat-x repeat-y
background-position 背景图片位置像素或者方位
background-attachment 背景图片固定 scroll / fixed

background 复合属性

background: color image repeat postion attachment

CSS Sprite 精灵图雪碧图

利用 background-position 设置背景图片的位置
把很多小的图片集成到一张大图上
好处：减少网络请求数量

cursor css属性

cursor: pointer; move  wait no-drop 手 十字 转圈 禁止访问

day03

列表相关的CSS属性

适用于<ol>和<ul> 也可以设置给 <li>

list-style-type: disc/circle/square.../none 设置标识符
list-style-position: outside/inside 列表有边框这个才有意义
list-style-image: url() 使用自己的图片替代标识符

list-style: none; 复合属性 把前面的全部覆盖 这个最常用

ul li:first-child 表示第一个列表项

table标签的css属性

table-layout: auto / fixed   列宽固定(相等) auto(默认)      常用
border-collapse: separate/ collapse 合并单元格边框 默认独立  常用
border-spacing: 长度;  单元格和单元格之间的间隙  单元格不能合并
caption-side: top/bottom  标题的位置
empty-cells:hide/show   空的单元格显示/隐藏 单元格不能合并

day04

布局相关属性 CSS

CSS的小特点

子元素继承父元素的字体设置

1.4 布局相关属性 CSS

display
- block 设置块
- inline 设置为内联
- inline-block 兼具两者有些html元素，默认就是inline-block （img, input, textarea .td,th）
- none 隐藏无位置
布局相关
- visibility: visible/hidden 元素不可见但是有位置
- overflow: hidden 超过的就没了/auto 水平和垂直都有滚动条/scroll 和auto一样/visible 超出盒子范围显示还可以用来解决margin塌陷问题
- overflow-x
- overflow-y
尺寸
- width / max-width 对块状有用向下自适应 / min-width 对inline-block有用
- height / max-height / min-height
内边距

外边距
- margin 4个值 3 2 1
- margin-left
- margin-top
- margin-bottom
- margin-right

day05

1 浮动 CSS float

1.1 浮动

元素可以设置向左或者向右浮动（不会跳出父元素的宽）
元素浮动后，会脱离文档流。（对后面的元素产生影响）
元素一旦浮动，会转换为块状元素块状元素可以设置宽高等属性
浮动的元素并不独占一行(仍然是块状元素) 因为脱离标准文档流
浮动的元素，宽度默认会是auto，被内容撑开尽可能的窄
多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行

1.2 浮动的影响

对后面元素影响。后面元素会整体向前
对父元素有影响（父元素的高不能被撑开）

1.3 消除浮动影响

消除元素对后面元素的影响，在后面的元素设置 clear:both/left/right
消除子元素浮动对父元素的影响。给元素浮动或者设置 overflow

3 定位布局 CSS position

3.1 相对定位

通过 position:relative 设置元素为相对定位元素
元素设置为相对定位之后，不会脱离文档流，不影响其他元素
可以通过 left、top、right、bottom给相对定位的元素设置位置
定位元素：根据原先默认的位置去定位

3.2 绝对定位

通过position:absolute来设置绝对定位
元素绝对定位后，脱离文档流，影响后面的元素。宽度默认会被内容撑开
可以通过 left、top、right、bottom给绝对定位的元素设置位置
定位规则：根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素。祖先元素什么定位都可以

3.3 固定定位

定义使用的CSS属性

position:  
left
top
right
bottom
z-index

day06

1 定位

1.1 相对定位

1.2 绝对定位

1.4 固定定位

position: fixed;
left/top/right/bottom: 长度单位；

根据屏幕进行定位
脱离文档流（宽度默认变成内容撑开）
元素设置为固定定位或绝对定位之后，会变为块状元素

1.5 元素的层级位置

z-index: number;   只能用于被定位的元素 值高的覆盖值低的

2 布局知识点总结

元素垂直左右居中

position: absolute;
left: 50%;
top: 50%;
margin-top: -高的一半
margin-left: -宽的一半

元素水平居中

margin-left:auto;
margin-right: auto;

margin:0 auto;

text-align

让文字水平居中
内联元素(inline 和 inline-block)

line-height

让一行文字垂直居中。 line-height的值等于元素的高
内联元素(inline inline-block)

布局

1. CSS重置

reset.css

去掉所有元素的默认样式
也可以保证浏览器效果相同

normalize.css

重新设计了所有元素的默认样式
保证所有浏览器效果相同

优点：
添加了H5新元素的样式重置
没有简单粗暴

2. 布局的H5新增标签(了解)

header
footer
main
aside
article
section
dialog

双标签，没有任何默认样式，跟div一样。 有语义

3 .字体图标

http://fontawesome.dashgame.com/

day07

1 CSS3 的选择器

1.1 基本选择器

tagName
.className
#idName
*
slector,selector,selector

1.2 层级选择器

selector1 selector2     后代
selectoer1>selectoer2   子元素
selector1+selector2     紧邻在后面的兄弟元素
selector1~selector      后面所有兄弟元素

1.3 属性选择器

selector[attr]          包含指定的属性
selector[attr=value]    指定属性的值
selector[attr^=value]   属性值以value开头
selector[attr$=value]   属性值以value结束
selector[attr*=value]   属性值包含value
selector[][][]          多个属性选择器

属性选择器优先级类比 class

1.4 伪类选择器

/*语法*/
selector:伪类 {
   
}

:link     未访问的超链接
:visited  访问过的超链接
:hover    鼠标悬停 任意元素
:actived  激活状态的超链接

:focus    获得焦点时

:first-child  兄弟元素中的第一个
:last-child    最后一个
:nth-child()    指定数字，也可以指定关键字"odd", "even" 各行换色
:nth-last-child(2) 指定数字 倒数第几个
:only-child   是否是独生子女

:fist-of-type  分类型后的第一个
:last-of-type 分类后的倒数第一个
:nth-of-type()      指定数字，也可以指定关键字"odd", "even"
:nth-last-of-type()  分类后倒数第几个 指定数字
:only-of-type() 分类后是否唯一

1.5 伪元素选择器

::first-letter   第一个字
::first-line     第一行
::before         最前面插入一个子元素
::after         最后面追加一个子元素 解决自身浮动问题

2 CSS3 基础

2.1 浏览器私有前缀

-weibkit-*    chrome/safari
-moz-*       firefox
-ms-*         ie
-o-*         opera

2.2 CSS3 新增的颜色

rgba(r,g,b,不透明度)  不透明度：0~1 小数， 数越大，越不透明

2.3 CSS3新增长度单位

px
em      默认字体大小的倍数
rem     根元素字体大小的倍数 手机上js获取屏幕大小 自适应用的比较多
vw      窗口宽度分成100份  50vw
vh      窗口高度分成100份   也是移动端较多  窗口和html大小的概念不一样

2.4 CSS3新增属性

# 重新设置 盒子模型的规则
box-sizing: content-box(默认) / border-box （width/height盒子的宽高 内陷）

# 外轮廓  在border的外面 不算盒子
outline: none;  最长用来取消input的轮廓
outline-style
outline-color
outline-width

# 不透明度
opacity 0~1 小数  整个盒子的透明度   rgba不包括字体

2.3 设置圆角

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

day08

3.5 阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

3.5 背景

background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment

3.6 CSS3变换

transform

translatex() 
translatey()
translate(x, y)
rotate() 角度 deg
skewx()  角度deg
skewy()
skew(x, y)

transform-origin 变换的原点。对translate没有意义。对rotate影响大

3.7 过渡效果

哪些CSS属性可以过渡

长度 (padding margin width height  left/top/right/bottom border-width  background-position ...)
颜色
变换
纯数字 (opacity、z-index)

触发过渡

伪类触发  :hover  :focus  ....
媒体查询   @media
JS

3.8 CSS3动画

关键帧

@keyframes 动画名字 {
    0% {
        
    }
    20% {
        
    }
    40% {
        
    }
    100% {
        
    }
}

css

CSS 化妆术

day01

使用css

注释

格式

css长度单位

css颜色单位

css选择器

选择器优先级

字体

颜色

文本

day02

尺寸

边框

内边距 边框与文字的距离

背景属性

CSS Sprite 精灵图 雪碧图

cursor css属性

day03

列表相关的CSS属性

table标签的css属性

day04

布局相关属性 CSS

CSS的小特点

1.4 布局相关属性 CSS

display

布局相关

尺寸

内边距

外边距

day05

1 浮动 CSS float

1.1 浮动

1.2 浮动的影响

1.3 消除浮动影响

3 定位布局 CSS position

3.1 相对定位

3.2 绝对定位

3.3 固定定位

定义使用的CSS属性

day06

1 定位

1.1 相对定位

1.2 绝对定位

1.4 固定定位

1.5 元素的层级位置

2 布局知识点总结

元素垂直左右居中

元素水平居中

text-align

line-height

布局

1. CSS重置

2. 布局的H5新增标签(了解)

3 .字体图标

day07

1 CSS3 的选择器

1.1 基本选择器

1.2 层级选择器

1.3 属性选择器

1.4 伪类选择器

1.5 伪元素选择器

2 CSS3 基础

2.1 浏览器私有前缀

2.2 CSS3 新增的颜色

2.3 CSS3新增长度单位

2.4 CSS3新增属性

2.3 设置圆角

day08

3.5 阴影

3.5 背景

3.6 CSS3变换

3.7 过渡效果

哪些CSS属性可以过渡

触发过渡

相关属性

3.8 CSS3动画

关键帧

内边距边框与文字的距离

CSS Sprite 精灵图雪碧图