css部分

CSS(Cascading Style Sheets) 层叠样式表

css引入方式：

1、行内样式： <div style="color:red;">内容</div>

2、内嵌式： <style>div{color:red;}</style>

3、外链式：<link rel="stylesheet" href="css文件">

4、导入式：@import url("css文件");或@import "css文件";

css选择器：

1、通配符选择器 格式：*{样式属性名：属性值;} 权重 0.5

2、标签选择器 格式：标签名{样式属性名：属性值;} 权重 1

3、类选择器 格式：.类名{样式属性名：属性值;} 权重 10

4、id选择器 格式：#id值{样式属性名：属性值;} 权重 100

5、包含选择器 格式：选择器e 选择器f{样式属性名：属性值;} 权重 权重相加

6、分组选择器 格式：选择器e，选择器f{样式属性名：属性值;}

7、兄弟选择器    相邻兄弟选择器  E+F{}   紧邻E选择器后的那一个兄弟选择器F

                            通用兄弟选择器   E~F{}    E选择器后代所有的F兄弟选择器

8、属性选择器     [attr] {}   选择含有属性attr的元素

                             [attr value] {}  选择属性attr的值是value的选择器

9、伪类选择器        ：focus{}    当元素获取焦点时，会触发

                                ：checked{}    选择有选择状态的元素

                                ：disable{}     选择不可用状态的元素

                                ：first-child{}     选择第一个子元素

                                ：last-child{}     选择最后一个子元素

                                ：nth-child (n) {}    选择第n个子元素

                                ：first-of-type{}     选择同种类型的第一个子元素

                                ：last-of-type{}      选择同种类型的最后一个元素

                                ：nth-of-type (n) {}    选择同种类型的第n个元素

字体相关样式：

1、font-size 字体大小

2、font-family 字体系列 多个字体间用逗号隔开   英文字体名称中间有空格，用引号引起来

3、font-style  字体风格   normal 正常   

                                       italic 斜体

                                       oblique 倾斜

4、font-weight 字体粗细   normal 正常

                                          bold  粗体

                                          bolder  加粗

                                          100-900 9个层次

                                           lighter  细体

5、line-height  行高    单位 px   若无单位，表示倍数

