Cascading Style Sheet 层叠样式表

1. 行内样式/内联样式<标签 style="CSS样式规则"></标签>
2. 文档内嵌

<style>
    CSS选择器 {
        属性 : 值;
        属性 : 值;
        ...
    }
</style>

1. 外部样式表 / 外链方式
   <link rel="stylesheet" href="url">

样式表特点

1. 层叠性
    多个CSS样式共同作用于元素
    et :
        p{
            color:red;
            background-color:green;
            font-size:32px;
        }
2. 继承性
    父元素中设置的样式，子元素可以继承下来。
    大部分文本相关的属性，都可以被继承，
    块级元素的宽度与父元素保持一致；
3. 样式表的优先级
    只有发生样式冲突时，才考虑优先级
    h1{
        font-size:32px;
    }
    inherited from body{
        font-size:20px;
    }
    优先级从低到高 ：
    1. 继承样式
    2. 浏览器的缺省设置 （默认样式）
    3. 文档内嵌方式 / 外链方式 设置的样式
            相同的优先级，发生样式冲突时，由代码的书写
            顺序决定最终样式，后来者居上
    4. 行内样式优先级最高

CSS 选择器

* 后代选择器
选择器1 选择器2{
    样式规则
}
* 子代选择器
选择器1>选择器2{}
表示在选择器1对应的元素中，匹配满足选择器2的
直接子元素

伪类选择器

1. 超链接伪类选择器
   主要针对超链接的不同状态设置样式
   • :link 超链接访问前的状态
   • :visited 超链接访问后的状态
2. 动态伪类选择器
   1. :hover 表示鼠标悬停时的状态
   2. :active 表示鼠标点按时的状态
   3. :focus 表示获取焦点时的状态，常见于输入框接收用户输入时，就表示获取到焦点

HTML标签分类

1. 块级元素 ：
   1. 独占一行，不与其他元素共行
   2. 可以手动调整宽高
   3. 默认情况下，块元素的宽度与父元素保持一致 常见块元素 ：body h1-h6 div ul ol li table form p
2. 行内元素 ：
   1. 可以与其他元素共行显示
   2. 不可以手动调整宽高大小
   3. 实际大小由元素的内容多少决定 常见行内元素：span label i b s u sup sub strong
3. 行内块元素 ：
   1. 可以共行显示
   2. 可以手动调整宽高 常见的行内块元素 ：img input button

所有标签都可以设宽高，除了span和样式相关的标签

overflow 属性可以处理内容溢出

1. visible 默认值，溢出部分仍然可见
2. scroll 添加滚动条，包含水平和垂直方向，不管该方向有没有发生内容溢出，都显示滚动条
3. auto 自动添加滚动条，哪个方向发生内容溢出，就添加该方向上的滚动条
4. hidden 隐藏溢出部分

border取值 ：border-width border-style border-color 取消默认边框，border : none; 设置透明边框色 transparent border-radius 取值 ：像素值或者百分比

盒阴影

• 属性 ：box-shadow
• 取值 ：offset-x offset-y blur spread color
  1. offset-x : 阴影的水平偏移距离，取像素值
  2. offset-y : 阴影的垂直偏移距离，取像素值
  3. blur : 阴影的模糊程度，取像素值，值越大越模糊
  4. spread : 阴影的延伸距离（可选），取像素值，
     可以扩大阴影的范围
  5. color : 设置阴影颜色 （默认为黑色） 不管是浏览器窗口中还是元素本身，都存在坐标系，都以左上角为（0,0）点，向右，向下代表X和Y轴的正方向

1. 垂直方向上的外边距，会发生合并，取较大的值
2. 水平方向上的外边距，会发生叠加，元素之间的距离较大
3. 为子元素添加距上的外边距，作用于父元素上
   1. 为父元素设置上边框（可以使用透明色）
   2. 为父元素天机顶部的内边距padding-top:0.1px;

box-sizing 指定盒模型的计算方式

1. content-box : 默认值
   元素的width height属性只用来规定内容的尺寸，如果元素设置内外边距和边框，最终在文档中占据的尺寸由各种值相加得到
