博客园 首页 新随笔 联系 订阅 管理

1. CSS 背景样式

  (1) background-color:背景颜色

  (2) background-image:背景图片

  (3) background-repeat:图片的平铺方式

            repeat-x 水平方向平铺

            repeat-y 竖直方向平铺

            no-repeat 都不平铺

            repeat:x、y方向都平铺

  (4) background-position:背景图片的位置

            x y: number | 单词

            x: left center right

            y: top center bottom

  (5) background-attachment:背景图片随滚动条的移动方式

            scroll:背景图相对于当前元素偏移

            fixed:背景图相对于浏览器偏移

    img:显示大图片

    background-image:显示装饰性的图片,小图标

 

2. CSS 边框样式

  (1) border-style: 边框的样式

     dotted: 点线

     dashed: 虚线

     solid: 实线

  (2) border-width: 边框的大小

     px...

  (3) border-color: 边框的颜色

    颜色、十六进制表示法、RGB表示法

  (4) border-radius: 圆角 

    border-radius: 10px 20px
           10px:左上角和右下角
           20px:右上角和左下角

    border-radius: 10px 20px 30px 40px
           10px:左上角
           20px:右上角
           30px:右下角
           40px:左下角

    border-radius: 20px / 40px (椭圆)

 

  边框也可以针对某一条边单独进行设置

  border-left-style 其中left可以换成top、bottom、right

 

3. CSS文字样式

  (1) font-family:字体类型

    英文字体:Arial, Times New Roman

    中文字体:微软雅黑

    注意事项:

        (1) 设置多字体的目的: 确保计算机可以匹配

        (2) 添加引号的目的: 字体中出现空格,需要添加引号,否则不需要添加引号

  (2) font-size:字体的大小

    默认大小:16px

    写法:

      xx-small   最小

      x-small     较小

      small     小

      medium         正常

      x-large          较大

      xx-large         最大

 

      number(px)

      注:字体的大小一般为偶数,有时要对文字进行对齐,一般进行居中对齐,所以使用偶数

  (3) font-weight:字体的粗细

    normal:正常

    bold:加粗

  (4) font-style:字体的样式

     normal:正常

     italic:斜体

      注:oblique也是表示斜体,一般不用

      区别:italic 带有倾斜属性的斜体字才可以设置倾斜

         oblique不论是否带有斜体字都可以设置倾斜

  (5) color:字体的颜色

 

4. CSS 段落样式

  (1) text-decoration:文本修饰

     underline: 下划线

     line-through: 删除线

     overline: 上划线

     none: 不加任何装饰

    注: 添加多个文本修饰 line-through underline overline

  (2) text-transform:文本大小写(针对英文段落)

    lowercase:小写

    uppercase:大写

    capitalize:首字母大写,其余小写

  (3) text-indent: 文本缩进

    em:缩进单位

    1em 永远和字体大小相同

  (4) text-align: 文本对齐方式

    left、center、right、justify(两端对齐)

  (5) line-height: 行高

    行高: 一行文字的高度 = (上边距+字体大小+下边距),其中上边距和下边距是等价关系

    默认行高:不是固定值,是随着字体大小而变化的

    取值: number (px) | scale (比例值) 同文字大小成比例

  (6) letter-spacing: 定义字间距

  (7) word-spacing: 定义词间距

  (8) 强制折行

    word-break:break-all (非常强烈的折行)

    word-wrap:break-word (不那么强烈的折行)

 

5. CSS 复合样式

  一个CSS属性只控制一种样式,叫做单一样式

  一个CSS属性控制多种样式,叫做复合样式

  

  复合样式的写法是通过空格实现的,有的复合样式的写法没有顺序,如background和border、有的则有顺序,如font

  例:

    background: red url() no-repeat 0 0

    border: 1px solid black

    font:最少要有两个属性size和family,size一定要在family的前面且size和family在最后

    weight style size family ✅
    style weight size family ✅
    weight style size/line-height family ✅
posted on 2021-12-30 21:22  Computer_Science  阅读(31)  评论(0编辑  收藏  举报