二. CSS

1.基础

1.1web标准

结构层: html
表现层: css Cascading Style Sheets 层叠样式表
行为层: JS DOM
官方文档:
- www.w3.org/standards/t…
- developer.mozilla.org/zh-CN/docs/…

1.2样式分类

内联样式, 写在行内, 用属性style="" 来指定, 也叫行内样式
内部(文档)样式: <style type="text/css"> CSS语句 </style>
外部样式:
- 在html文件引入css方式, <link rel="stylesheet" type="text/css" href="..." />
- 或者 <style> @import url(...); @import url(...); </style>
- 也可以在.css文件中引入另外一个.css文件,用@import url(...);
- 编码: 在.css文件中声明编码方式 @charset "utf-8";
优先级: 行内样式优先级最高. 内部样式与外部样式后写的优先级高

1.3标签分类

块级元素:
- 独占一行, 可设置宽高,不设置宽度默认与父级元素同高
- div,h,p,from, dt,dl,dd,ol,ul li, hr, tr,td,table 等
内联元素: 也叫行内元素
- 不会独占一行, 不能设置宽高
- a, span, em, strone
内联块元素:
- 不会独占一行, 可以设置宽高,
- img input select textarea
元素类型转换: display: block块级 inline内联 inline-block 行内块元素

2.文本CSS

2.1 font

font-size: 字体大小
font-family: 字体
font-weight: 粗度 0~900 normal是400
font-style:italic字体倾斜 normal oblique文本倾斜
这几个font可简写,把几个属性写在一起
font-variant: small-caps; 小写字母变大写,,规格大小与小写一样大
color: 字体颜色(准确说: 前景色)
line-height: 行高

2.2 text

text-align: 水平对齐方式
vertical-align: 垂直
text-decoration: under-line下划线 none over-line上划线 line-through删除线 blink闪烁
text-indent: 缩进40px; -40px;往前溢出
letter-spacing: 单词与单词间距
word-spacing: 字母与字母间距
text-transform: capitalize首字母大写 uppercase所有字母大写 lowercase所有字母小写
text-shadow: 10px水平 20px垂直 blur模糊距离 color阴影颜色
word-break: normal默认换行, break-all单词内部换行 keep-all标点符号换行
word-wrap: normao默认,只允许断字换行 break-word在单词内部可以换行
white-space: 空白处理 normal nowrap pre ......

3.css细节

3.1命名规范

class和id命名用中划线,下划线,小驼峰. 最好用中划线,不要用标签名.

3.2设置网页图标

< rel="icon" href="aa.png">
网页图标通常格式是ico,png, 常用大小16x16 24x24 32x32

4.选择器

4.1简单的选择器

元素(标签)选择器: div{}
id选择器: #id{}
class选择器: .class{}
通配选择器: *{}
属性选择器:
- [title] 有title属性的被选择
- [title="MyImg"] 有title属性并且值为MyImg的被选中
- [title *= “tem”] title属性含有tem
- [title ^= “tem”] title属性以tem开头
- [title $= “tem”] title属性以tem结尾的
- [class $= "tem2"] class属性以tem2结尾的被选中
- [title |= "tem"] title属性以tem开头或者tem- 开头被选中
- [title ~= "tem"] title属性以包含tem并且tem前后用空格分隔或者只有tem
兄弟选择器
- ~ 同级后边的所有
- +同级下一个元素的样式

4.2组合的选择器

交集选择器: #id.class两属性中间无符号两属性同时拥有则被选中
并集(群组)选择器: #id,.class两属性中间逗号分隔两属性只要有一个就会被选中
后代选择器:#id div两属性中间空格分隔后代子孙被选中
子选择器:#id>div两属性中间大于号分隔后代中只有子代被选中

4.3伪类选择器