2. border-box :
   元素的width height属性，规定的是包含边框，内边距和内容在内的尺寸

元素的显示设置

1. 设置元素的可见性 visibility
   1. visible 默认值，元素可见
   2. hidden 设置元素隐藏,元素在文档中仍然占位
2. 转换元素类型 display
   1. block : 转换为块元素
   2. inline : 转换为行内元素
   3. inline-block : 转换行内块元素
   4. none : 实现元素隐藏,元素在文档中不占位，其他元素会相应的移动

背景相关的属性

背景图片
1. 设置背景图片
属性 ：background-image
取值 ：url()
注意 ：
    1. 背景图片的尺寸如果大于元素尺寸，图片仍然按照
    原始尺寸显示，超出元素的部分不可见
    2. 背景图片的尺寸小于元素尺寸，浏览器会自动对
    背景图片重复平铺，直到铺满元素
2. 设置背景图片的重复方式
    属性 ：background-repeat
    1. repeat : 默认值，沿水平和垂直方向平铺
    2. repeat-x : 沿水平方向平铺
    3. repeat-y : 沿垂直方向平铺
    4. no-repeat : 设置背景图片不重复平铺
3. 设置背景图片的位置
    1. 属性 ：background-position
    2. 取值 ：x y
        1. 取像素值 ：
            x : 表示背景图片水平方向的偏移距离
                    正值表示图片向右偏移
                    负值表示图片向左偏移
            y : 背景图片垂直方向的偏移距离
                    正值表示图片向下偏移
                    负值表示图片向上偏移
            注意 ：结合“精灵图”实现元素背景图片调整，
                            这种技术叫“精灵技术”
        2. 取百分比
                参照元素尺寸计算水平和垂直偏移距离
                1. 0% 0%
                        背景图片显示在元素左上角
                2. 50% 50%
                        背景图片显示在元素中间
                3. 100% 100%
                        背景图片显示在右下角
        3. 方位值确定背景图片的位置
                x : left / center / right
                y : top / center / bottom
                如果某一个方向缺失，默认为center
4. 设置背景图片的大小
    1. 属性 ：background-size
    2. 取值 ：x y
        x y 分别表示背景图片的宽和高
        1. 像素值
        2. 百分比 ：参照元素宽高尺寸计算背景图片大小
        3. cover : 表示将图片等比放大至完全覆盖元素
                超出部分不可见
        4. contain : 表示将图片等比拉伸至刚好被元素容纳，
                不能超出元素尺寸，可能会造成背景图片无法
                完全覆盖元素的效果
5. 背景属性简写 
    1. 属性 ：background
    2. 取值 ：color url() repeat position
    注意 ：
        1. 背景属性按照一定顺序设置
        2. background-size单独设置
        3. 可以省略属性值，单独设置颜色 或者背景图片
                et:
                    background:red;
                    background:url();

字体属性简写

1. 属性 ：font
2. 取值 ：style weight size family;
   1. 同时设置四个属性值时，参照给定顺序书写
   2. font-size和font-family是必填项，不能省略

文本装饰线

text-decoration

1. underline : 下划线
2. overline : 上划线
3. line-through ：删除线

4. none : 取消文本装饰线

   文本水平对齐方式

   text-align
5. left(默认值) / center / right

6. justify 两端对齐

表格相关的属性

1. 基础样式是通用的
2. 独有的CSS属性 ：
   1. 边框合并border-collapse
      1. seperate : 默认值，单元格边框与表格边框相分离
      2. collapse : 设置表格边框与单元格边框合并
         1. td 不支持margin
         2. border-collapse只能在table中使用
   2. 设置边框边距border-spacing
      • h-value : 水平方向边框之间的距离
      • v-value : 垂直方向边框之间的距离
      • 两个值之间使用空格隔开

CSS 布局方式

