盒子实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet"href="css/css.css">-->
<title>盒子</title>
<style>
.box{
width: 200px;
height: 200px;
/*background-color 设置背景颜色*/
background-color: fuchsia;
/*padding 内边距-上右下左
/*padding: 20px 30px 15px 10px ;*/
/*!*padding 上20 左右30 下50*!*/
/*padding: 20px 30px 50px;*/
/*!*!*padding: 上下20 左右50;*!*!*/
/*padding: 20px 50px;*/
/*!*padding: 上右下左相等;*!*/
/*padding: 10px;*/
/*margin: 外边距路内边距设置相同;*/
/*内外边距不可见的，是透明的，只能设置宽高度*/
/*border边框 可以设置宽度/颜色/样式 */
/*border-top: 5px solid red;*/
/*border-left: 15px dotted blue ;*/
/*上右下左边框同样设置*/
border: 5px solid black;
/*连框圆角设置*/
border-radius:20px ;
}
</style>
</head>
<body>
<body>
<div class="box"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS基本
link标签 是加载样式表 rel属性是加载样式表 href属性是样式路径
<link rel="stylesheet" href="">
<!--前景色就是当前文本的颜色-->
/* 用属性来设置的元素内联样式大于style内部样式*/
//padding 内边距
//margin 外边距 上top 右right 下 bottom 左left
//Css样式优先级 class 就是类选择器 标签选器Tag
//id大于class类选择器大于标签选器 ID为#号