CSS简单小结

CSS是一种分层思想，传统的HTML需要在内容的基础上添置许多属性，并且在需要给相同类型的元素添加属性时会显得十分冗杂，但是运用CSS做统一样式规划的话，就可以节约时间、简化流程。
示例代码：

<style>
td{
	background-color:gray;
	}
	</style>
	<table border="1">
	<tr>
		<td>amazarashi</td>
		<td>yusari</td>
	<tr>
		<td>yasuo</td>
		<td>derious</td>
	</tr>
	</table>

使用选择器选中了这个p标签

使用选择器也会选中这个p标签

``` 也可以单独在p标签中属性直接加入style="color:gray"以实现效果。

ID选择器

<meta charset="UTF-8">
<style>
    p{
        color:gray;
    }
    #p1{
        color:red;
    }
    #p2{
        color:green;
    }
</style>
<p>使用选择器选中了这个p标签</p>
<p id="p1">使用id选择器选中这个p标签</p>
<p id="p2">使用id选择器选中了这个p标签</p>

类选择器：
以.xxxx形式出现
示例代码：

<meta charset="UTF-8">
<style>
    p{
        color:gray;
    }
    .singer{
        color:red;
    }
    .megene{
        color:green;
    }
</style>
<p>使用选择器选中了这个p标签</p>
<p class="singer">使用id选择器选中这个p标签</p>
<p class="megene">使用id选择器选中了这个p标签</p>

也可以叠加选择器
例如：p.singer表示p元素中class为singer的元素

在style中可设置background-color、width（取百分比或xxpx像素值皆可）、height(同width取值）
blackground-color取值：
1.gray.red.green等
2.rgb(0<sub>256,0</sub>256,0~256)中间三个值代表红绿蓝的值
3.以16进制表示红绿蓝值#000000

当然，背景不一定只选择颜色，也可以选择为图片
设置background-image:url(xxxx.png)即可
还可设置background-repeat属性为repeat/repeat-x/repeat-y/no-repeat来实现重复效果
或者设置background-size：contain来实现图片的平铺，是通过拉伸图片实现的，所以会有失真。

下面总结文本样式：
color:可以设置三种写法，见背景颜色设置。
text-align:left/center/right 设置文本在对应容器中的所在位置，要注意一般在div中设置，因为div为块级元素，默认宽度为100%，但是span就不行，span宽度默认是文本的宽度，所以span中看不出效果。
text-decoration:overline/line-through/underline/blink/none
后两个为闪烁（现在几乎不用）、去掉超链接的下划线
line-height(设置行间距，值为数字或者百分比）
letter-spacing（设置字符间距，值为数字）
word-spacing（设置单词间距，值为数字）
text-indent（设置首行缩进，值为数字）
text-transform（设置大小写）有uppercase/capitalize/lowercase值
为全部大写、首字母大写、全部小写的效果
white-space（设置空白格）有normal（默认，有多个空白格或者换行符都会被合并成一个）/pre（有多少空白格或换行符就显示多少，就算长度长过头，超过父容器也不会换行）/pre-warp（跟前一个几乎一样，但是会换行）/nowrap（头铁不换行，除非使用br）

下面总结字体样式：
font-size（设置字体大小，可设置xxpx或者百分比或者0.xem效果等同x0%）
font-style（normal标准体/italic为斜体）
font-weight(normal/bold为粗体）
font-family(设置字体，如黑体等等 例如 font-family:default/Arial/宋体）
一个个声明谁顶得住啊 太麻烦了
所以可以把这些属性都写在一起
例如

<style>
p.font{
	font:italic bold 30px "宋体";
	}
</style>
<p class="font">斜体 加粗 大小30px的宋体字</p>

cursor:crosshair/default/pointer等等（设置鼠标的样式，即鼠标悬浮在对应元素上方时，鼠标的样子会相应改变，种类很多就不一一列举了）

下面总结表格相关的样式：
table-layout:automatic（单元格的大小由td内容宽度决定）/fixed（单元格大小由td设置的宽度决定）且只对连续的英文字母起作用，中文无效果。
border-collapse:separate（边框分隔）、collapse（边框合并）

边框：
1.边框风格：
属性： border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
2.边框颜色：
属性：border-color
值：red,#ff0000,rgb(255,0,0)
3.边框宽度
属性：border-width
值：数字

混<sub>合</sub>在<sub>一</sub>起：

<meta charset="UTF-8">
<style>
   .all{
       border: 1px dotted lightblue;
    }

</style>


<div class="all">边框宽1Px,点状，亮蓝色 </div>

emmmmm，设置只有一个方向有边框;
border-top-style:solid;
border-top-color:red;
border-top-width:50px;
(top/bottom/left/right为上下左右)

元素内边距：
padding-left:xxpx
也可单写padding：xxpx,xxpx,xxpx,xxpx 表示为上右下左的内边距的值
如果缺少左内边距的值，则使用右内边距的值。
如果缺少下内边距的值，则使用上内边距的值。
如果缺少右内边距的值，则使用上内边距的值。

元素外边距
指的是元素边框和元素边框之间的距离
属性：
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距

那么正常的边框模型一般这么写:

.boxmodel{
	width:70px;
	padding:5px;
	margin:15px;
}

即表示该类元素内容宽度为70px,内边距为5px,外边距为15px

超链状态有4种
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候
可通过设置
a:link/visited等 {color: 具体颜色}来设置该超链接在不同状态下的颜色
隐藏元素有两种方式
display:none;（该元素会让出位置）
visibility:hidden; （元素只是看不见，位置仍然占有）

正常运用CSS都不会像上面那样直接在html文件中直接写<style>标签，而是创建一个.css文件，键入相应的CSS代码，并在html中通过
<link rel="stylesheet" type="text/css" href="xxxxx.css"/>来引用.css文件
style标签优先级：!important>标签内的style属性>html中style标签>css的style