6、定义字体   定义字体  @font-face{font-family

       文本相关样式     

1、text-aligin 文本水平对齐方式    left 默认 左对齐

                                                       center 居中对齐

                                                        right  右对齐

                                                        justify 两端对齐

2、text-indent 文本首行缩进  常用单位 em

3、text-decoration 文本修饰  none 默认 无修饰

                                               underline 下划线

                                               line-through  中划线 删除线

                                               overline 上划线

4、text-transform 英文字母大小转换  uppercase 全大写

                                                            lowercase 全小写

                                                            capitalize 首字母大写

5、letter-spacing  字符间的距离   （字母与字母或汉字与汉字之间的距离）

6、word-spacing  单词与单词之间的距离

7、单行省略标记  white-space：nowrap  不换行

                              overflow：hidden        内容溢出隐藏

                              text-overflow：ellipsis  文本溢出显示省略标记

8、 text-shadow 文本阴影   text-shadow: 水平方向阴影  垂直阴影  模糊距离  阴影颜色

9、box-shadow 盒子阴影（边框阴影）

     box-shadow：水平方向阴影  垂直阴影  模糊距离  阴影扩展半径  阴影颜色 投影方式

                                 阴影颜色：默认为黑色

                                 投影方式：默认为外投影，若设置为inset，则为内投影

盒子模型

1、内容区域   width  宽度
                       height 高度

 2、内容溢出内容区域处理    overflow                         visible 默认 溢出部分 可见
                                               overflow-y                      hidden 溢出部分 隐藏
                                               overflow-x                     scroll  显示滚动条
                                                                                     auto 浏览器自动处理

3、padding  内边距     padding-top  上内边距

                                    padding-bottom  下内边距

                                    padding-left  左内边距

                                    padding-right  右内边距

简写     padding : 值 ；    四个边的内边距一样

            padding : 值1   值2 ；    值1是上、下内边距      

                                                  值2是左、右内边距

            padding : 值1  值2  值3 ；   值1是上内边距 

                                                         值2是左、右内边距   

                                                         值3是下内边距

            padding : 值1   值2   值3   值4 ;  值1是上内边距

                                                               值2是右内边距

                                                               值3是下内边距

                                                               值4是左内边距                                                          

                                                              上、右、下、左 顺时针方向                                                                                                    
  border边框

1、border-width  边框宽度

2、border-color  边框颜色

3、border-style ：none  无边框

                             solid   实线

                             dashed   虚线

                             dotted   点状边框

                             double  双线

简写：border:border-width值  border-style值  border-color值；

                              border-top   上边框

                              border-botton  下边框

                              border-left  左边框

                              border-right  右边框

margin  外边距      margin-top  上外边距

                              margin-botton  下外边距

                              margin-left  左外边距

                              margin-right  右外边距

简写      margin：值；  四个边的外边距一样

             margin：值1 值2；  值1是上、下外边距     

                                              值2是左、右外边距

             margin：值1 值2 值3；  值1是上外边距 

                                                     值2是左、右外边距   

                                                     值3是下外边距

             margin：值1 值2 值3 值4；      值1是上外边距

                                                               值2是右外边距

                                                               值3是下外边距

                                                               值4是左外边距                                                          

                                                               上、右、下、左 顺时针方向                           

background-color  背景颜色

background-image  背景图片        url("图片路径")

background-repeat 背景图片重复方式       repeat 默认 垂直水平均重   

                                                                       no-repeat 不重复   

                                                                       repeat-x 水平重复   

                                                                       repeat-y  垂直重复

background-position  背景图片位置    x  y

background-size 背景图片大小   width值  height值

contain 包含   把背景图片等比例扩展至最大尺寸，以使他的宽和高适应整个背景区域 可能背景区域有留白

cover 覆盖    把背景图片等比例扩大至足够大，以使他铺满整个背景区域 可能会使图片裁剪

attachment   背景图片是否固定    scroll 默认 背景图片随页面滚动      fixed 背景图片固定不动

简写：background：bg-color值 bg-image值 bg-repeat值 bg-position值/bg-attachment值；中间空格隔开

background-image 渐变   线性渐变 background-image：linear-gradient（渐变角度，颜色1 颜色1位置，颜色2 颜色2位置，......）

渐变角度：1、单位deg 30度 30deg

2、可以用英文单词来表示渐变方向  to right 从左向右线性渐变

径向渐变  background-image：radial-gradient（shape at position,颜色1 颜色1位置，颜色2 颜色2位置，......）

1、shape 形状：      ellipse 默认 椭圆

                            circle  圆形

  2、size 渐变大小  farthest-corner（默认）：指定径向渐变的半径长度为从圆心到离圆心最远的角

farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边

closet-side  指定径向渐变的半径长度为从圆心到离圆心最近的边

closet-corner  指定径向渐变的半径长度为从圆心到离圆心最近的角

position 圆心位置     at x y

x y 取值   英文单词 left right  center top bottom 

                数值+单位

                 百分比

圆角  border-radius：值； 四个圆角一样

         border-radius：值1 值2； 值1是左上角、右下角

                                                   值2是左下角、右上角                      

border-radius：值1 值2 值3； 值1是左上角  值2是右上角、左下角  值3是右下角

border-radius：值1 值2 值3 值4； 值1是左上角  值2是右上角  值3是右下角  值4是左下角 

float  浮动    none 默认 不浮动

                     left      左浮动

                     right   右浮动

position  定位    static  默认 正常文档流

                           relative  相对定位   相对于自己原来的位置，不会因为移动导致原来的位置不变

                           absoulute  绝对定位     包含框无定位   相对于浏览器定位

                                                                 包含框有定位   相对于离自己很近的父元素定位

                            fixed  固定定位

                            sticky  粘性定位     

过渡 transition                transition-property 过渡属性      多个属性之间用逗号隔开或用all表示

                                    transition-duration  过渡持续时间 单位：m秒或  ms秒   

 transition-timing-function   过渡速度        ease 默认 逐渐变慢

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

cubic-bezier(x1,y1,x2,y2)

transition-delay 过渡延迟时间