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;
}
}
菜鸟教程 德云社官网