欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-15 19:26:40
...

一.复合属性

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;
   }