动态伪类选择器
- :link 初始状态
- :visited 访问过的链接
- :hover 鼠标悬停
- :active 鼠标按下
- :focus 聚焦时的样式
- 去掉a元素的焦点状态 a:focus{outline:none;} 或者用属性tabindex="-1", tabindex可以调整tab选中元素的顺序
目标伪类选择器
- target 多用于锚点, 被选中的样式改变
元素状态伪类选择器
- :disable 禁用时的样式
- :enabled 可用时的样式
- :readonly 仅读时的样式
- :readwrite 可读写时的样式
- :checked + label 选中状态下的样式
- :indeterminate
结构伪类选择器
- :nth-child(1) 第一个子元素被选中,等同于 :first-child
- :nth-child(n) 子元素都被选中
- :nth-child(2n) 子元素第偶数个被选中,等同于 :nth(even)
- :nth-child(2n+1) 子元素第奇数个被选中,等同于 :nth(odd)
- :nth-child(3n) 子元素3,6,9...被选中
- :nth-child(3n+2) 子元素2,5,8...选中
- :nth-child(-n+5) 子元素前5个被选中
- :nth-last-child(1)子元素倒数第一个被选中,等同于 :last-child
- div:nth-of-type(1)子元素中第一个div被选中,等同于 :first-of-type
- p:nth-of-last-type(1)子元素中最后一个p标签被选中,等同于 :last-of-type
- :only-child 是唯一子元素的被选中
- div:only-of-type 子元素中如果是唯一的div标签被选中
- root 选择根元素
- empty 指定内容为空的元素
- :not(div) 不是div的被选中
伪元素选择器
- :first-line 首行
- :first-letter 首字母
- :before{content:'文本'} content为必填项,'文本'也可以是图片
- :after 某元素之后

5.Emmet语法使用

5.1快速生成HTML结构

div>p>span 生成父子结构
h2+div+p 生成兄弟结构
div>p*3 乘法
div>p>span^h2+a^h1 上一级
div>(p>span)+h2+a 分组
.class #id [title] 普通属性用中括号
div{ 内容 }
div.box$*4 数字递增
div>p{文字内容?}*5
div可隐式省略,直接.box 在ul中li, table中tr可省略

5.2快速生成CSS结构

.box{ w200+h200+m20 }
.box{ m20-30-40-50 }
.box{ p20--30 }
.box{ fz30}
.box{ fz1.5 } 结果为font-size: 1.5em;
.box{ fw700 }
.box{ bgc333 }
.box{ lh50 }
.box{ dib } 等等不用死记

6.CSS特性

6.1继承 Inherited

若自己有设置使用自己的,自己没设置使用父元素的,
有些属性是继承属性,有些属性不是继承属性
不能继承的属性可使用inherit值强制继承
继承的是计算值

6.2层叠

相同的选择器,后设置的会把前边设置的进行覆盖
选择器权重: 权重高的会把权重低的样式进行覆盖
- !important: 10000
- 内联:1000
- id:100
- 类,属性,伪类:10
- 元素,伪元素:1
- 通配符:0

7.CSS盒模型

7.1 常用属性

margin属性, 外边距.
- 上下两div距离为margin较大的值, 左右两div距离为它们margin值的和.
- margin 左右不会折叠,上下会折叠(collapse).
- margin 左右不会传递,上下会传递.
- 解决传递:给父元素设置border也可以加padding. 触发BFC(block format context)浮动可触发,设置元素的overflow为非visible
padding属性, 内到边框的距离
border属性, 设置边框线型,粗细,颜色. 用border可实现三角形
- border-style边框线型:none,solid,dashed,dotted,double,groove,ridge,inset,outset
- border-color边框颜色
- border-width边框粗细
display属性:
- block 块元素
- inline-block 行内块元素
- inline 行内元素, 不能设置宽高. 但行内替换元素可以设置宽高如img,input,iframe等
- none 隐藏(不占空间)
visibility属性: visible显示, hidden隐藏(依然占据原来空间)
opacity: 0; 也是隐藏
min-width, max-width,min-height, max-height属性
border-radius属性, 圆角
- border-top-left-radius:(左上角) 可设置两个值, 椭圆形.值也可设置成百分比
- 左下角,右上角,右下角同理

7.2 CSS的outline属性

outline表示元素的外轮廓
- 不占用空间
- 默认显示在border的外边
outline-width: 宽度
outline-style: 和 border-style取值一样
outline-color: 颜色
应用实例: 去除a元素 input 的focus轮廓效果

7.3 盒子的box-shadow属性