1. 标准流布局（文档流，普通流，静态流）

   2. 浮动布局

   1. 元素设置浮动（left/right）,会脱离文档流，在文档中不再占位，后面正常的元素会向前占位，浮动元素会“漂浮”在文档流上方
   2. 元素设置浮动，会从它当前所在文档中的位置脱流， 向左或向右浮动。
   3. 多个元素同时左浮或右浮，浮动元素会依次停靠在前一个浮动元素的边缘，中间没有缝隙。
   4. 浮动元素会在父元素的尺寸范围内浮动，多个浮动元素无法并排显示时，会自动换行,停靠在其他浮动元素边缘

   5. 任何元素只要设置浮动，就具有块元素的特征，可以手动调整宽高

      元素浮动引起的问题 ：

      子元素如果全部设置浮动，在文档中不占位，父元素高度为0：
2. 父元素的背景图片和背景颜色无法显示

3. 父元素后面的正常元素会上移，影响布局

   解决 ：

4. 为父元素指定高度
5. 设置父元素 overflow:hidden;
6. 清除浮动的影响 ：clear 取值 ：left / right / both

• left : 表示正常元素左边不允许出现浮动元素
• right : 正常元素不受右浮元素影响

• both : 正常元素不受浮动元素影响

  解决父元素高度为0的问题 ：

1. 为父元素末尾添加空的块元素
2. 为空的块元素设置clear:both;

3. 定位布局

1. 定位布局 ：通过调整元素的位置，实现网页布局
2. 属性 ：position
   1. static ：默认值，使用文档流布局
   2. relative ：相对定位
   3. absolute ：绝对定位
   4. fixed : 固定定位
   • 注意 ：只有元素设置position属性为 relative / absolute / fixed三者之一，才认为元素是 “已定位的元素”
3. 偏移属性
   • 使用 top / bottom / left / right 偏移属性调整已定位元素的位置
   1. top : 取像素值，可正可负正值表示元素向下移动，负值向上
   2. bottom : 正值表示元素向上移动，负值向下
   3. left : 正值表示元素向右移动，负值向左
   4. right : 正值表示元素向左，负值向右移动
4. 分类 ：
   1. 相对定位 position : relative;
      • 元素设置相对定位之后，可以使用偏移属性调整元素位置相对定位的元素是参照元素在文档中的原始位置进行偏移
      • 相对定位的元素不会脱离文档流，在文档中始终保留它的原始位置。
   2. 绝对定位 position : absolute;
      1. 绝对定位的元素会脱离文档流，类似于浮动。
      2. 绝对定位的元素参照一个
         离他最近的
         已定位的祖先元素进行偏移，
         如果没有已定位的祖先元素，会参照
         浏览器窗口的（0,0）点偏移
         使用 ：
         采用“父相子绝”的方式实现元素绝对定位。
         父元素采用相对定位，子元素使用绝对定位，
         实现子元素参照父元素的（0,0）点偏移
   3. 固定定位 position : fixed;
      1. 固定定位的元素，永远都参照浏览器窗口进行偏移
      2. 固定定位的元素，会被定位在窗口的某个位置，不会跟随网页滚动而滚动。
5. 调整已定位元素的堆叠次序
   • 属性 ：z-index
   • 取值 ：无单位的数值，默认为0，数值越大，元素越靠上显示
   1. z-index 属性只能在已定位的元素中使用
   2. 兄弟元素之间可以通过z-index数值的大小调整堆叠次序
   3. 父子元素之间，永远是子元素在上，无法通过z-index调整父子元素的堆叠次序
   4. 如果兄弟元素的z-index取值相同，后来者居上

元素显示效果

1. display
2. visibility
3. 透明度设置
    1. 属性 ：opacity 设置元素透明度
    2. 取值 ：0（透明） - 1 （不透明）
    3. 注意 ：
            1. 元素使用opacity设置半透明，所有显示的内容（
                背景颜色，文本颜色等）都会呈现半透明效果
            2. opacity是对元素整体透明度的设置，包含元素
                自身和内部的子元素。
            3. 子元素同时设置透明度,最终的透明度值是在父元素
                opacity取值的基础上再次进行透明度设置

