第四章CSS的属性

css属性

• 层叠
  • 通过不同的选择器选择同一个标签的时候，设置了相同的属性，但是设置了不同的属性值，根据选择器的权重值，权重值高的优先显示，如果没有冲突的样式，正常显示
• 大小写转换 text-transform
  • 首字母全部大写 capitalize
  • 全部小写 lowercase
  • 全部大写 uppercase
  • 默认值 none
• 复合写法 font
  • font: 字体加粗 字体倾斜 字体大小/行高 字体类型

    font: bold italic 20px/40px "宋体";
    

    • 字体加粗 字体倾斜为可选
    • 字体大小/行高 字体类型 必选，并且必须是该格式
• 列表属性
  • list-style-type:disc/square/circle/none
  • list-style:none 去掉列表符号
• 边框属性
  • 边框大小 border-width
    • 数值+px
  • 边框样式 border-style
    • 实线 solid
    • 虚线 dashed
    • 点状线 dotted
    • 双实线 double
  • 边框颜色 border-color
    • 默认情况下，边框颜色和字体颜色一样
    • 颜色单词/rgb()/十六进制
  • 边框的复合写法 border: 边框大小 边框样式 边框颜色;顺序不固定
  • 单方向边框 border-方向(top/right/bottom/left/none(去掉边框)):边框大小 边框样式 边框颜色;
  • 边框实现三角形

      向右的三角
        div {
          height: 0;
          width: 0;
          border-top: 20px solid transparent;
          border-right: 20px solid transparent;
          border-bottom: 20px solid transparent;
          border-left: 20px solid red;
        }
    

• 背景属性
  • 背景颜色 background-color
  • 背景图 background-image:url()
  • 背景图是否重复 background-repeat
    • repeat 重复
    • repeat-x 在x轴重复
    • repeat-y 在y轴重复
    • no-repeat 不重复
  • 背景图的位置 background-position: x轴 y轴;
    • 数值+px 向右和向下为正数,反之,可以设置负数
    • 关键字
      1. 水平方向:left/center/right
      2. 垂直方向:top/center/bottom
    • 只设置一个值的情况下,第二个值默认为居中
  • 复合写法 background: 背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定
    • 展开的写法写到复合写法的后面,不然会被复合写法覆盖掉

浮动

• 应用场景:让纵向排列的元素横向排列
• float
  • none 默认值
  • left 左浮动
  • right 右浮动
• 浮动的特点
  • 从父元素的边缘开始挨个排列
  • 浮动元素会脱离文档流,浮动元素会遮挡后面的兄弟元素,但是不会遮挡文字
  • 浮动元素的宽度如果超出父元素的宽,后面的元素会掉到浮动设置的位置
  • 浮动元素会影响后面的兄弟,但是不会影响到前面的兄弟

两种图片的使用的条件

• img插入的图片占位, 图片作为网页的内容
• 背景图不占位, 修饰性的图片用背景图插入

PS切图方法

• 矩形工具(一次只能切一个)
  • 选中需要的图片 ctrl+c
  • ctrl+n 弹框中按回车
  • ctrl+v 粘贴图片
  • 菜单项 文件->导出->快速导出为png格式
• 切片工具(可以切多个)
  • 选中多个需要的图片
  • 菜单项 文件->导出->存储为web所用格式
  • 弹框中根据需求修改图片格式,完成点击存储
  • 存储的时候文件资源器的,图像选择 所有用户切片
  • 在对应的文件下面会生成images的文件夹022