* box-shadow: 5px  9px  0  10px  color inset; 
             offset-x  offset-y  blur     spread            color      position
             左右      上下      模糊半径  影子大小四周延伸   影子颜色     位置: inset表示向内扩散
* box-shadow: 5px 9px 6px, -6px 0 6px; 可以设置两组值
* text-shadow: 文字阴影,值同上

7.4 box-sizing属性

content-box默认, 是内容盒子,设置宽高时, 设置的是内容的宽高
border-box,设置宽高时, 设置的是[内容+内边距+边框] 总的宽高

7.5 水平居中

普通文本,行内元素如strong,行内替换元素如img,行内块元素想居中用 text-align:center;
block块元素居中用 margin:0 auto;

7.6 背景background

background-image: url(),url(); 背景图,会盖在背景色之上的. 可以设置多张图片,当第一张不可用的时候,才会显示后边的
background-color: 背景色 transparent透明无色
background-repeat: no-repeat repeat-x repeat-y
background-attachment:
- scroll 浏览器滚动背景图也跟着div滚动,但背景图不会跟着文字滚动
- local 浏览器滚动背景图也跟着div滚动,但背景图会跟着文字滚动
- fixed 背景固定
background-position: 背景位置
- 100px 100px 第一个值是左右, 第二个值是上下
- center center 背景图水平,垂直都居中
- 精灵图sprite: -10px,-100px等等
background-size:
- 默认值auto原来多大展示多大,盒子不满时默认平铺
- contain,等比拉伸,不溢出
- cover 等比拉伸溢出隐藏,
- 30% 30% 自由拉伸. 第一个值宽度,第二个值高度
- 具体值,300px 400px

7.7 cursor属性(光标)

auto 默认值,浏览器根据上下文决定指针的样式
default 由操作系统决定
pointer 小手
text 竖线

7.8盒内容的溢出

overflow属性
- visible默认值,会溢出显示
- hidden 溢出隐藏
- scroll 滚动条
- auto 自动,横向溢出,就横向加滚动条,纵向同理
overflow-x属性, 单独设置横向,值同上
overflow-y属性, 单独设置纵向,值同上
text-overflow属性,设置文本溢出情况
- clip 溢出隐藏
- ellipsis 显示不完的内容用省略号代替,必须和overflow:hidden, white-space: nowrap 一起使用
- string: 用指定的修饰符代替文字

7.9 盒子定位position

static 静态定位,默认值,在标准流里
absolute 绝对定位,脱离标准流,相对于具有定位属性的父级元素进行定位偏移,设置后会自动变成block
fixed 固定定位, 脱离标准流,相对于屏幕的位置固定不变,在文档流不占空间, 层级高于普通元素. 行内元素设置了fixed会自动转为块元素block
relative 相对定位,在标准流里相对于自己原来的位置进行偏移,原来的位置依然大小依然占据
z-index属性:默认值为0,值越大层级越高

7.10 盒子浮动float

三种值,none 默认不浮动, left right.
规则一: 浮动和绝对定位都会让元素脱离标准流, 浮动后变成block. 层叠关系: 标准元素在最下边,然后是浮动元素, 定位元素在最上边.
规则二: 浮动元素不能与行内级元素,重叠. 会被往右推开
规则三: 浮动元素只能在当行,进行左浮或右浮.
规则四: 浮动元素,浮动之后,其后的block会占据它原来的位置,但是如果block内部有文本等行内级元素,会被推出去. 如果把block元素改成inline-block之后,也会被推出去..
规则四: 浮动不能超过包含块.
规则五: 浮动元素之间不能重叠, 浮动水平宽不够时会向下移,直到找到有足够的空间位置.
规则六: 浮动元素的顶端不能超过包含块的顶端, 也不能超过之前所有浮动元素的顶端.
清除浮动clear
- 由于浮动元素脱离标准流,所以不再向父元素汇报高度. 这样一来,父元素在计算总高度时,就不会计算浮动子元素的高度,导致了高度坍塌的问题
- 解决坍塌问题的过程, 一般叫做清除浮动. 清除浮动的目的是,让父元素计算总高度的时候,把浮动子元素的高度算进去.
- clear常用取值
  - left 要求元素的顶部低于前边所有左浮动元素的底部.
  - right 要求元素的顶部低于前边所有右浮动元素的底部.
  - both 低于所有浮动元素的底部
  - none
