CSS之外观样式和应用

web.jpg

CSS外观属性

color 颜色

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

行高 line-height

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

text-align 水平对齐方式

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

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

letter-spacing 字间距

word-spacing单词间距

word-break自动换行

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

text-decoration 文本装饰

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

文字阴影 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

border-radius 圆角弧度