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