css外观,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个参数必须写，后面可以写 可不写

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;

}

这是一个凸起的文字

这是一个凹下的文字

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%) 转换图像饱和度