清除浮动的方法:
- 给父元素设置固定的高度
- 在父元素最后增加一个空的块级子元素,并且设置clear: both
- 给父元素的最后增加一个br标签 <br clear='all'>
- 加伪元素 ( 伪元素是行内级元素, 手动改成block)

    div::after { 
        content: ""; 
        clear: both;
        display: block;
        }

8. 响应式布局弹性盒模型

flex布局(Flexible, 弹性布局)
元素一旦开启flex布局, 它本身就叫做flex container, 它的子元素叫flex item

8.1 针对容器的属性

display: flex; 或 display: inline-flex;
flex-direction: 排列方向 row column row-reverse逆序 column-reverse逆序
flex-wrap: nowrap(默认) 这是不换行,wrap 换行, wrap-reverse 从后往前排, 默认情况下,项目都排在一条线上
flex-flow: 相当于flex-direction和flex-wrap的简写, 默认值为row, nowrap
justify-content: 定义了项目在主轴上的对齐方式, flex-start左对齐 flex-end右对齐 center 居中 space-between排列 space-around也是排列
align-items: 一根交叉轴, 如何对齐? flex-end flex-start center baseline与第一个同行 stretch垂直占满
align-content: 若多根交叉轴, 对齐方式就用此 flex-end flex-start center stretch默认的, space-around space-between

8.2 针对容器中每一项的属性进行设置

order: 数值越小排列越靠前
flex-grow: 定义项目的放大比例默认为0, 如果所有项目的flex-grow属性都为1,则它们将等分剩余的空间(如果有的话), 如果一个项目的flex-grow属性为2, 其他都为1, 则前者占据的剩余空间比其他多一倍
flex-shrink:定义了缩小的比例默认为1. 如果一个为0,其他为1, 则者不变, 其他等比缩小
flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间. 浏览器根据这个属性计算主轴是否有剩余空间. 它的默认值为auto,即项目的本来大小
flex: 是flex-grow flex-shrink flex-basis 的缩写默认值 0 1 auto
align-self: 允许单个项目与其他项目不一样的对齐方式,可覆盖align-items 默认auto

9. vertical-align属性

baseline: 这是默认值,基线对齐
top: 顶线对齐
middle, bottom 同理

10.CSS动画

什么是css动画? 使用css3技术来控制页面元素css属性的变化

10.1 过渡动画 transition

transition-property: 规定设置过渡效果的css属性名 none || all || width/ transform/ height... ;
transition-duration: (动画时长)
transition-timing-function: (速度曲线)
- linear匀速
- ease慢快慢
- ease-in慢速开始
- ease-out慢速结束
- ease-in-out慢速开始慢速结束
- steps(步骤的数量, end), 中间有几帧,start不包括开始,
transition-delay: (延迟多长时间开始执行)
可同时设置:transition: width 1s linear 1s, height 2s linear 1s;//属性, 时长,方式,预备时间. 多组值的时候用逗号分隔
transition触发方式: hover, active,focus 表单的元素才有focus

10.2 变换动画 transform

平移

transform: translateX(50%) 百分比是参照元素本身
transform: translateY(30px)
transform: translate(50%,2.5);
transform: translate(2.5); 一个值是水平方向
transform: translate3d(x,y,z);

缩放

transform: scaleX(0.5)
transform: scaleY(1.5)
transform: scale(0.5,1.5);
transform: scale(3);一个值x和y方向, 同时缩放
transform-origin:(水平,垂直) 设置缩放的基准点
transform: scale3d(x,y,z);

旋转

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotateX(45deg)rotateY(45deg)rotateZ(45deg);连写
translate: rotate3d(1,1,1,45deg); 共同设置

倾斜

transform: skew(45deg,50deg)绕自身某点倾斜
transform: skewX(0.5)
transform: skewY(1.5)
transform: skewZ(2.5)
也可连写
transform: skew(2); 一个值时代表水平方向

