表格相关操作

1>背景颜色样式设置(其中的颜色设置在  background-color后直接输颜色可以输#cccccc也可还有rgb以及rgba的特殊方式其中 rgb()中需要写数字,数字的范围在0~255之间,值越小颜色越深

rgba()中最后一个值表示透明度,范围在0~1之间,0表示完全透明,1表示完全不透明)

如:
      
        .box {
            width: 100px;
            height: 100px;
           background-color: rgb(255,255,0);
            position: absolute;
            left: 8px;
            top: 120px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: rgba(0,255,255, .3);
            position: absolute;
            left: 120px;
            top: 20px;
        }
    2>背景图片设置
使用 background-image属性来设置背景图片,图片的路径放在 url()中。
对于背景图的处理,我们有以下几种方式:
1. no-repeat: 不平铺
2. repeat-x: x轴方向平铺
3. repeat-y: y轴方向平铺
4. repeat: x轴和y轴方向都平铺(默认方式)
要想设置面的值,我们需要另外的属性叫background-repeat。

需要使用 background-position属性来调整图片位置,它是通过坐标轴来设置的。有以下几种设置方式:
1. left top: 左上角(默认值)
2. right top: 右上角
3. left bottom: 左下角
4. right bottom: 右下角
5. left center: 左中间位置
6. right center: 右中间位置
7. center center: 居中位置

以上的这些属性,可以用 background 来统一指定,它的语法格式为:
background: color position size repeat origin clip attachment image;

3>边框

指定边框可以使用 border-left|top|right|bottom-color来设置颜色
              border-left|top|right|bottom-style来设置样式
              border-left|top|right|bottom-width来设置宽度0

              边框的样式:solid实线,dotted小圆点构成的线,dashed虚线

在实际开发中,我们使用 border 属性来统一指定即可。
它的语法格式为:
border: 线的宽度 线的样式 线的颜色
上面这种方式指定的话有一个缺点:四个边的宽度、样式和颜色都是相同的才可以。

4>边距

1】内边距

容器中的内容和容器的边线之间的距离就叫内边距。
内边距的指定是用 padding 来设置的,
- 左 padding-left
- 上 padding-top
- 右padding-right
- 下 padding-bottom

可以使用 padding 属性来设置这四个边距。它的设置顺序为:
1. 四个值,则表示:上、右、下、左
2. 三个值,则表示:上 左右 下
3. 两个值,则表示:上下 左右
5. 一个值,则表示:上右下左的值都是一样的。

2】外边距

容器与另一个容器之间的距离就叫外边距。
外边距用 margin 来指定。它的使用和语法格式与 padding 相同。
- margin-left: 左边外距
- margin-top: 上外边距
- margin-right: 右外边距
- margin-bottom: 下外边距

仍然可以使用 margin 属性来简化,它顺序如下:
1. 如果设置四个值,则表示:上、右、下、左
2. 如果设置三个值,则表示:上 左右 下
3. 如果设置二个值,则表示:上下 左右
5. 如果设置一个值,则表示:上右下左的值都是一样的

5>阴影

定义阴影效果用 box-shadow ,它的语法为:
box-shadow: h-shadow v-shadow blur spread color position;
- h-shadow:必需。水平阴影位置。允许负值。
- v-shadow:必需。垂直阴影位置。允许负值。
- blur:可选。模糊距离。
- spread:可选。阴影的尺寸。
- color:可选。阴影的颜色。请参阅 CSS 颜色值。
- position:可选。将外部阴影 (outset) 改为内部阴影。默认为inset
6>圆角

定义圆角使用 border-radius,它的语法为:
border-radius:length/persentage;
1. 四个属性值,分别表示左上角、右上角、右下角、左下角的圆角大小(**顺时针方向**)
2. 三个属性值,第一个值表示左上角,第二个值表示右上角和左下角(对角),第三个值表示右下角。
3. 两个属性值,第一个值表示左上角和右下角,第二个值表示右上角和左下角。
4. 斜杠二组值:第一组值表示水平半径,第二组值表示垂直半径,每组值也可以同时设置1到4个值,规则与上面相同。
 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值