一.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 左边框的颜色`
作者：JustinPenChia
链接：https://www.jianshu.com/p/0c06d1c25240
共同学习，写下你的评论
评论加载中...
作者其他优质文章