4. 行内块元素的垂直对齐方式
        行内块元素 ：img input button
        属性 ：vertical-align
        取值 ：top / middle / bottom
        作用 ：调整行内块元素左右元素与其自身的垂直对齐方式
5. 设置鼠标形状
        属性 ：cursor
        取值 ：
            1. default 默认值
            2. pointer 鼠标在元素上展现为手指的样式
            3. text      鼠标展示为 "I",表示普通文本 info
            4. crosshair 鼠标展示为 "+"

列表相关属性

列表自带内外边距和项目符号
1. list-style-type
        设置项目符号
        取值 ：
            1. none (取消项目符号，最常用)
            2. disc 实心圆点
            3. circle 空心圆点
            4. square 实心方块
            5. ...
2. list-style-image
        指定图片作为项目符号
        取值 ：url()
3. list-style-position
        指定项目符号的显示位置
        默认项目符号显示在内容外部,在左边的padding中展现
        取值 ：
            1. outside 默认值
            2. inside 设置项目符号显示在内容区域
4. 属性简写 ：
    属性 ：list-style 
    取值 ：type/image position
    常用 ：
            list-style:none; 
            取消项目符号

过渡效果

1. 过渡指的是元素的CSS属性值发生变化时的一种平滑过渡效果
   • 属性 ：transition 取值 ：property duration timing-fuction delay;
     1. 属性简写时，四个属性值中，duration是必填项，其他三个属性值可以省略
     2. transition属性如果在伪类选择器中设置，元素的过渡效果只发生在第一次属性值改变的过程中，再有的属性值变化都不会添加过渡效果。为了保证页面效果，过渡属性在元素的默认样式中添加

• transition-property 取值 ：CSS 属性名称
  • 作用 ：指定某一个CSS样式在发生值改变时添加过渡效果
    1. 指定多个属性时,使用逗号隔开
    2. 可以省略,省略时，所有涉及值改变的属性都会被自动添加过渡效果
    3. all 指定所有CSS属性在值变化时产生过渡效果
• transition-duration 取值 ：以s为单位的数值，指定过渡时长
• transition-timing-function 作用 ：指定过渡效果的速度变化曲率
  1. ease : 默认值,慢速开始,中间快速变快,慢速结束
  2. linear : 匀速变化
  3. ease-in : 慢速开始，加速结束
  4. ease-out : 快速开始，慢速结束
  5. ease-in-out : 慢速开始和结束，中间先加速后减速
• transition-delay 以s为单位的数值, 指定过渡效果延迟几秒后执行

转换属性

转换 ：改变元素的位置，角度或大小（平移，旋转，缩放)

属性transform 取值：转换函数。注意 ：多个转换函数之间使用空格隔开

1. translate(x,y) 平移转换
2. rotate(ndeg) 旋转变换 将元素旋转一定角度，默认的转换原点是元素的中心
   • 取值：以deg角度为单位的数值,正值表示顺时针旋转，负值表示逆时针旋转
3. 元素3D转换(了解) rotateX(ndeg) rotateY(ndeg)
4. scale(value) 缩放变换 改变元素在页面的大小
   取值 ：无单位的数值，表示缩放比例
   1. value = 1 原始比例显示
   2. value > 1 等比放大
   3. 0 < value < 1 等比缩小
   4. value < 0 元素不仅会比例缩放，而且会翻转
   5. 其他情况
   - scaleX(v) 横向缩放
   - scaleY(v) 垂直缩放

转换原点实际上是元素发生平移，旋转或缩放变换的基准点，默认是元素的中心点

属性transform-origin 取值 ：x y;

1. 像素值
2. 百分比
3. 方位值
   • left/center/right
   • top/center/bottom
   1. 以元素左上角为（0,0）点，给出转换原点的坐标位置
   2. 改变元素的转换基准点会影响元素转换的效果
   3. 旋转操作会连带元素的坐标轴一起旋转，影响其他的转换效果
      et :
      transform : translate(50px,50px) rotate(45deg);
      transform : rotate(45deg) translate(50px);

转载于:https://www.cnblogs.com/ravener/p/9848442.html