透视图 (不是透明度, 它指的是远小近大)

transform: perspective(100px) rotateY(40deg)

10.3 关键帧动画keyframes 和 animation

transition 过度动画仅仅有两帧,开始帧和结束帧.
animation关键帧动画,可以有无数帧.

定义动画
@keyframes name1 {
    0%{background-color: darkseagreen}
    25%{background-color: coral}
    50%{background-color: blue}
    75%{background-color: palevioletred}
    100%{background-color: antiquewhite}
}
如果只有两种状态,可以这样定义:
@keyframes name2{
    from{ left: 0px; }
    to{ left: 200px; }
}

执行动画:
    //动画名,时间, 次数,方式,方向,延迟时间. 
    div:hover{animation: name1 5s infinite linear, alternate, 2s}  

    多组值的时候用逗号分隔
    
完整写法: 
animation-name: 规定需要绑定到选择器的 keyframe 名称
animation-duration: 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function: 规定动画的速度曲线
animation-delay: 规定在动画开始之前的延迟
animation-iteration-count: 规定动画应该播放的次数
animation-direction: 规定是否应该轮流反向播放动画
animation-fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state: 指定动画是否正在运行或已暂停。

12. 线性渐变

12.1 盒子渐变

background: linear-gradient(to right, red,yellow,bule) 渐变方向,颜色,颜色,颜色
background: linear-gradient(45deg, red,yellow,bule)

12.2 字渐变

background: linear-gradient(45deg, red,yellow,bule)
-webkit-background-clip: 规定背景的绘制区域( 有以下四个值 )
- border-box 背景被裁剪到边框盒
- padding-box背景被裁剪到内容边框
- content-box 背景被裁剪到内容框
- text 背景绘制文字部分
-webkit-text-fill-color: transparent

12.3 径向渐变

background: radial-gradient(circle,red,yellow) 圆形渐变
background: radial-gradient(ellipse,red,yellow) 椭圆渐变
background: radial-gradient(circle,50px,red,yellow) 设置大小
background: radial-gradient(80%,20%,red,yellow) 横轴渐变80% 纵轴渐变20%
background: radial-gradient(at left, 50px, red, yellow) 设置大小
background: radial-gradient(形状,大小, at位置,颜色, 颜色2, 颜色3, 颜色4)

12.4 重复渐变 background: repeating-radial-gradient( red 5%, yellow 10%, bule 30%)

13.Grid布局

13.1 写在容器中的操作

* display: grid;   或者  inline-grid;  对容器的设置
*
* grid-template-rows: 100px 100px 100px;  对栅格元素的设置
* grid-template-rows: repeat(3, 100px);  对栅格元素的设置
* grid-template-rows: repeat(auto-fill, 100px);  对栅格元素的设置
* grid-template-rows: repeat(2, minmax(50px,100px));  对栅格元素的设置
* grid-template-colunms: repeat(3, 1fr);  对栅格元素的设置
* grid-template-colunms: repeat(3, 20%);  对栅格元素的设置

* row-gap: 10px;   行间距
* column-gap: 10px;   列间距
* gap: 20px 10px;   行, 列 间距

* grid-template-rows: [r1] 100px [r1e r2] 100px [r2e r3] 100px [r3e r4];   // 在容器中给 每条线起名
* grid-template-columns: [c1] 100px [c1e c2] 100px [c2e c3] 100px [c3e c4];   // 在容器中给 每条线起名

* grid-template-rows: repeat(3, [r-start] 1fr [r-end])   // 在容器中给 每条线起名
* grid-template-columns: repeat(3, [c-start] 1fr [c-end]);   // 在容器中给 每条线起名

* grid-template-areas: "header header"
                        "nav main"
                        "footer footer"
                      
                      
* grid-auto-flow: column;   栅格的排列方向
* grid-auto-flow: row dense;   dense 后边的会自动填满

* justify-content: space-evenly;    // 父容器的内容 (evenly空白处完全平均)
* align-content: center;    // 父容器的内容
* place-content: center space-evenly;   // 以上两个的结合体  垂直 水平
* place-content: center;   // 也是以上两个的结合体


