边框
边框相关属性
border-width 边框宽度 属性值:length(数值+单位)例如 width:10px
border-style 边框样式 属性值:
常用 :solid 实线 dashed 虚线 double 双线 dotted 点线
不常用 :groove 3D凹槽边框 ridge 3D垄状边框 inset 3Dinset outset 3Doutset边框边框
border-color 边框颜色 属性值:英文单词颜色 十六进制颜色 rgb颜色
针对border-width 、border-style 和 border-color 属性可以书写 一到四个属性值:
一个属性值:四个方向
两个属性值:上下 左右
三个属性值:上 左右 下
四个属性值:上 右 下 左
border 规定元素的边框的属性的简写---边框的简写属性---规定四个方向的边框简写
border: 宽度 样式 颜色;
简写时属性值得顺序不分先后 例如 border:1px solid red 1像素红色的实线
可以单独规定元素的一个方向的边框--通过简写:
border-left: 宽度 样式 颜色;
border-right: 宽度 样式 颜色;
border-top: 宽度 样式 颜色;
border-bottom: 宽度 样式 颜色;
单独规定一个方向的边框 宽度 或 颜色 或 样式:
border-left-width: 属性值;
border-left-style: 属性值;
border-left-color: 属性值;
border-right-width: 属性值;
border-right-style: 属性值;
border-right-color: 属性值;
border-top-width: 属性值;
border-top-style: 属性值;
border-top-color: 属性值;
border-bottom-width: 属性值;
border-bottom-style: 属性值;
border-bottom-color: 属性值;
通过边框可以实现 三角形 或 梯形 等 形状 的效果:下面我们就实现下吧
首先我们看下正常的border
.box {
background: #ddd;
width: 100px;
height: 100px;
border-top: 20px solid yellow;
border-right: 20px solid red;
border-bottom: 20px solid black;
border-left: 20px solid blue;
}
<div class="box"></div>
当元素的宽高减小为0时,我们就会发现一个很好玩的现象
这个时候我们可以通过设置三条边的颜色为透明,三角形就这样诞生啦
.box {
/* background: #ddd; */
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid blue;
}
列表
列表可以分为有序和无序列表
相关属性
list-style-type 规定列表符号的显示类型
none 去掉列表符号不显示
list-style-image 规定图片作为列表符号显示
url(图片路径)
list-style-position 规定列表符号的显示位置
outside 默认值,外面 inside 里面
list-style 规定列表属性的简写
记住:
list-style: none; === list-style-type: none;
其实在实际的开发过程中用到的就是 list-style:none 像列表符号我们有专门的图片去通过定位去放到指定的位置上
背景
背景相关属性
background-color 规定元素的背景颜色
属性值: transparent 默认值,透明色
英文单词颜色
十六进制颜色
rgb颜色
background-image 规定图片作为元素的背景显示--背景图
属性值: url(引入背景图的路径及全称)
背景图片的显示原则:
元素背景区域的大小 等于 图片大小,背景图片正好显示在元素中
元素背景区域的大小 大于 图片大小,背景图片将默认平铺,直至铺满元素
元素背景区域的大小 小于 图片大小,只显示元素范围以内的背景图
网页上有两种图片形式:插入图片、背景图;
插入图片:属于网页内容,也就是结构。<img src=""/>
背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等
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(数值+单位)
%(根据元素背景区域的高度 减去 背景图的高度 的差值 计算的百分比值)
说明:
使用length(数值+单位)规定背景图片的位置
水平上是规定 背景图片的左边 距离 元素背景区域的左边 的距离,正值向右,负值向左
垂直上是规定 背景图片的上边 距离 元素背景区域的上边 的距离,正值向下,负值向上
使用%百分比值规定背景图片的位置
background-attachment 规定背景图片的状态
属性值:
scroll 默认值,滚动状态
背景图片位置设定是根据元素的左边和上边规定的
fixed 固定状态
背景图片位置设定是根据浏览器显示窗口的左边和上边规定的
背景属性的简写
background: 颜色 url() 平铺方式 背景图状态 水平位置 垂直位置;
例如 background:url() no-repeat fixed 10px 10px/100px 100px
图片地址 不平铺 固定 向下 向右10px 背景宽高为100px
简写时,属性值的顺序不分先后,但是背景图位置,会解析 前面的为水平位置,后面的为垂直位置
简写时,某个属性值取默认值时,可以省略不写,会自动按照默认值执行
多个背景图设置
可以通过逗号分隔的方式给一个元素设置多张背景图
但是背景颜色只能规定一个
如果多张背景图的位置发生重合,则写在前面的背景图显示在上面,写在后面的背景图显示在下面
多张背景图书写是,背景颜色应规定在最后一个背景图的简写位置上
文本
文本相关属性
color 规定元素内文本的颜色
属性值:英文单词颜色 十六进制颜色 rgb颜色
font-size 规定元素内文字的大小
属性值:length(数值+单位)
font-family 规定元素内文本的字体类型
font-weight 规定元素内文本是否加粗显示
属性值:normal 默认值,不加粗 bold 加粗 === bolder 更粗
100-500 600-900
font-style 规定元素内文本是否倾斜显示
属性值: normal 默认值,不倾斜 italic 倾斜 === oblique 倾斜度大
line-height 行高:文字在一行内占据高度
文本属性的简写:
font: 是否倾斜 是否加粗 文字大小/行高 "字体";
简写时,属性值的顺序不分先后,但是 文字大小 和 行高 的写法 不可改变
简写时,某个值取默认值时,可以省略不写
定义简写绝对不能省略 文字大小 和 "字体" ,必须要写的
即使不需要定义字体,也至少要写 双引号 ""
常用的 font:24px/32px ""; 文字大小24px 行高32px
text-align 规定元素内文本的水平对齐方式
属性值: left 默认值,左对齐
centetr 居中对齐
right 右对齐
justify 分散对齐(针对占满整行的文本有效)
text-indent 规定元素内文本的 首行缩进
属性值: length(数值+单位),可以规定正负值
正值向后缩进,负值向前突出
注:此属性仅针对元素内第一行文本有效
text-decoration 规定元素内文本的 修饰
属性值: none 没有修饰
overline 添加上划线
underline 添加下划线
line-through 添加删除线
letter-spacing 规定调整字符(汉字,字母等)的间距
属性值:length(数值+单位),可以规定正负值
默认值为0,表示字符之间没有间距
正值字符间距放大,负值字符间距缩小
word-spacing 规定调整单词的间距
属性值:length(数值+单位),可以规定正负值
默认值为0,表示单词之间保留一个空格的间距
正值单词间距放大,负值单词间距缩小
text-transform 规定元素内单词的大小写
属性值: none 默认值,按照书写的大小写显示
capitalize 规定单词的首字母大写显示
uppercase 规定单词全部大写显示
lowercase 规定单词全部小写显示
此外在补充二个
white-space 规定浏览器如何处理元素内的空白(空格和回车换行)
normal 默认值,浏览器将元素内的空白忽略,文本在元素内正常换行显示
pre 浏览器将元素内的空白保留,强制文本在一行显示
nowrap 浏览器将元素内的空白忽略,强制文本在一行显示
pre-wrap 浏览器将元素内的空白保留,文本在元素内正常换行显示
pre-line 浏览器将 空格的空白忽略,将换行的空白保留,本在元素内正常换行显示
text-overflow 规定元素内单行文本溢出元素时是否显示省略号
clip 针对当行文本溢出的内容进行裁剪,废物,没有
ellipsis 显示省略号
显示省略号
#box{
background: red;
font: 20px/50px "";
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="box">
元素内正常写文本能让这个文本单行显示而且溢出在元素之外吗?
</div>
多行文本让最后一行显示省略号
#box {
background: red;
font: 20px/50px "";
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
总结:今天我们主要介绍下css常用的属性以及用这些属性写的小案例 下篇文档我们主要讲解下浮动和内外边距
如果大家有什么不理解的欢迎大家前来讨论 联系方式:zhang_chao96@163.com