CSS常见样式

颜色的表示方式

1. 用颜色名表示 red、pink、yellow

2. 六位十六进制的数值表示颜色 0~f 红光 绿光 蓝光

   1. 00~ff

   2. 前两位红光，中间表示绿光，最后是蓝光

      1. div{
         	background：#fff000
         }
         

   3. rgb（red,green,blue）0~255

   4. rgba(red,green,blue) a【透明度】0~1

      1. 透明度：opacity：0(范围是0~1_esc_newline_)

         1. 和rdba的区别是opacity针对于整个元素，包括背景和文字，而rgba则只针对与其中的背景，不包括文字

   5. 渐变颜色

      1. linear-gradient（xxdeg(表示渐变角度),red,blue,xx;）
      2. linear-gradient（xxdeg(表示渐变角度),transparent;）

   6. 透明色：transparent

字体相关样式

1. 字体颜色 color

2. front 复合属性

   1. 字体大小 front-size:30px

   2. 字体粗细 front-weight:900

      1. 500变细
      2. 600加粗

   3. 字体风格 front-style:

      1. normal 正常
      2. italic 斜体

3. 设置文字是否有修饰线 text-decoration:

   1. none 无修饰
   2. underline 下划线
   3. line-through 中划线
   4. overline 上划线

4. 设置文本的水平对齐方式 text-align

   1. right右边
   2. left左边
   3. center居中

5. 设置文本的行高 line-height:60px

背景相关样式 background 复合属性

1. background-color:设置背景颜色

2. background-image: url（）设置背景图片url函数指定图片地址绝对地址，相对地址

3. background-repeat 设置图片是否平铺

   1. no-repeat 不平铺
   2. repeat平铺
   3. repeat-x x轴平铺
   4. repeat-y y轴平铺

4. background-size 设置背景图片大小

   1. cover:把所在的容器铺满

5. background-position:设置背景图片位置

   1. center居中

6. background-attachment：fixed;设置背景图片不随浏览器的滚动而滚动

列表相关：

list-style:none 去掉列表样式

边框相关

圆角边框

border-radius:30px(设置的是圆的半径_esc_newline_)

border-radius:30px(设置的是圆的半径_esc_newline_),10px,100px,50px

border-top-right-radius:30px(设置的是圆的半径_esc_newline_) 对单个角进行设置

盒子阴影

box-shadow:水平 垂直 模糊度 颜色

box-shadow:2px 6px 5px blue;

图片

width

height

object-fit:cover; 保持图片原有比例，不变性

定位

• position用于定位模式，其值如下

  • static 代表静态模式，常态模式

  • fixed 代表固定模式 不随浏览器的滚动而滚动，释放自己原来的空间，参考物是整个浏览器

    • left:500px
    • right
    • top

  • relative 相对模式 随浏览器的滚动而滚动，保留自己原来的空间，参考物是自己原来的位置

    • left:30px
    • right:20px
    • top:10px

  • absolute 代表绝对模式，随浏览器的滚动而滚动，释放自己原来的空间，参考物是整个浏览器

  • 结合模式

    • （父级使用relative，子集元素使用absolute）子集元素随浏览器的滚动而滚动，释放自己的空间，参考物是父级元素

• z-index：设置层级，数字越大越靠上

  • div{
    	z-index：1
    }