爱站程序员基地CSS基本属性
背景效果
- background-color：定义了元素的背景颜色.
CSS中，颜色值通常以以下方式定义:
十六进制 – 如：\”#ff0000\”
RGB – 如：“rgb(255,0,0)”
颜色名称 – 如：“red”
h1 {background-color:red;}p {background-color:#e0ffff;}div {background-color:rgb(255,0,0)}
- background-image：描述了元素的背景图像,默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {background-image:url(\'图片路径\');}
- background-repeat：设置背景图像是否及如何重复。
- background-attachment:背景图像是否固定或者随着页面的其余部分滚动。
- background-position:设置背景图像的起始位置。
文本颜色
颜色(color)属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 – 如: ＃FF0000
一个RGB值 – 如: RGB(255,0,0)
颜色的名称 – 如: red
body {color:red;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为\”justify\”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:none;}
其他文本属性
字体属性
边框属性
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
…
margin(外边距)属性
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性
Padding(填充)属性
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
简单练习静态页面
部分页面效果图
部分CSS代码
/* 公共样式 */body{font-size: 12px;font-family: \'microSoft YaHei\';color: #333333;}body,ul,li,a,p,h2,h3{margin: 0;padding: 0;text-decoration: none;list-style: none;}.float_left{float: left;}.float_right{float: right;}/* 顶端最大框的样式 */#header{width: 100%;height: 130px;}/* 红色内容边框 */.top_bar{width: 100%;height:40px;background:#b1030c;}.wrap{width: 1160px;height: 100%;margin :0 auto;}/* 左边购票框 */.wrap_left{width: 80px;height: 100%;background: url(../img/car.png) no-repeat;background-position-y: 3px ;cursor: pointer;}.wrap_left a{font-size: 14px;width: 100%;height: 100%;display: block;line-height: 37px;color: #fff;margin-left: 23px;}/* 右边电话框 */.wrap_right{width: 123px;height: 100%;background: url(../img/tel.png) no-repeat;line-height: 37px;background-position-y: 3px ;}.wrap_right span{font-size: 14px;width: 100%;height: 100%;display: block;margin-left: 23px;color: #fff;}/* 中间框 */.marquee{height: 100%;width: 850px;margin:0 auto;line-height: 37px;font-size: 14px;color: #fff;}/* 导航框 */.nav{width: 1196px;height:90px;margin:0 auto;padding: 10px 0;}.nav li{text-align: center;line-height: 70px;letter-spacing: 0.1em;font-size: 14px;width: 135px;height: 70px;float: left;margin:0 auto;position: relative;}.nav ul li a i{display: block;height: 3px;position: absolute;bottom: 0;/**bottom: -10px;*/left: 50%;right: 50%;background: #b0020c;z-index: -1;}.nav ul li a:hover i{left: 0;right: 0;/* -webkit-transition-property: left, right; */transition-property: left, right;/* -webkit-transition-duration: 0.3s; */transition-duration: 0.3s;transition-timing-function: ease-out;}.nav a{color: black;line-height: 70px;position: relative;padding: 0 0 10px 0;}.nav_logo{width: 370px ! important;height: 70px;}/* 图片框 */.banner_border{width: 1583px;height: 33px;margin:0 auto;}.banner_pic{width: 100%;height: 400px;border: 1px solid black;background: url(../img/pic_4.jpg);animation: isliving 3s steps(2) infinite;margin-bottom: 30px;}@keyframes isliving{from{background-position: 0px 0px;}to{background-position: 0px -936px;}}
菜鸟教程 德云社官网
