1、CSS样式
1.1、CSS背景样式
<style>
div{
width: 200px;
height: 200px;
background-color: red;
background-image: url("image/icon1.png");
/*backgroud-repeat
背景重复*/
background-repeat:no-repeat;/*repeat repeat-x repaet-y
no-repeat*/
/*背景位置*/
background-position-x: 50px;/*top bottom left right*/
background-position-y: center;/*top bottom left right*/
/* 另外一种写法 background-position:x y; */
}
</style>
<body>
<div></div>
1.2、背景的简写
<style>
div{
width: 200px;
height: 200px;
background:red url("image/icon1.png") no-repeat center center;
/*color image repeat position*/
}
</style>
<body>
<div>
1.3、背景吸附
<style>
.banner{
height: 468px;
background: red url("image/banner.jpg") no-repeat center top;
/*background-attachment:scroll(fixed)*/
background-attachment: fixed;
/*fixed 图片不会随滚动条的滚动而滚动*/
/*scroll 图片随滚动条的滚动而滚动*/
}
.content{
height: 800px;
background: #44cef6;
}
</style>
<body>
<div class="banner"> </div>
<div class="content"></div>
1.4、背景大小
<style>
div{
widows: 600px;
height: 300px;
background:red url("image/banner.jpg") no-repeat center center;
/*
背景大小
background-size:x y;
x-->width
y-->height
cover-->会覆盖整个div 特点：只能以大覆小*/
background-size:cover/*100% 100%；*/;
}
</style>
<body>
<div></div>
</body>
2、文本样式
2.1、文本颜色
<style>
p{
color:red;/*rgb(244,33)*/
}
</style>
<body>
<p>hello world</p>
</body>
2.2、文本对齐的方向
body{
font-size: 16px;/*继承性*/
}
p{
text-align: center;/*三个值：left center right*/
}
a{
text-decoration: none;/*underline overline line-though*/
}
h4{
text-indent: 20px;/*文本缩进*/
text-transform: uppercase;/*将字母转换成大写、小写lowercase*/
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 14px;/*字体大小 网页设置字体不低于12px*/
font-style: italic;/*斜字体*/
font-weight: bold;/*字体的权重 加粗 bold bolder*/
}
3、关于连接
link-->没有访问过的链接
visited-->已经访问过的链接
hover-->鼠标移到链接上的状态
active-->鼠标点击的那一刻
tip:同时使用链接的这几种状态，顺序不能打乱
a:link{
color: red;
}
a :actived{
color: yellow;
}
a:hover{
color: blue;
}
a:active{
color: green;
}
4、关于列表
<style>
/*
列表样式
list-style:none
列表样式类型
list-style-type:disc(实心)|circle（空心）|square（正方型）
列表样式图片
list-style-image
*/
ul{
/*list-style:none;*/
/*list-style-type: square;*/
list-style-image:url("image/icon1.png")
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
5、表格
<style>
table,th,td{
width: 500px;
border: 1px solid #333;
background-color: antiquewhite;
}
table{
/*关键样式*/
border-collapse: collapse;/*边框合并属性*/
line-height: 50px
;
text-align: center;
}
tr,td{
background-color: white;
}
</style>
<body>
<table>
<!-- tr table row -->
<tr >
<td rowspan="4">商城</td><!-- rowspan跨越行 colspan跨越列-->
</tr>
<!-- table data -->
<tr><td>JD</td><td>苹果</td></tr>
<tr><td>天猫</td><td>苹果</td></tr>
<tr><td>淘宝</td><td>苹果</td></tr>
</table>
</body>
6、轮廓
<style>
div{
width: 100px;
height: 100px;
background: red;
outline: 10px solid #44ecf4;
}
input{
margin-top: 80px;
outline: none;
}
</style>
<body>
<div></div>
<input type="text">
</body>
7、元素的透明度opacity
<style>
.parent{
width: 200px;
height: 200px;
background: blue;
}
.child{
width: 100px;
height: 100px;
background: red;
opacity: 0.5;/*设置元素的透明度*/
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
8、继承
8.1、CSS样式的继承
<style>
.parent{
width: 200px;
height: 200px;
background-color: red;
}
.child{
height: 100px;
background-color: blue;
}
.father{ /*特殊：父级获取子级的高度*/
width: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: green;}
</style>
<body>
<!-- width 的继承-->
<div class="parent">
<div class="child"> </div>
</div>
<br><br>
<div class="father">
<div class="son"></div>
</div>
</body>
8.2、文本和文字之间的继承
子承父类、父类能提取子级的height、
9、表格之间的跨越
rowspan跨越行 、colspan跨越列
网友评论