一.css出现的位置

1.行间样式表

给单独的标签添加样式
语法：<div style=""></div>
<div style="width:100px;height=100px;background:red"></div>
缺点:如果样式太多就不利于修改

2.内部样式表

样式表写在了html文件里面
语法：把样式写在一对<style></style>标签当中，这个标签对是放在html页面里面的。一般style标签放在<head></head>里面
缺点：内部样式表的作用范围只存在当前的页面

3.外部样式表

把样式写在一个单独的文件里，用到的时候用地址把它引用进来就可以了
例如:
html文件

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div></div>
    </body>
</html>`
index.css文件
`div{
    width: 100px;
    height: 100px;
    background: #f00;
}

ps: W3C规定：行为，结构，样式相分离

二.属性

属性是描述元素的，总以名称=值对的形式出现
写法：选择器{样式属性：值...}

三.使用css设置边框(border)

1.复合样式边框

组成(三个参数的位置可以调换，但不建议)：
1.边框的粗细 1px
2.边框的样子
solid 实线
dashed 虚线
dotted 点划线(不兼容，不同浏览器显示的是不一样的)
3.边框颜色
red 颜色的英文表示
#f00 颜色的十六进制表示
rgb(255,0,0) 颜色的RGB表示方法
在CSS3中rgba(255,0,0,0.5) 第四个参数表示透明度
例：

div{
    width: 300px;
    height: 300px;
    border: 1px dotted rgba(255,0,0,0.2);   
}

2.单一样式边框

1.边框粗细
border-width: 1px 2px 4px 8px;
上边右边下边左边
border-width: 1px 2px 4px;
上边右边和左边下边
border-width: 1px 2px;
上边和下边左边和右边
2.边框的样子
border-style: solid dashed dotted solid;
上边右边下边左边
border-style: solid dashed dotted;
上边右边和左边下边
border-style: solid dashed;
上边和下边左边和右边
3.边框颜色
border-color:red green black yellow;
上边右边下边左边
border-color:red green black;
上边右边和左边下边
border-color: red green;
上边和下边左边和右边

例如：

div{
    width: 300px;
    height: 300px;
    border-width: 1px 2px 4px 8px;
    border-style: solid dashed dotted solid; 
    border-color:red green black yellow;
   }

3.单方向的边框

    border-top      上边框
       border-top-width     上边框的宽度
       border-top-style     上边框的样子
       border-top-color     上边框的颜色 
    border-right    右边框
       border-right-width   右边框的宽度
       border-right-style   右边框的样子
       border-right-color   右边框的颜色 
    border-bottom   下边框
       border-bottom-width  下边框的宽度
       border-bottom-style  下边框的样子
       border-bottom-color  下边框的颜色 
    border-left     左边框
       border-left-width    左边框的宽度
       border-left-style    左边框的样子
       border-left-color    左边框的颜色`

HTML与CSS之css样式