CSS基本操作（2）
一、字体
- 加斜
<em>加斜</em>
em主要表示语气上的强调，在浏览器中默认使用斜体显示
<i>加斜</i>
i标签中的内容会以斜体显示
- 加粗
<strong>
加粗字体
</strong>
strong表示强调的内容，比em更强烈，默认使用粗体显示
b标签中的内容会以粗体显示
<b>加斜字体</b>
- 小号字体
<small>这里的内容会比父元素少一些</small>
比如：合同中的小字，网站的版权声明都可以放到small
- 书名号
<cite>《静夜思》李白</cite>
- 引用
<q>短引用，浏览器还会默认加上引号</q>
<blockqute>长引用（块级引用）</blockqute>
- 上下标和删除线
<sup>上标</sup>
<sub>下标</sub>
<del>删除线</del>
- 插入和显示代码
<ins>插入的内容，会有下划线显示</ins>
<pre>
<code>
if True:
print("ddddd")
</code>
</pre>
二、列表
- 无序列表
<ul>
<li>
使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项，一个li就是一个列表项
通过type属性可以修改无序列表的项目符号，可选值：
disc：默认值，实心的圆点
square：实心的方块
circle：空心的圆圈
注意：默认的项目符号我们一般都不使用
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
<li>
<ul>
- 有序列表
<ol>
<li>
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型，可选值：
1，默认值，使用阿拉伯数字
a/A，采用小写或大写字母作为序号
i/I，采用小写或大写的罗马数字作为序号
ol也是块元素
</li>
<ol>
- 定义列表
<dl>
<dt>
定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表，它有两个子标签
dt：被定义的内容
dd：对定义内容的描述
<dt>
<dl>
注意！！！：三种列表可以随意嵌套使用
三、颜色单位
- 颜色单词表示
<style type="text/css">
.box1{
background-color: red;
}
</style>
- rgb调色
<style type="text/css">
.box1{
background-color: rgb(162,233,122);
}
* -可以使用RGB值来表示不同的颜色
* - 所谓的RGB值指的是通过Red Green Blue三元色，
* 通过这三种颜色的不同的浓度，来表示出不同的颜色
* - 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
* - 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
* 使用百分数最终也会转换为0-255之间的数
* 0%表示0
* 100%表示255
</style>
- 十六进制调色
<style type="text/css">
.box1{
background-color: #ff3322;
}
</style>
* 可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色，每组表示一个颜色
* 第一组表示红色的浓度，范围00-ff
* 第二组表示绿色的浓度，范围00-ff
* 第三组表示蓝色的浓度，范围00-ff
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中255
* 红色：#ff0000
* 像这种两位两位重复的颜色，可以简写
* 比如：#ff0000 可以写成 #f00
* #abc #aabbcc
四、字体单位
<style type="text/css">
.box1{
font-size: 30px;
}
</style>
像素px
- 像素是我们在网页中使用得最多的一个单位
一个像素就相当于屏幕中的一个小点
我们的屏幕实际上就是由这些像素点构成的
但是这些像素点是不能直接看见的
- 不同显示器一个像素的大小也不相同
显示效果越好、越清晰，像素就越小，反之像素越大
<style type="text/css">
.box1{
font-size: 100%;
</style>
百分比%
- 也可以将单位设置为一个百分比的形式
这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时，经常使用百分比作为单位
<style type="text/css">
.box1{
font-size: 2em;
</style>
em
- em和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变
- 当设置字体相关的样式时，经常会使用em
五、字体样式
- 可以通过color选择字体颜色 font-size选择字体大小
- 通过font-family选择字体样式
<style type="text/css">
.box1{
font-family: arial,微软雅黑 ;
</style>
/*
通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
该样式可以同时指定多个字体，多个字体之间使用“,”分开
当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有，再尝试下一个
六、字体分类
| 字体 | 名称 |
|---|---|
| 衬线字体 | serif |
| 非衬线字体 | sans-serif |
| 草书字体 | cursive |
| 等宽字体 | monospace |
| 虚幻字体 | fantasy |
可以将字体设置为这些大的分类，浏览器会自动选择指定的字体，并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体
<p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
七、字体其他样式
| 字体 | 名称 | 可选值 |
|---|---|---|
| 斜体 | italic | normal,oblique |
| 粗体 | weight | normal,bold |
| 小型大写字母 | variant | normal,small-caps |
<style type="text/css">
.box1{
font-style: italic ;
/*设置文字斜体*/
font-style: italic;
/*设置文字加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
</style>
在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式
可以将字体的样式值统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值
但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能
<style type="text/css">
.box1{
font: bold italic small-caps 60px "微软雅黑"
</style>
八、行间距
在CSS中并没有直接提供设置行间距的方式，我们只能通过设置行高来间接的设置，行高越大行间距越大
使用line-height来设置行高
行高类似于我们上学用的单线本，单线本是一行一行的，线与线之间的距离就是行高
网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
行间距 = 行高 - 字体大小
<style type="text/css">
.box1{
line-height: 1;
font-size: 20px;
</style>
通过设置line-height可以间接的设置行高
可以接收的值：
1.直接接收一个大小
2.可以指定一个百分数，则会相>对于字体去计算行高
3.可以直接传一个数值，则行高会设置字体大小相应的倍数
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中*/
line-height: 200px;
</style>
九、文本的样式
| 字体样式 | 名称 | 可选值 |
|---|---|---|
| 大小写 | text-transform | (none默认)（capitalize 首字母大写）（uppercase所有字母大写）（lowercase所有字母小写） |
| 文本修饰 | text-decoration | (none默认)（underline添加下划线）（overline 添加上划线）（line-though添加删除线 |
| 对齐方式 | text-align | (left默认)（right文本右对齐）（cente居中对齐）（justify两端对齐） |
letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离，实际上就是设置词与词之间空格的大小
text-indent用来设置首行缩进
这个值一般都会使用em作为单位
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素
通过这种方式可以将一些不想显示的文字隐藏起来
<style type="text/css">
.box1{
text-align: justify;
}
</style>
十、盒子模型
使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定
<style type="text/css">
.box1{
width: 300px;
height: 300px;
/*设置背景颜色*/
background-color: #bfa;
<style>
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值
则四个值会分别设置给上、右、下、左，按照顺时针的方向设置的
如果指定三个值
则三个值会分别设置给上、左右、下
如果指定两个值
则两个值会分别设置给上下、左右
如果指定一个值，则四边全都是该值
<style type="text/css">
.box1{
/*border-width:10px 20px 30px 40px;*/
/*border-width:10px 20px 30px;*/
/* border-width:10px 20px; */
border-width:10px;
border-color: red;
border-style: solid dotted dashed double
}
<style>
颜色与宽度格式一样，color也提供四个方向的样式，可以分别指定颜色
设置边框的样式
* 可选值：
* none，默认值，没有边框
* solid 实线
* dotted 点状边框
* dashed 虚线
* double 双线
*
* style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边
设置边框：
大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
- 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
- 而且没有任何的顺序要求
- border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
<style type="text/css">
.box1{
/*border: red solid 10px;*/
/*border-left: red solid 10px;*/
/* border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px; */
border: red solid 10px;
border-right: none;
}
<style>
