/*设置整个body里面*/
body {
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif; /*修改字体*/
font-size: 16px; /*字体大小*/
font-weight: normal; /*字重*/
/* 简写,效果同上三行 */
/* font: normal 16px Arial, Helvetica, sans-serif */
line-height: 1.5em; /*行间距*/
}
/* 按钮 */
button {
background-color: #444444;
color: royalblue;
padding: 10px 15px; /* 内边距:上下10像素,左右5像素 */
}
/* 鼠标移到按钮上的状态 */
button:hover {
background-color: red;
}
/* 点击按钮后状态 */
button:active {
background-color: #fff;
}
/* 对超链接设置 */
a {
text-decoration: none;
color: #555555;
}
/*鼠标移到按钮上的状态*/
a:hover {
color: cyan;
}
/*点击按钮后状态*/
a:visited {
color: red;
}
/*设置box1类里面*/
.box1 {
background-color: antiquewhite; /* 背景色 */
color: blue; /* 字体颜色 */
border: 5px blue solid; /* 5像素的蓝色边框 */
border-right: 5px red solid; /* 单独设置5像素红色直线右边框 */
border-left: 8px blue solid;
border-top: 10px green dotted; /* 单独设置10像素绿色点线上边框 */
border-bottom: 5px fuchsia double; /* 单独设置5像素粉色双层线下边框 */
/* 也可以单独只设置某侧边框的某项属性(这里如果这么设置会覆盖前面的效果)
border-bottom-width: 8px;
border-bottom-style: dashed;
*/
padding-top: 10px; /* 修改盒子模型中的padding内边距,可以打开浏览器的开发者工具查看 */
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin-top: 20px; /* 盒子向下移20个像素 */
}
.clearfix {
clear: both;
}
/*修改box1中的h1标题*/
.box1 h1 {
font-family: 'Times New Roman', Times, serif; /*字体*/
font-weight: 800; /*字重*/
font-style: italic; /*字体风格:意大利斜体*/
text-decoration: underline; /*下划线*/
text-transform: uppercase; /*全大写*/
letter-spacing: 0.2cm; /*字母间距*/
word-spacing: 0.4cm; /*词间距*/
}
.box2 {
border: 5px dotted #cccccc; /*5像素边框*/
border-radius: 25px; /*圆角*/
padding: 20px; /*内边距*/
margin: 20px 60px 20px 15px; /* 外边距-上右下左(顺时针) */
/* 位置偏移
position: relative; //position: absolute;
top: 30px;
left: 30px;
*/
}
.box2 h1 {
text-align: center;
}
.container{
width: 80%; /* 宽度80% */
margin: auto; /* 居中 */
}
.list li {
list-style-image: url('../image/check.png'); /* 链接一个图片 */
/* list-style-type: square; 自带的方块 */
}
.block {
float: left; /*三个float*/
width: 33.3%;
border: 1px solid #ccc; /*加边框,但是会超出*/
box-sizing: border-box; /*有边框的box*/
}
#main-block { /* #是通过id识取;.是通过类识取 */
float: left;
width: 70%;
border: 1px solid #ccc;
box-sizing: border-box;
}
#sidebar {
float: left;
width: 30%;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* 选择even偶数位应用,奇数用odd */
.list2 li:nth-child(even) {
background-color: green;
}
/* 选择第一个作用 */
.list2 li:first-child {
background-color: red;
}
/* 选择第五个作用 */
.list2 li:nth-child(3) {
color: aqua;
}
.position-box {
width: 500px;
height: 500px;
border: 1px solid black;
position: relative; /* 让下面两个h1,h2位置偏移以box为参考 */
}
.position-box h1 {
position: absolute;
top: 50px;
}
.position-box h2 {
position: absolute;
right: 30px;
}
#fixed {
position: fixed; /*固定在页面右下角*/
right: 0;
bottom: 100px;
}
CSS速成
最新推荐文章于 2024-02-01 14:03:59 发布