color 为字体指定颜色
颜色取值可以是对应颜色单词、rgb（0，0，0）里面对应分别是红绿蓝、rgba（255，0，0，0.2）a对应的是后面0.2，这个值的取值范围是0~1。
<style>
//颜色对应的英文单词
color:"red";
//rgb的取值范围0~255
rgb(125,125,125)
//rgba和rgb一样，就多了一个透明度的调节a
rgba(255,255,255，0.2)
</style>
font-style 用于打开和关闭斜体文本
格式：font-style: italic;
取值： normal ： 正常的， 默认就是正常的 italic : 倾斜的
<style>
p {
font-style:italic;
}
</style>
<body>
<p>我是一个段落标签</p>
</body>
font-weight 为字体设置粗细程度
格式： font-weight: bold;
取值: bold 加粗 bolder 比加粗还要粗 lighter 细线， 默认就是细线
数字取值： 100-900之间整百的数字 400 等同于 normal 700 等同于 bold
style>
p {
/* 设置文字的粗细 */
font-weight: bold;
}
</style>
<body>
<p>我是一个段落标签</p>
</body>
font-size 为文字指定大小
格式：font-size: 30px;
单位：px（像素 pixel）
注意点： 通过font-size设置大小一定要带单位， 也就是一定要写px
<style>
p {
/* 设置字体大小 */
font-size: 20px;
}
</style>
<body>
<p>我是一个段落标签</p>
</body>
font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
格式：font-family:"楷体";
通用字体 (直接使用，不需要加引号)
serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线
sans-serif:无衬线的字体，笔画结尾是平滑的字体
monospace:等宽字体，用于代码，字体中每个字宽度相同
cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。
fantasy:装饰字体 ，具有特殊艺术效果的字体
注意点：
1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加
2.设置的字体必须是用户电脑里面已经安装的字体
3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体
<style>
p {
/* 字体设置 */
font-family: serif;
}
</style>
<body>
<p>我是一个段落标签</p>
</body>
text-decoration 设置或者取消文本修饰
格式:text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
<style>
a{
text-decoration: none;
}
</style>
<body>
<a href="" target="_blank" rel="external nofollow" >点我</a>
</body>
text-align 文字排列方式
格式: text-align: right;
取值: left 左 right 右 center 中
<style>
div {
text-align: center;
}
</style>
<body>
<div>
<h2>Hello text-align</h2>
</div>
</body>
text-indent 文本缩进属性
格式: text-indent: 2em;
取值: 2em, 其中是em单位, 一个em代表缩进一个文字的宽度
<style>
div p {
text-indent: 2em;
}
</style>
<div>
<p>hellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
</div>
text-transform 设置或者取消字体改变
用于使文本显示为全大写或全小写
text-transform 允许字体改变，文本变形
none: 防止任何改变
uppercase: 将文本转换为大写
lowercase: 将文本转换为小写
capitalize: 将所有单词第一个字母转换为大写
full-width: 转换为类似于一个等宽字体
<style>
div p {
text-transform: uppercase;
}
</style>
<div>
<p>hellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
</div>
text-shadow 设置或者取消文本阴影
格式: text-shadow: h-shadow v-shadow blur color;
取值:
none:取消所有阴影
h-shadow :必需。水平阴影的位置。允许负值。
v-shadow :必需。垂直阴影的位置。允许负值。
blur:可选。模糊的距离。
color:可选。阴影的颜色。
<style>
div p {
text-shadow: 2px 2px rebeccapurple;
font-size: 20px;
text-align: center;
}
</style>
<div>
<p>hello</p>
</div>
列表样式
list-style-type 设置列表项标志类型
取值:
none : 没有样式
disc :实心圆
circle :空心圆
square : 方块
<style>
div ul {
list-style: circle;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
list-style-position 设置列表项标志出现的位置
取值:
outside : 列表项标志出现在主块框的外部
inside : 列表项标志出现在主块框的内部
<style>
div ul li {
border: 1px solid rebeccapurple;
list-style: circle;
list-style-position: inside;
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
list-style-image 自定义设置列表项标志
取值: url() : 指定图标位置
<style>
div ul li {
list-style-image: ul("图片路径");
}
</style>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
其他样式
-line-height
设置文本的行高 取值为绝对单位或者相对单位
<style>
div {
border: 1px solid rebeccapurple;
height: 100px;
text-align: center;
background-color: aqua;
line-height: 100px;
}
</style>
<div>
<p>hello 其他样式</p>
</div>
- display
显示方式的切换
inline 行内显示，宽高无效
block 块级显示，宽高有效
inline-block 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素， 行内显示同时宽高有效
none 不显示，不占据屏幕空间
flex 伸缩盒布局
<style>
.div1 {
border: 1px solid rebeccapurple;
height: 100px;
width: 100px;
background-color: aqua;
display: inline-block;
}
.div2 {
display: inline-block;
border: 1px solid red;
height: 200px;
width: 200px;
background-color: tomato;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
- visibility
显示与隐藏
hidden 隐藏，占据屏幕空间
visible 显示
<style>
.div1 {
border: 1px solid rebeccapurple;
height: 100px;
width: 100px;
background-color: aqua;
display: inline-block;
visibility: hidden;
}
.div2 {
display: inline-block;
border: 1px solid red;
height: 200px;
width: 200px;
background-color: tomato;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
- opacity
透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间
<style>
.div1 {
border: 1px solid rebeccapurple;
height: 100px;
width: 100px;
background-color: aqua;
display: inline-block;
}
.div2 {
display: inline-block;
border: 1px solid red;
height: 200px;
width: 200px;
background-color: tomato;
opacity: 0.2;
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
- overflow 溢出处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
<style>
.div1 {
border: 1px solid rebeccapurple;
height: 100px;
width: 100px;
background-color: aqua;
overflow: auto;
}
.div1>div {
width: 50px;
height: 50px;
background-color: brown;
}
</style>
<body>
<div class="div1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
- cursor
指定光标的样式
| default | 默认光标（通常是一个箭头） |
|---|---|
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
![一个小小的移动web版音乐播放器[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)