* justify-items: stretch;   // 子元素在每个栅格中的位置 (stretch是拉伸)
* align-items: center;   // 子元素在每个栅格中的位置
* place-items: center space-evenly;   // 以上两个的结合体  垂直 水平
* place-items: center;   // 也是以上两个的结合体

13.2 在子元素中写的操作

// 使用线的编号
div:first-child { 
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 2;
}

// 使用每条线的别名
div:first-child { 
    grid-row-start: r2;
    grid-column-start: c1;
    grid-row-end: r3;
    grid-column-end: c2;
}

// 重复的线别名
div:first-child { 
    grid-row-start: r-start 2;
    grid-column-start: c-start 1;
    grid-row-end: r-end 2;
    grid-column-end:  c-start 2;
}

// 只设置占几个偏移量, 
div:first-child { 
    grid-column-end: span 3;   
    grid-row-end: span 1
}
div:first-child { 
    grid-column-start: 2;   
    grid-row-start: 2;
    grid-column-end: span 1;   
    grid-row-end: span 1
}

// 同事设置行和列
div:first-child { 
    grid-row: 1 / 2;   
    grid-col: 3 / 4;
}
// 同事设置行和列---偏移量
div:first-child { 
    grid-row: 1 / span 1;   
    grid-col: 3 / span 1;
}


// 区域设置
div:first-child {
    grid-area: 1/1/2/4;   行/列/行/列
}
// 区域设置---别名
div:first-child {
    grid-area: r 1/c 1/r 2/c 4;   行/列/行/列
}

// 案例--------
header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

// 操作子元素在某个栅格中的位置
div:first-child {
    justify-self: end;
    align-self: center; 
    
    * place-self: center space-evenly;   // 以上两个的结合体  垂直 水平
    * place-self: center;   // 也是以上两个的结合体
}

14. Sass

14.1 Sass和Compass

css预处理器, 定义了一种新的语言,将css作为目标生成文件,然后开发者就只使用这种语言进行编码工作了. 预处理器通常可以实现浏览器兼容变量结构体等功能.代码更加简洁,易于维护.
什么是sass?
- 它是css预处理器的一种. 它能让css实现可编程,可自定义变量等等.
- sass使用缩进式的代码风格, 类似于Python 通过缩进取代大括号{ }
什么是Compass? 它是用sass语言封装的一个类库.
Compass模块组成:
- reset模块重置浏览器基础样式的效果
- css3模块
- layout模块网格布局
- typegraphy模块控制整体的板式, 有了布局还需要用板式来填充布局,来达到骨架的一个效果
- utilities模块工具库

14.2 Sass语法

注释
- /* */
- 双斜杠 //
定义变量

body
    $mybg: blue;  这是定义局部变量
    background: $mybg;
body
    $mybg2: blue !global;  // 这是定义全局变量
    background: $mybg2;

$mycolor: red;
$mycolor: white !default;   // 这是带默认值的变量
$mycolor: blue;

$paddings: 5px 8px 10px 8px;   // 定义多值变量
padding: $paddings;   // 同时设置了,四个方向的padding
padding-left: nth($paddings, 1)

$m: (color: red,borderColor:blue)
background-color: map-get($m,color);

$clsname: box   // 将来可以随意更改box的字面值
.#{$clsname}
    width: 50px;
    height:40px;
    
$text-num: 34px;
$text_num: 50px;   // 下划线和中划线是相同的,,认为是同一变量

15. SVG

15.1 简介

SVG是一种基于XML语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics). 其他图像格式都是基于像素处理的,SVG则是属于对图像的形状描述,所以它本质上是文本文件,体积较小,且不管放大多少倍都不会失真.

15.2 标签

(1)<svg>
SVG代码都放在顶层标签svg之中, 不指定宽高默认大小是w300*h150
<svg height="100" width="100" viewBox="50 50 50 50">
    <circle id="mycircle" cx="50" cy="50" r="50">
</svg>
viewBox 是视口 , 切1/4, 展示成100%来显示. 实际看到的是右下角四分之一圆.
视口必须适配所在的空间.上面代码中,视口的大小是50 50, 由于svg图像的大小是100 100,所以视口会放大去适配svg图像的大小,即放大了4倍.
如果svg标签不指定width属性和height属性,只指定viewBox属性,则相当于只给定SVG图像的长宽比.这时,SVG图像的默认大小将等于所在HTML元素的大小.

