CSS基础

1、font:
font-family:字体
多个字体之间使用逗号分隔
多个字体依次在计算机中寻找，找到就使用，否则就默认为微软雅黑

font-size：字体大小，单位px
默认16px

font-weight:字体粗细
700或bold 加粗
400或normal 不加粗
注意，没有单位

font-style:italic 斜体
不倾斜是normal

font：复合属性，可以连写
有顺序
font:font-style font-weight font-size/line-height font-family
不需要设置的属性可以省略，但是必须保留font-size和font-family 否则不起作用

2、文本：
color:字体颜色
可以使用英文单词
可以使用十六进制代码#fff（通常使用）
也可以使用rgb值

text-align:文本对齐
left:左对齐 
center ：居中
right：右对齐

text-indent:文本缩进
2em

text-decoration:文本修饰
underline下划线
overline上划线
line-through删除线
none

line-height:设置行间距
上间距+文字高度+下间距 = 行间距
line-height越大，上下间距的值会变大，上间距 = 下间距

3、元素显示模式：

元素以什么方式显示，如：div独占一行，span可以在一行内放多个
html元素分为两种：块元素和行内元素
块元素：p、div、h1~h6、ul
特点：
    1、独占一行
    2、可以设置宽高
    3、宽度默认是父元素的100%
行内元素：strong、em、i、del、a、span
特点：
    1、一行可以放多个
    2、设置宽高无效
    3、默认高度是内容的高度
    4、行内元素只能容纳文本和其他行内元素

行内块元素：img、input、td
同时具有行内元素和块元素的特点
1、一行显示多个，但元素之间有空隙（行内特点）
2、默认高度就是内容高度（行内特点）
3、高度、宽度可以设置（块特点）

元素显示模式的转换：
display样式：
block
inline
inline-block

代码

body {
    font-family: "Karla";
    background: #edeae5;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
    text-align: center;
}
 
a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    transition: 0.4s;
}
 
a:hover {
    color: rgba(0, 0, 0, 0.7);
}
 
div {
    transition: linear 0.2s;
}
 
#container {
    width: 480px;
    height: 480px;
    position: absolute;
    top: calc(50% - 240px);
    left: calc(50% - 240px);
}
 
.circle {
    width: 60px;
    height: 60px;
    background: white;
    display: inline-block;
    margin-right: 30px;
    border-radius: 50%;
}
 
.square {
    width: 60px;
    height: 60px;
    background: white;
    display: inline-block;
    margin-right: 30px;
    background: #e67e22;
}
 
.row {
    margin-bottom: 30px;
}
 
.green {
    background: #78c272;
}
 
.fancy {
    border: 3px inset rgba(199, 196, 196, 1);
    /* border: 3px inset rgba(52, 19, 236, 1); */
    width: 54px;
    height: 54px;
}
 
#third-row .circle {
    background: #de6868;
}
 
.row .circle:first-child {
    opacity: 0;
}
 
.row .circle.fancy {
    border-style: dotted;
}
 
.row .green {
    background: #6392c0;
}
 
.row .fancy {
    background: #6392c0;
}
 
.row .circle:hover {
    opacity: 0.5;
}
 
#second-row .circle:hover {
    transform: scale(1.25);

}