AM
01.命名规范
css命名1.png
css命名02.png
css命名03.png
cssmm04.png
02.背景
背景重复
background-repeat：no-repeat没有重复
background-repeat：repeat-xx轴方向重复
background-repeat：repeat-yy轴方向重复
background-repeat：repeat容器铺满
background-position-x:横坐标方向
background-position-y:纵坐标方向
//传参top，rigth，bottom，left，center
背景简写
background-position：x y；
03.背景简写
background:color image repeat position
04.背景吸附
background-attachment: scroll|fixed;
<style>
.banner{
height:468px;
background:#ff2d51 url("images/banner.jpg") no-repeat center top;
background-attachment:fixed;
}
.content{
height:800px;
background: #44cef6;
}
</style>
<div class="banner"></div>
<div class="content"></div>
1.gif
05.背景大小
background-size：x y； x-->width y-->heigth
cover-->会覆盖整个div 特点：只能以大覆小
div{
width: 800px;
height: 300px;
background: red url("images/banner.jpg") no-repeat center center;
background-size: 100px 100px;
}
05.png
06.文本颜色
rgb:三原色
r: 红色 00~ff
g: 绿色 00~ff
b: 蓝色 00~ff
07.文本
文本对齐
text-align:left|center|right
文本修饰
text-decoration:none|underline|overline|line-through
文本缩进
text-indent
文本转换
text-transfomr:uppercase|lowercase|capitalize
08.字体
最小的字体-->不要小于12px
font-size字体大小
字体样式
font-style:normal|italic
字体的权重
font-weight:bold|bolder|lighter
100-900
09.链接
link-->没有访问的链接
visited-->已经访问过的链接
hover-->鼠标移入到链接上的状态
active-->鼠标点击的那一刻
tip:同时使用链接的这几种状态,顺序不打乱
a:link{
color:red;
}
a:visited{
color:yellow;
}
a:hover{
color:green;
}
a:active{
color:blue;
}
<a href="http://www.jd.com">京东</a>
06.png
10.列表
列表样式
list-style:none;
列表样式类型
list-style-type:disc|circle|square
列表样式图片
list-style-image
11.表格
<style>
table,th,td{
width:500px;
border:1px solid #333;
}
table{
/* 关键样式 */
border-collapse: collapse;
line-height: 50px;
text-align: center;
}
</style>
<body>
<table>
<thead>
<!-- tr table row -->
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<!-- table data -->
<tr><td>JD</td><td>苹果</td></tr>
<tr><td>Tmall</td><td>小米</td></tr>
<tr><td>苏宁</td><td>华为</td></tr>
</tbody>
</table>
</body>
07.png
pm
01.跨行表格
<style>
/*技术要点:谁要跨行越给谁`rowspan
谁要跨列给谁 colspan*/
table,td{
border: 1px solid #333;
}
table{
text-align: center;
border-collapse: collapse;
width:500px;
line-height: 50px;
}
</style>
<body>
<table>
<tr><td rowspan="3">商城</td><td>鞋子</td> <td>衣服</td></tr>
<tr> <td>手机</td><td>钱包</td></tr>
<tr> <td>拖鞋</td><td>Tshirt</td></tr>
</table>
08.png
<style>
table{
width:500px;
line-height: 50px;
border-collapse: collapse;
text-align: center;
}
table,td{
border:1px solid #333;
}
</style>
<body>
<table>
<tr><td colspan="2">商场</td></tr>
<tr><td>手机</td><td>衣服</td></tr>
<tr><td>鞋子</td><td>pen</td></tr>
<tr><td>服装</td><td>瓶子</td></tr>
</table>
09.png
02.轮廓
<style>
div{
width:100px;
height:100px;
background:#ff2d51;
outline: 10px solid #44cef6;
}
input{
margin-top: 50px;
outline: none;
}
</style>
<body>
<!-- 了解 -->
<div>
</div>
<input type="text">
10.png
03.设置透明度
<style>
div.parent{
width:200px;
height:200px;
background:blue;
}
/* opacity设置元素的透明度 */
div.child{
width: 100px;
height: 100px;
background: red;
opacity: 0.5;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
11.png
04.样式继承
<style>
/*
Tips:仅仅发生在块级元素之间
子元素不设置宽度,它会继承父元素的宽度---(块)
*/
.parent{
width:200px;
height:200px;
background:red;
}
.child{
height:100px;
background:blue;
}
</style>
<body>
<!-- width的继承 -->
<div class="parent">
<div class="child"></div>
</div>
12.png
heigth的继承
<style>
/* 特殊 */
/* 父元素不设置height,它会获取子元素的height */
.parent{
width:200px;
background:red;
}
.child{
width:100px;
height:100px;
background:blue;
}
</style>
<body>
<!-- 继承:子级对父级的关系 -->
<div class="parent">
<div class="child"></div>
</div>
13.png
<style>
body{
text-align: center;
color:red;
text-decoration: underline;
font-size: 30px;
}
ul{
list-style: none;
}
table{
border-collapse: collapse;
}
</style>
<body>
<!-- 文本和字体相关属性都是可以继承的 -->
<p>hello world</p>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div>
hello
<p>world</p>
</div>
14.png
网友评论