CSS笔记2：背景、文本、段落、边框、超链接

2.1 背景：颜色或图

p.a{
	background-color:gray;//表示背景颜色为灰色
	//或者也可以用#010101，rgb(1,1,1)表示
	//如果是背景图的话那么就用background-image:url(xx.jpg);来表示
	//其中，图片地址采用相对地址。
	//另外，还可以补充重复，平铺属性
	background-repeat:repeat-x; 表示背景水平重复
	background-size:contain;表示拉伸背景
}

2.2 文本格式调节：颜色、下划线、大小写、字体、展示

p{
	color:pink; //表示粉色
	text-decoration:overline/line-through/underline;// 表示上划线/删除/下划线
	text-transform:uppercase/capitalize; //表示大写 首字母大写
	font-size:50%/40px; //字体大小
	font-style:italic; //斜体
	font-weight:bold; //粗体
	font-family:宋体; //设置宋体
	//或者，也可以写：font:italic bold 35px "新宋体";
          
}

2.3 段落格式调节：对齐，间距

有两个特殊的元素需要注意： 分别是div和span
其中，div是块级元素，常见的还有h1,p等，默认该段文字将要占用宽度100%。
而span是内联元素，另外还包括a,b,strong,input等；它代表文字的宽度等于边框的宽度。
那么，左右对齐就对span无效了

div{
	text-align:left; 表示左对齐
	line-height:150%; 行间距
	letter-spacing:2; 字符间距
	word-spacing:3 ; 单词间距
	text-indent:50; 首行缩进
	white-space:normal/pre/pre-wrap/nowrap; 表示连续空白符将视为一个/保留空白格/保留空白格和换行符/直到见到<br/>才换行
	
}

2.4.1 边框：尺寸调节

边框默认不显示，必须运用border-style:solid让其显示。

p.a{
	width:50%/140px;//表示框架宽度
	//height 表示长度
	border-style:solid/dotted/dashed/double;//表示边框种类
	border-color:blue; //边框颜色
	border-width:1px;//边框宽度
   //或者写成： border:1px dotted LightSkyBlue;
	
	//border-top-style/color/width等 调节某个边框。
	//如果两边都有边框，比如左边和上面，那么左上将会形成等分的情况
}

2.4.2 边框：边距

需要注意的语法是，padding:10 20;既没有逗号，也没有px

.a{
	padding-left:30px; 左内边距
	padding: 10 20 30 40; 顺时针（从上开始）四个方向边距分别为10 20 30 40
	padding: 10 20 30; 如果缺乏边距指定 那么剩下的元素默认会使用对面的边距
	margin-left:30px;表示外部的左边距（内联元素无法使用）
}

//以下代码表示内容区的宽度为70px,内部边距padding为10px 外部边距margin为7px
.box{
    width:70px;
    padding:5px;
    margin: 10px;
}

2.6 超链接

超链接存在4种状态，在style区域：

a:link{color: #ffff00};     通过改变颜色可以改变超链接在该状态下的展示情况
a:link/visited/hover/active 分别表示未打开/访问过/鼠标停留/鼠标摁下

在内容端，用

<a href="xx.com">xx.com</a>”

表示超链接

另外，超链接默认是有下划线的，可以通过之前的方法去掉

2.7 其他

table.1{
    table-layout:automatic/fixed 适应内容/由td上设置的宽度决定
	border-collapse:separate 边框合并/分离
}
span{
	cursor:crosshair/text/pointer/wait/not-allowed; 表示鼠标停在上面之后会有一些特殊效果
}