1.css的样式设置
1.背景
1.背景重复
background-repeat:no-repeat|repeat-x|repeat-y
background-repeat: no-repeat;
2.背景位置
background-position-x:横坐标方向的位置
background-position-y:纵坐标方向的位置
传参 top,right,bottom,left,center
3.背景初步简写
background-position: x y;
background-position: center center;
4.背景简写
background:color image repeat position
5.背景的吸附
background-attachment:scroll|fixed;
6.背景大小
background-size:x y;
x -->width
y -->height
cover -->会覆盖整个div 特点:只能以大覆小
2.文本
1.文本颜色
red -->纯色
#ff2d51
rgb()
2.文本对齐
text-align:left|center|right
3.文本修饰
text-decoration:none|underline|overline|line-through
4.文本缩进
text-indent
5.文本转换
text-transfomr:uppercase|lowercase|capitalize
3.字体
1.最小的字体
不要小于12px
font-size字体大小
2.字体样式
font-style:normal|italic
3.字体的权重
font-weight:bold|bolder|lighter
100-900
4.链接
link -->没有访问的链接
visited -->已经访问过的链接
hover -->鼠标移入到链接上的状态
active -->鼠标点击的那一刻
tip:同时使用链接的这几种状态,顺序不打乱
1.png
5.列表
1.列表样式
list-style:none;
2.列表样式类型
list-style-type:disc|circle|square
3.列表样式图片
list-style-image
6.表格
1.表格的简单模式和关键样式
关键样式：border-collapse: collapse;
如
<style>
table,th,td{
width:500px;
border:1px solid #333;
}
table{
border-collapse: collapse;
line-height: 50px;
text-align: center;
}
</style>
</head>
<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>
2.png
2.跨越行row的表格
谁要跨越给谁rowspan
如
<style>
table,td{
border: 1px solid #333;
}
table{
text-align: center;
border-collapse: collapse;
width:500px;
line-height: 50px;
}
</style>
</head>
<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>
</body>
3.png
3.跨越列的表格
谁跨越列就给谁colspan
如
<style>
table{
width:500px;
line-height: 50px;
border-collapse: collapse;
text-align: center;
}
table,td{
border:1px solid #333;
}
</style>
</head>
<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>
</body>
4.png
6.轮廓
1.div轮廓
width:100px;
height:100px;
background:#ff2d51;
outline: 10px solid #44cef6;
5.png
2.input
默认情况
6.png
设置
input{outline: none;}
7.png
7.设置元素的透明度
opacity设置元素的透明度
如
div{
width: 100px;
height: 100px;
background: red;
opacity: 0.5;
}
8.样式的继承
仅仅发生在块级元素之间
1. 子元素不设置宽度,它会继承父元素的宽度
如
<style>
.parent{
width:200px;
height:200px;
background:red;
}
.child{
height:100px;
background:blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
8.png
2.父元素不设置height,它会获取子元素的height
如
<style>
.parent{
width:200px;
background:red;
}
.child{
width:100px;
height:100px;
background:blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
9.png
3.文本和字体相关属性都是可以继承的
如
<style>
body{
text-align: center;
color:red;
text-decoration: underline;
font-size: 30px;
}
ul{
list-style: none;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<p>hello world</p>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div>
hello
<p>world</p>
</div>
</body>
10.png
