今天学到了什么？
一、列表样式
1.列表样式
list-style:none;
2.列表样式类型
list-style-type:disc|circle|square
3.列表样式图片
list-style-image
二、字体
1.最小的字体-->不要小于12px
font-size字体大小
2.字体样式
font-style:normal|italic
3.字体的权重
font-weight:bold|bolder|lighter
三、链接
链接的样式类型
link// 没有访问的链接
visited//已经访问过的链接
hover// 鼠标移入到链接上的状态
active// 鼠标点击的那一刻
tip：同时使用链接的这几种状态,顺序不打乱
四、文本
1.文本对齐
text-align:left|center|right
p{
text-align: center;
}
2.文本修饰
text-decoration:none|underline|overline|line-through
a{
text-decoration:line-through;
}
3.文本缩进
text-indent
4.文本转换
text-transfomr:uppercase|lowercase|capitalize
h4{
text-indent: 20px;
text-transform: capitalize;
}
<!-- lorem+tab 快速写出一段废话 -->
5.文本颜色
颜色
red -->纯色
#ff2d51
rgb()
五、背景
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
1.background-position: center center
2.background:color image repeat position
4.背景大小
background-size:x y;
x -->width
y -->height
// cover -->会覆盖整个div 特点:只能以大覆小
5.背景吸附
background-attachment:scroll|fixed;
六、表格
1.表格标签
<table>
<tr><td></td></tr>
</table>
2.表格样式
border-collapse: collapse;
line-height: 50px;
text-align: center;
1.跨行：rowspan//谁要跨越给谁rowspan；
2.跨列：colspan//谁跨越列给谁colspan；
七、继承关系
1.继承:子级对父级的关系
<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>
//父元素不设置height,它会获取子元素的height
2.width的继承
<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>
//Tips:仅仅发生在块级元素之间
子元素不设置宽度,它会继承父元素的宽度---(块)
八、轮廓和设置透明度
1.轮廓outline
<style>
div{
width:100px;
height:100px;
background:#ff2d51;
outline: 10px solid #44cef6;
}
input{
margin-top: 50px;
outline: none;
}
<div>
</style>
</head>
<body>
</div>
<input type="text">
</body>
2.设置透明度
width: 100px;
height: 100px;
background: red;
opacity: 0.5;
//opacity设置元素的透明度
今天的内容还需花时间学习（不熟练）
网友评论