CSS中常用的外观样式和应用

web.jpeg

CSS外观属性

1.color 颜色

• 预定义的颜色，如：red,yellow,blue等
• 16进制，如：#FF0000
• RGB代码，如：rgb(255,0,0)或者rgba(0,0,0,.3) 其中a是alpha半透明的意思

2.行高 line-height

• line-height 属性用于设置行间距，字符的垂直距离，单位：px,em ,%

3.text-align 水平对齐方式

• 内容水平对齐，left ,right，center ，justify（内容2端对齐）

4. text-indent 首行缩进(单位：em)

5.letter-spacing 字间距

6. word-spacing单词间距，一般用于英文

7.word-break自动换行

• normal浏览器默认换行
• break-all允许单词内换行
• keep-all 只能在半角空格或者连字符处换行

8.white-space设置文本强制在一行显示

• white-space:normal 正常默认 | nowrap 强制在一行

9.text-overflow文字溢出

• text-overflow:clip 文本溢出 直接裁剪掉 | ellipsis 文本溢出 显示...省略号

10.text-decoration 文本装饰

• none 默认标准文本
• underline 定义下的一条线
• overline 定义文本上的 一条线
• line-through 定义穿过文本的一条线

11.文字阴影 text-shadow :水平位置 垂直位置 模糊距离 阴影颜色参数

• 前面2个参数必须写，后面可以写 可不写

<style>
    body{
        background-color: #ccc;
    }

    div{
        font: 700 80px "微软雅黑";
        color: #ccc;
       
    }

/* 多个阴影 同时存在 */
    div:first-child{
        text-shadow: 1px 1px 1px #ccc, -1px -1px 1px #fff;

    }
    div:last-child{
        text-shadow: -1px -1px 1px #ccc, 1px 1px 1px #fff;
    }
    
    </style>


<div>这是一个凸起的文字</div>
<div>这是一个凹下的文字</div>

image.png

12. border-radius 圆角弧度

用户界面(属性)

• 鼠标 cursor:pointer小手|default默认|move移动|text文本
• 轮廓outline 为0取消轮廓线，有三种演示属性outline-color | outline-style | outline-width ,一般不适用轮廓线 outline:0

input{

        /* outline: 1px solid red; */
        outline-color: blue;
    }
    

image.png

• 禁止拖动resize:none一般与textarea一起连用，防止文本域拖拽

• vertical-align垂直对齐，对于块级元素是无效的,主要是`行内元素和行内块级元素

• 13. vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。不适用 块级元素 常用的元素有img 和input

• 14.显示省略号

 div {
            width: 100px;
            height: 100px;
            border: 1px solid;
            /* 下面4个属性 显示省略号 */
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

        }

image.png

• 15.盒子垂直居中

• 根据父盒子和子盒子高度 利用margin-top 计算差值
• 子绝父相定位让盒子居中
• 给父级盒子设置display: table-cell; 使其变为表格单元格 ，在利用ertical-align: middle; 垂直居中

 .box {
            width: 300px;
            height: 300px;
            border: 1px solid;
            /* 下面4个属性 显示省略号 */
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            /*  */
            display: table-cell;
            vertical-align: middle;
           
           

        }
        .box1 {
            width: 100px;
            height: 100px;
          
            background-color: purple;
          

image.png

• 16.盒子水平居中

• 文档流根据margin ：0 auto 让其水平居中， 注意:要指定盒子的宽度

• 使用margin的左右边距，根据父级盒子和子盒子的宽度差的一半，

• 根据定位 父盒子相对定位，子盒子绝对定位

• 父盒子设置text-align: center; 子盒子设置了行辈块级元素display: inline-block;

• 17 filter过滤器

• filter: blur(5px), bluer() 高斯函数越大越模糊

• contrast(200%) 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1

• grayscale(100%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

• saturate(200%) 转换图像饱和度