复合属性、列表属性、文本属性
一.复合属性
background 复合属性
url: 地址(本地地址,网络地址);
repeat : 默认值 水平和垂直都铺满;
repeat-x:只铺满水平方向(左右)
repeat-y: 只铺满垂直方向(上下);
no-repeat: 不平铺 (图片放不满,留出空白);
background-size:100% 100% 背景图片缩放
.box{
width: 500px;
height: 100px;
background: url(../../../img/1.jpg) no-repeat;
background-size: 50% 50%;
border: 2px solid black;
}
background-position: 背景图的移动
background-position: 值1 值2;
值1: 水平方向移动的距离
值2: 垂直方向移动的距离
值的形式:
1. left center right top center bottom
2. px(像素)
3. %(百分比)
备注 :背景大小的百分比是参考标签自身的大小
背景移动的百分比市参考图片自身的大小
background-position: 50% 50%;
background-position: left 100px; //可混用
overflow: 用来处理内容超出容器
hidden: 隐藏;
scroll: 滚动超出的部分
overflow: scroll;
复合属性 border
边框: 宽度 样式 颜色
样式: 实线 solid
虚线 dashed
点线 dotted
style:border-width(粗线)
border-color(颜色)
border: 2px solid black;
为不同的边框分别设置样式
如果希望分别为4条边框设置不同的样式:border-left,border-right, border-top,border-bottom, border-right-color 等
二.列表属性
清除列表的默认的项目符号
list-style: none;
可以设置标签自带的项目符号
list-style-type: 值;
将自带的项目符号,变成图标,none 默认,无图像被显示
list-style-image: url(../../1.jpg);
调整位置
inside: 项目图标的左侧和下一行文字对齐;
outside: 当前列表内容和下一行列表内容对齐,并不在图标位置(默认值);
list-style-position: inside;
list-style-position: outside;
三.文本属性
设置字体:字体大小 默认是16px。
span{
font-family: "楷体";
font-size: 30px;
}
font-style: 字体样式;
normal : 正常 (默认);
italic : 斜体;
oblique: 倾斜;
span{
font-style: oblique;
}
字体加粗: font-weight
bolder: 特粗体;
bold: 加粗体;
normal: 正常 (默认);
lighter: 细体;
span{
font-weight: lighter;
vertical-align: top;
}
单词间隔
p{
font-size: 40px;
word-spacing: 20px;
}
字母间隔
p{
letter-spacing: -10px;
}
首行缩进
例如span 之类只凭借内容撑开大小的标签,无法使用
例如div,p 之类独占一行的标签,可以使用
em: 大小的单位
父元素的字体大小 = 1em
em也是一个相对单位
p{
text-indent: 2em;
}
文字装饰text-decoration
none;正常显示
underline;加下线
line-through;删除线
overline;加顶线
.text{
text-decoration: underline solid pink;
}
设置字母: capitalize:首字母大写
uppercase:全部大写
lowercase:全部小写
b{
text-transform: lowercase;
}