css元素边框、背景、列表相关属性-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

大哥你来啦

1662

文章

969565

访问

+关注

分类

暂无分类

日期归档

2023-05(9)

2023-06(1)

css元素边框、背景、列表相关属性

发布于2021-03-13 18:55 阅读(989) 评论(0) 点赞(10) 收藏(1)

css元素边框、背景、列表相关属性

边框

边框相关属性

border-width 规定元素的边框宽度
属性值: length(数值+单位)
border-style 规定元素的边框样式
属性值： solid 实线 dashed 虚线 double 双线 dotted 点线
groove 3D凹槽边框 ridge 3D垄状边框 inset 3Dinset边框 outset 3Doutset边框
border-color 规定元素的边框颜色
属性值：英文单词颜色表示
十六进制颜色表示 #nnnnnn n表示的是0-f之间的数字
#000000 黑色 #ffffff 白色 #ff0000 = #f00 红色
每两个数字为一组，如果一组数字一样，可以省略只写一个
针对border-width、border-style和border-color书写多个属性值时：
一个属性值：四个边
两个属性值：上下边左右边
三个属性值：上边左右边下边
四个属性值：上边右边下边左边

边框属性的简写：
border: 宽度样式颜色;
单独设置一个边的边框样式：
border-left/right/top/bottom: 宽度样式颜色;
单独设置一个边的边框宽度或样式或颜色：
border-left/right/top/bottom-width: 宽度;
border-left/right/top/bottom-style: 样式;
border-left/right/top/bottom-color: 颜色;

通过边框可以实现三角形：
1、元素宽高为0px;
2、元素不能有背景颜色
3、四个边的边框宽度和样式一样
4、只保留一个边的边框颜色，其他三个边都为透明

行内元素书写边框时左右边框显示没有问题，但是上下边框显示会影响这个元素上下的同级元素的显示
	所以以后都不给行内元素书写上下的边框，左右边框也基本不会写
	行内元素不存在上下的边框

背景

背景相关属性

background-color 规定元素的背景颜色
属性值： transparent 默认值，透明色英文单词颜色表示十六进制颜色表示
background-image 规定图片作为背景显示
属性值： url(引入作为背景图片的路径及全称–相对路径);
说明：网页上有两种图片形式：插入图片、背景图；
插入图片：属于网页内容，也就是结构。
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。
背景图片的显示原则：
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图
background-repeat 规定背景图的平铺方式
属性值： repeat 默认值，平铺 repeat-x 横向平铺 repeat-y 纵向平铺 no-repeat 不平铺
background-position 规定背景图的显示位置
属性值：默认值： left top === 0px 0px == 0% 0%
value1(水平位置)：left center right length(数值+单位)
%(根据背景区域的宽度与背景图的宽度的差值计算得到的百分比值)
value2(垂直位置)：top center bottom length(数值+单位)
%(根据背景区域的高度与背景图的高度的差值计算得到的百分比值)
如果只给到第一个属性值水平位置，第二值为书写，则第二个值默认为 center
正常情况下水平位置正值背景图向右偏移，负值向左偏移；垂直位置正值背景图向下偏移，负值向上偏移
但是在使用百分比确定背景图位置时，当背景图尺寸大于背景区域尺寸时：
水平位置正值背景图向左，负值向右；垂直位置正值背景图向上，负值向下
background-attachment 规定背景图片的状态
属性值： scroll 默认值，滚动状态
默认情况下背景图都是根据书写背景图的元素的左边和上边进行位置偏移的
fixed 固定状态
设置背景图根据浏览器的显示窗口的左边和上班进行位子偏移，所以只有当元素的位置和背景图的位置产生重合时才能看到背景图片
背景属性的简写
background: 颜色 url() 平铺方式背景图状态水平位置垂直位置;
属性值的顺序部分先后，但水平位置和垂直位置需要有前后
简写中某个值取默认值时可以省略不写

网页上常用的图片格式（压缩图片）
1） jpg ：有损压缩格式，靠损失图片自身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )，不支持透明;
2） gif ：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;
3） png ：有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的源文件格式，适用于颜色数量较少的图像;