css (层叠样式表）

行内样式：

<标签 style="多个样式"></标签>
color:颜色
background-color:背景色
font-size:字体大小
font-family:字体名称
font-style:italic 斜体
font-weight:bold 粗体
text-align:center居中
background-image: url(背景图片路径)
background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复)
background-size: 110px 缩放背景图大小
border 边框颜色线条样式线条宽度;

border-color: 边框颜色
border-style: 线条样式( solid 实心线)
border-width: 线条宽度
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框

div容器标签：

<div>
    <p>
    <table>
    ...
</div>

内部样式表

<html>
    <head>
        <style>样式定义</style>
    </head>
</html>

外部样式表

将样式信息单独定义在*.css文件中，然后使用如下：

<html>
    <head>
        <link rel="stylesheet" href="css文件路径">
    </head>
</html>

内间距:

padding：top上 right右 botton下 left左

外间距：

margin : top上 right右 botton下 left左

盒子模型

外间距—》边框—》内间距—》内容

z-index

position:absolute（绝对定位）; left:x坐标（向右）; top:y坐标(向下)

重用样式：

<html>
    <head>
        <style>样式表</style>
    </head>
</html>

选择器{样式}

1.元素：使用标签<div>、<p>匹配
2.class：根据class属性值匹配

<p class="值">
.值{样式}

3.id:根据id属性值匹配—-id取值唯一

<p id="值">
#值{样式}

4.父子选择器：父选择器>子选择器
5.后代选择器：祖先选择器后代选择器
6.伪类选择器

:hover  当鼠标悬浮在标签之上，算匹配 
:nth-child 当作为第n个孩子元素, n从1开始
:last-child 当作为最后一个孩子元素

选择器的优先级

！important > style > #id > .class > 元素
注：！important 提升样式优先级

子标签可以继承父标签样式，也可以覆盖父标签同名样式

Web前端之css