(2) <circle> 园标签
cx
cy
r

fill 填充
stroke 边 
stroke-width
stroke-linecap
stroke-dasharray

(3) <line> 线段标签
x1
y1
x2
y2

stroke
stroke-width

(4) <polyline> 折线标签
points= "3,3  30,28   3,50"

fill
stroke
stroke-width

(5) <rect> 矩形标签
x
y
height
width

fill
stroke
stroke-width

(6) <ellipse> 椭圆标签
cx
cy
rx
ry

fill
stroke
stroke-width

(7) <polygon> 多边形标签
points= "3,3 30,28 3,50 4,99 67.23"

fill
stroke
stroke-width

(8) <path> 路径标签
d= "
    M 18,3     M代表起始点
    L 45,8     L代表经过的点
    L 35, 9
    L 32, 68
    Z          Z代表闭合
    有很多命令如M L H V A rotation sweep...
"

fill
stroke
stroke-width

(9) <text> 文本标签
x
y


fill
font-size
font-weight
stroke
stroke-width
text-shadow

(10) <use> 复制标签
href="#ttt"
x
y

fill
stroke
stroke-width

(11) <g> 组标签
将多个图形组成一个组,  方便复用
<g id="ggg">
    <text>
    <circle>
    ...
</g>


(12) <defs> 自定义形状标签
它内部的代码 dom不会显示,  仅用引用,  其他地方复用等等
<defs>
    <g id="ggg">
        <text>
        <circle>
        ...
    </g>
</defs>

(13) <pattern> 自定义形状标签
该形状可以被引用来平铺一个区域
<defs>
    <pattern id="dots" x="0" y="0" width="100" height="100"
        patternUnits="userSpaceOnUse">
        <circle fill="#f00" cx="50" cy="50" r="35">
    </pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)"> </rect>

(14) <image> 图片标签
xlink:href=""
width
height

(15) <animate> 动画标签
attributeName="x" 发生动画效果的属性名
from
to
dur
repeatCount = "indefinite"

<rect x="0" y="0" width="100" height="100" fill="#f00">
    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite"/>
</rect>

(16) <animateTransform> 标签
对css的transform属性不起作用,如果需要变形,就要使用<animateTransform>标签

1.基础

1.1web标准

1.2样式分类

1.3标签分类

2.文本CSS

2.1 font

2.2 text

3.css细节

3.1命名规范

3.2设置网页图标

4.选择器

4.1简单的选择器

4.2组合的选择器

4.3伪类选择器

5.Emmet语法使用

5.1快速生成HTML结构

5.2快速生成CSS结构

6.CSS特性

6.1继承 Inherited

6.2层叠

7.CSS盒模型

7.1 常用属性

7.2 CSS的outline属性

7.3 盒子的box-shadow属性

7.4 box-sizing属性

7.5 水平居中

7.6 背景background

7.7 cursor属性(光标)

7.8盒内容的溢出

7.9 盒子定位position

7.10 盒子浮动float

8. 响应式布局 弹性盒模型

8.1 针对容器的属性

8.2 针对容器中 每一项的属性进行设置

9. vertical-align属性

10.CSS动画

10.1 过渡动画 transition

10.2 变换动画 transform

平移

缩放

旋转

倾斜

透视图 (不是透明度, 它指的是远小近大)

10.3 关键帧动画keyframes 和 animation

12. 线性渐变

12.1 盒子渐变

12.2 字渐变

12.3 径向渐变

12.4 重复渐变 background: repeating-radial-gradient( red 5%, yellow 10%, bule 30%)

13.Grid布局

13.1 写在容器中的操作

13.2 在子元素中写的操作

14. Sass

14.1 Sass和Compass

14.2 Sass语法

15. SVG

15.1 简介

15.2 标签

15.3 SVG的JavaScript操作 ???

15.4 SVG画表格???

8. 响应式布局弹性盒模型

8.2 针对容器中每一项的属性进行设置