复合属性、列表属性、文本属性

一.复合属性

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;
   }
发布了42 篇原创文章 · 获赞 0 · 访问量 878

猜你喜欢

转载自blog.csdn.net/cybcc/article/details/104070731