HTML与CSS之css样式

2016-10-27 本文已影响122人 JustinPenChia

一.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    左边框的颜色`