题外： css学习

学习来源：w3school 在线教程https://www.w3school.com.cn/

CSS使用

外部CSS

 

内部CSS

在head部分的<style>元素进行定义

行内CSS

读取优先级问题

最终是读取最后读到的样式

 

css颜色

 

   CSS文本颜色

 

css边框颜色

 

CSS RGB颜色

RGBA

增加了不透明度 0.1-1

 

HEX值

 

HSL颜色

饱和度

亮度

 

 

css背景

 

background-color

属性指定元素的背景色

颜色设置

 

透明度

 

RGBA颜色值and透明度

注意：rgba是背景 总体颜色和透明度

 

Background-image

（默认图形重复达到覆盖元素的目的）

文字难以阅读

 

特定元素设置背景

 

background-repeat

只在水平方向重复

 

只在垂直方向重复

只显示一次背景图象

 

 

background-position

重要的一个设置 ，试着学习and应用

 

 

Background-attachment

 

 

 

background简写属性

 

 

总结

 

盒子模型

 

CSS边框

CSS边框属性

 

CSS边框样式

 

CSS边框宽度

注意 顺序 上右下左（顺时针 ）

 

CSS边框颜色

 

 

特定边框颜色（上  右 下 左）

 

CSS边框各边

 

 

CSS简写边框属性

 

CSS圆角边框

Border-radius    添加圆角边框

 

总结：

 

CSS边距

 

 

CSS外边距

 

margin简写属性

如果有缺默认对称

 

auto值

 

 

 

 

inherit 值

 

CSS外边距合并

 

 

 

CSS内边距

设置方式与magrin相似

 

 

 

box-sizing

 

CSS宽度和 高度

注意属性不包括内边距，外边距，边框或外边框

 

max-width

 

 

 

CSS框模型

 

 

 

CSS轮廓

 

样式

 

 

CSS轮廓宽度

 

 

 

CSS轮廓颜色

 

 

 

CSS轮廓简写

 

CSS轮廓偏移

 

文本

 

CSS文本

 

 

CSS文本对齐

justify

Direction unicode-bidi

 

 

 

 

 

CSS文本装饰

Text-decoration

 

 

 

 

CSS文本转换

 

CSS文字间距

 

文字缩进（text-indent)

 

字母行距（letter-spacing)

 

行高 line-height

 

字间距（word-spacing)

 

 

空白（white-space)

无

 

 

CSS文本阴影

 

 

 

字体

 

 

 

 

字体样式

 

 

字体大小

em设置字体大小

1em=16px

 

谷歌字体

 

字体属性

 

 

CSS图标

 

 

Bootstap图标

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 

谷歌图标

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 

 

 

CSS链接

颜色不停的 变化

 

文本装饰

 

背景色

 

Target  按钮

 

 

CSS列表

 

定位列表标记

 

删除默认设置

 

列表简写属性

 

 

表单

 

 

 

 

 

表格宽度和高度

 

 

对齐

 

 

表格内距

 

 

水平分割

 

可悬停表格

 

条纹表格

 

 

表格颜色

 

响应式表格