css操作
文章目录
一、text 属性
1.text-align 文本排布
一般放在块元素上,一般用来控制块标签中 行标签和文本的对齐位置
值:
- left:左对齐(默认)
- center:居中对齐
- right:右对齐
2.text-decoration 文本修饰
值:
- underline 下划线
- overline 上划线
- line-through 中划线(删除线)
- none 去掉线(没有文本修饰线)
3.text-transform 文本转化
值:
- lowercase 全部小写
- uppercase 全部大写
- capitalize 单词首字母大写
4.direction 设置文字方向
值:
- ltr 从左向右(默认)
- 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 值
- solid 实线
- dotted 圆点虚线
- dashed 短线虚线
- none 隐藏border
- double 双实线 (不常用)
- 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 属性 设置文本颜色
值:
-
英文单词
-
16进制颜色 0-F,#后面跟6位表示表示颜色的数字,前两位表示红色,中间两位表示绿色,后面两位表示蓝色 #aabbcc
如果 两两相等,则可以简写成为#abc
-
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 设置字体的样式
值:
- italic 设置字体为斜体
- normal 字体正常
2.font-weight 设置字体是否加粗
值:
- normal 默认
- bold 加粗
- bolder 相对加粗
他的值也可以是具体的整百数字,范围是 100-900
- 400 -> normal
- 700 -> bold
- 900 -> bolder
3.font-size 设置所修饰的字体的大小
- 目前浏览器默认字体的大小是 16px
- pc端浏览器的最小字体大小可以设置为 12px
4.font-family 设置文字的字体
可以同时设置多个字体,形如:
{
font-family:'A','B','c'...;
}
含义是在客户端的设备上匹配 A字体,如果,没有A字体,则继续匹配B字体,依此进行匹配,直到匹配成功,即可显示匹配到的字体。
通用字体
- serif 有衬线(类似锐化)
- sans-serif 无衬线
font 也是一个 复合型 css 属性,可以直接按照下面的顺序书写
font:style weight size family;
注意,style 和 weight 不是必须写入的内容,如果简写必须要有 font-size 和font-family
font:size family;
五、background 属性
设置标签元素的背景
1.background-color 设置背景色
值:
- 英文单词
- 16进制表示颜色
- rgb() 表示颜色
2.background-image 设置背景图
background-image: url(背景图地址);
3.background-repeat 背景图的平铺方式
值:
- repeat 默认,x轴y轴都平铺
- repeat-x 沿x轴平铺
- repeat-y 沿y轴平铺
- no-repeat 不平铺
4.backgrond-position 设置背景图定位
background-position:x轴方向的值 y轴方向的值;
值:
- 具体是数值
- 方位名词组合
- left
- top
- right
- bottom
- center
5.background-attachment 设置背景图固定定位
值:
-
scroll
默认值,背景图片跟着页面一起滚动
-
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 属性
处理子级内容超出当前容器的部分,主要是对父级元素添加该属性
值:
- hidden 超出部分隐藏
- scroll 滚动查看超出的部分
- auto 自动渲染超出的部分
overflow-x 控制x轴方向超出的部分
overflow-y 控制y轴方向超出的部分
七、white-space 属性 设置文本的格式
- nowrap 强制不换行
- normal 强制换行
八、text-overflow 对超出的文本内容裁剪
- ellipsis 超出的内容变为 省略号
- clip 直接裁掉超出的文本内容
单行文本超出添加省略号
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
九、display 属性 控制标签元素的显示
值:
- block 把标签元素转化为块属性元素
- inline 把标签元素转化为行属性元素
- none 隐藏标签元素
1.设置内联块元素(行内块元素)
display:inline-bolck;
本质是 对内显示 块标签属性,对外显示 行标签属性
2.两个内联块元素之间的缝隙的处理方式
原因:两个内联块元素之间键入了回车,回车也是一个字符,他的大小跟父标签的font-size有关
解决办法:
- 去掉回车键
- 设置他们父元素的大小为0
注意,字体大小可以被传递到子元素上的