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

一.复合属性

background 复合属性
url: 地址(本地地址，网络地址);
repeat : 默认值 水平和垂直都铺满;
repeat-x：只铺满水平方向(左右)
repeat-y: 只铺满垂直方向(上下);
no-repeat: 不平铺 (图片放不满，留出空白);
background-size：100% 100% 背景图片缩放

.box<span class="token punctuation">{</span>
			width: 500px<span class="token punctuation">;</span>
			height: 100px<span class="token punctuation">;</span>
			background: url<span class="token punctuation">(</span><span class="token punctuation">..</span>/<span class="token punctuation">..</span>/<span class="token punctuation">..</span>/img/1.jpg<span class="token punctuation">)</span> no-repeat<span class="token punctuation">;</span>
			background-size: 50% 50%<span class="token punctuation">;</span>
			border: 2px solid black<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>

background-position: 背景图的移动
background-position: 值1 值2;
值1： 水平方向移动的距离
值2： 垂直方向移动的距离
值的形式：

1. left center right top center bottom
2. px（像素）
3. %（百分比）
   备注 ：背景大小的百分比是参考标签自身的大小
   背景移动的百分比市参考图片自身的大小

background-position: 50% 50%<span class="token punctuation">;</span>
background-position:  left 100px； //可混用

overflow: 用来处理内容超出容器
hidden: 隐藏;
scroll: 滚动超出的部分

 overflow: scroll<span class="token punctuation">;</span>

复合属性 border
边框： 宽度 样式 颜色
样式： 实线 solid
虚线 dashed
点线 dotted
style：border-width(粗线)
border-color(颜色)

 border: 2px solid black<span class="token punctuation">;</span>

为不同的边框分别设置样式
如果希望分别为4条边框设置不同的样式：border-left,border-right, border-top,border-bottom, border-right-color 等

二.列表属性

清除列表的默认的项目符号

list-style: none<span class="token punctuation">;</span>

可以设置标签自带的项目符号

list-style-type: 值<span class="token punctuation">;</span>

将自带的项目符号，变成图标，none 默认，无图像被显示

list-style-image: url<span class="token punctuation">(</span><span class="token punctuation">..</span>/<span class="token punctuation">..</span>/1.jpg<span class="token punctuation">)</span><span class="token punctuation">;</span>

调整位置
inside: 项目图标的左侧和下一行文字对齐;
outside: 当前列表内容和下一行列表内容对齐，并不在图标位置(默认值);

list-style-position: inside<span class="token punctuation">;</span>
list-style-position: outside<span class="token punctuation">;</span>

三.文本属性

设置字体：字体大小 默认是16px。

span<span class="token punctuation">{</span>
        font-family: <span class="token string">"楷体"</span><span class="token punctuation">;</span>	 
        font-size: 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

font-style: 字体样式;
normal : 正常 (默认);
italic : 斜体;
oblique: 倾斜;

span<span class="token punctuation">{</span>
       font-style: oblique<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

字体加粗： font-weight
bolder: 特粗体;
bold: 加粗体;
normal: 正常 (默认);
lighter: 细体;

span<span class="token punctuation">{</span>
       font-weight: lighter<span class="token punctuation">;</span>
       vertical-align: <span class="token function">top</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

单词间隔

p<span class="token punctuation">{</span>
   font-size: 40px<span class="token punctuation">;</span>
   word-spacing: 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

字母间隔

p<span class="token punctuation">{</span>
    letter-spacing: -10px<span class="token punctuation">;</span>
 <span class="token punctuation">}</span>

首行缩进
例如span 之类只凭借内容撑开大小的标签，无法使用
例如div,p 之类独占一行的标签，可以使用
em: 大小的单位
父元素的字体大小 = 1em
em也是一个相对单位

p<span class="token punctuation">{</span>
   text-indent: 2em<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

文字装饰text-decoration
none;正常显示
underline;加下线
line-through;删除线
overline;加顶线

 .text<span class="token punctuation">{</span>
       text-decoration: underline solid pink<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

设置字母： capitalize:首字母大写
uppercase:全部大写
lowercase:全部小写

  b<span class="token punctuation">{</span>
     text-transform: lowercase<span class="token punctuation">;</span>
   <span class="token punctuation">}</span>