05css操作

css操作

一、text 属性

1.text-align 文本排布

一般放在块元素上，一般用来控制块标签中 行标签和文本的对齐位置

值：

1. left：左对齐（默认）
2. center：居中对齐
3. right：右对齐

2.text-decoration 文本修饰

值：

1. underline 下划线
2. overline 上划线
3. line-through 中划线（删除线）
4. none 去掉线（没有文本修饰线）

3.text-transform 文本转化

值：

1. lowercase 全部小写
2. uppercase 全部大写
3. capitalize 单词首字母大写

4.direction 设置文字方向

值：

1. ltr 从左向右（默认）
2. rtl 从右向左

5.text-indent 首行缩进

值是具体的数值

6.word-spacing

设置两个单词之间的距离

7.letter-spacing

设置两个字符之间的距离

8.line-hight 设置行高

对于单行文本，line-height 设的高度如果和标签高度相同，则可以做垂直居中效果

.layout{
            height: 400px;
            border: #04be01 solid;
            text-align: center;
            line-height: 400px;
        }

对于多行文本，可以理解为行间距

二、border 属性

1.border-width 设置border的宽度

{
    border-width: 5px;
}

2.border-style 设置border的样式

{
    border-style: solid;
}

常用的 border-style 值

1. solid 实线
2. dotted 圆点虚线
3. dashed 短线虚线
4. none 隐藏border
5. double 双实线 （不常用）
6. 3D边框 （不常用）
   • groove 3D凹槽
   • ridge 3D凸槽
   • inset 内嵌
   • outset 外嵌

3.border-color 设置border的颜色

{
    border-color: #f00;
}

他们三个也可以合写

border: width style color;

{
    border: 10px #04be01 double;
}

可以给单独某一个边设置border

• border-top 设置 上边
• border-left 设置 左边
• border-bottom 设置 下边
• border-right 设置 右边

三、color 属性 设置文本颜色

值：

1. 英文单词

2. 16进制颜色 0-F，#后面跟6位表示表示颜色的数字，前两位表示红色，中间两位表示绿色，后面两位表示蓝色 #aabbcc

   如果 两两相等，则可以简写成为#abc

3. rgb（），rgba（） 设置颜色

   • 括号中设置对应位置的数字，0-255，0表示黑色，255表示白色

     background:rgb（255，0，0）; 红色

   • rgba 中的a 表示透明度，取值范围时0-1，0表示完全透明，1表示完全不透明

     background: rgba(255, 0, 0,0.5); 半透明红色

四、font 属性

1.font-style 设置字体的样式

值：

1. italic 设置字体为斜体
2. normal 字体正常

2.font-weight 设置字体是否加粗

值：

1. normal 默认
2. bold 加粗
3. bolder 相对加粗

他的值也可以是具体的整百数字，范围是 100-900

• 400 -> normal
• 700 -> bold
• 900 -> bolder

3.font-size 设置所修饰的字体的大小

1. 目前浏览器默认字体的大小是 16px
2. pc端浏览器的最小字体大小可以设置为 12px

4.font-family 设置文字的字体

可以同时设置多个字体，形如：

{
 font-family:'A','B','c'...;
}

含义是在客户端的设备上匹配 A字体，如果，没有A字体，则继续匹配B字体，依此进行匹配，直到匹配成功，即可显示匹配到的字体。

通用字体

1. serif 有衬线（类似锐化）
2. sans-serif 无衬线

font 也是一个 复合型 css 属性,可以直接按照下面的顺序书写

font：style weight size family;

注意，style 和 weight 不是必须写入的内容，如果简写必须要有 font-size 和font-family

font:size family;

五、background 属性

设置标签元素的背景

1.background-color 设置背景色

值：

1. 英文单词
2. 16进制表示颜色
3. rgb（） 表示颜色

2.background-image 设置背景图

background-image: url(背景图地址);

3.background-repeat 背景图的平铺方式

值：

1. repeat 默认，x轴y轴都平铺
2. repeat-x 沿x轴平铺
3. repeat-y 沿y轴平铺
4. no-repeat 不平铺

4.backgrond-position 设置背景图定位

background-position：x轴方向的值 y轴方向的值;

值：

1. 具体是数值
2. 方位名词组合
   • left
   • top
   • right
   • bottom
   • center

5.background-attachment 设置背景图固定定位

值：

1. scroll

   默认值，背景图片跟着页面一起滚动

2. fixed

   根据浏览器可视区域，固定在具体位置，他的定位参考点是 浏览器可视区域

background 是一个复合型属性

可以写在一起，顺序是

background：color image repeat position attachment;

可以单独写

background:color;

background:image;

    .wp{
        width: 600px;
        height: 400px;
        border: 1px #f00 solid;
        /* 设置背景色 */
        background-color: #04be02;
        /* 设置背景图 */
        background-image: url('./images/xt.png');
        /* 设置背景图的平铺方式 */
        background-repeat: no-repeat;
        /* 设置背景图的定位 */
        background-position: -150px center;
        /* 背景图固定定位 */
        background-attachment: fixed;
        }

六、overflow 属性

处理子级内容超出当前容器的部分，主要是对父级元素添加该属性

值：

1. hidden 超出部分隐藏
2. scroll 滚动查看超出的部分
3. auto 自动渲染超出的部分

overflow-x 控制x轴方向超出的部分

overflow-y 控制y轴方向超出的部分

七、white-space 属性 设置文本的格式

1. nowrap 强制不换行
2. normal 强制换行

八、text-overflow 对超出的文本内容裁剪

1. ellipsis 超出的内容变为 省略号
2. clip 直接裁掉超出的文本内容

单行文本超出添加省略号

{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

九、display 属性 控制标签元素的显示

值：

1. block 把标签元素转化为块属性元素
2. inline 把标签元素转化为行属性元素
3. none 隐藏标签元素

1.设置内联块元素(行内块元素)

display:inline-bolck;
本质是 对内显示 块标签属性,对外显示 行标签属性

2.两个内联块元素之间的缝隙的处理方式

原因:两个内联块元素之间键入了回车,回车也是一个字符,他的大小跟父标签的font-size有关

解决办法:

1. 去掉回车键
2. 设置他们父元素的大小为0

注意,字体大小可以被传递到子元素上的