一、列表
1、HTML列表分为,有序列表(ol>li)、无序列表(ul>li 一般用于导航栏、商品列表显示)、目录列表(dl>dd>dt 用于名词解释)。
有序列表(HTML5新增的属性):
属性 | 说明 |
---|---|
star | 起始值 自己规定一个数字 显示以规定的数字后面的·数字依次显示 |
reversed | 倒叙排列 |
list-style-position(设置列表项目符号位置的对齐方式,取值 outside|inside|outside(默认值))。
HTML代码
<ul class="outside">
<li>学习</li>
<li>加油</li>
</ul>
<ul class="inside">
<li>zx</li>
</il>
css代码
ul{
border:1px solid red;
padding: 0;
margin:0 auto;
width: 500px;
list-style-type: square;
}
.outside{
list-style-position: outside;
}
.inside{
list-style-position:inside;
}
效果图:
outside以列表项内容对齐,inside的列表则以项目符号对齐。
二、标签
文本类:text-indent(文本缩进),text-transform(lowercase文本小写字母、uppercase所有文本大写字母、captitalize所有文本首字母大写)、text-shadow(文本阴影 第一值 是水平方向、第二个值 垂直方向、第三个值模糊程度、第四个值颜色)、word-spacing(词间距)、letter-spacing(字间距)。
**字体样式:**引用字体@font-face步骤:把字体放入站内、@font-face、添加声明块 设置引用字体名字 font-family:自定义 引用字体文件地址 src:url(“字体地址”)。
举个列子:
HTML:
CSS样式
效果:
背景图片大小(background-size):
一般给100%;
background-clip(背景剪切 当前元素的背景显示区域)
取值 | 说明 |
---|---|
border-box | 只显示边框和背景内容 |
padding-box | 只显示填充盒(content+paddding)内容 |
content | 只显示内容盒(content)背景内容 |
css样式:
div{
width: 400px;
height: 400px;
border:20px dashed green;
background-image: url("../IMG/tounao.jpg");
background-size: cover;
background-clip:border-box;
}
div{
width: 400px;
height: 400px;
border:20px dashed green;
background-image: url("../IMG/tounao.jpg");
background-size: cover;
background-clip:padding-box;
}
div{
width: 400px;
height: 400px;
border:20px dashed green;
background-image: url("../IMG/tounao.jpg");
background-size: cover;
background-clip:content-box;
}
设置背景图片起始区域(background-origin)
padding-box(以填充盒背景内容)
content-box(以内容盒左上角起始)
背景渐变色
background-image:linear-gradient() ;
linear-gradient(to 结束方向,起始颜色,颜色2,颜色3,颜色n,结束颜色);
background-image: repeating-linear-gradient(to right, yellowgreen 0px, yellowgreen 20px, skyblue 20px, skyblue 40px);
background-image: linear-gradient(to left, red, yellow, green);
background-image: linear-gradient(to right bottom, red, yellow, green);
background-image: linear-gradient(to left bottom, red, yellow, green);
举个栗子:
我就用最后一个效果图:
透明度rgba
取值:0-1;
取值越小,透明度越高。取值越大,透明度越低。
/* background-color: rgba(222, 12, 222, 0.2); */
透明度opacity
取值:0-1;
取值越小,透明度越高。取值越大,透明度越低。
/* opacity: 0.5; */
rgba和opacity的区别
rgba设置某个属性
opacity设置当前元素和其后代元素的透明度
/* 当前元素进行隐藏 */
/* visibility: hidden; */