行内样式：
直接将style属性写在标签里面，不建议使用
<p style="display:inline-block;width:200px"></p>
内部样式：
将style标签写在head标签里面
<style>
div{
display: inline-block;
width:200px;
}
</style>
引入外部样式
<head>
<link rel="stylesheet" href="main.css"/>
</head>
Main.css
@charset "utf-8"
选择器
标签选择器
选中所有的同类标签
div{}
类选择器(class)
通过 . 语法来选择
.div{}
<div class="div"></div>
id选择器
通过#语法来选择
#nav{}
<div id="div"></div>
后代选择器
通过中间空格来选择控制所有后代，如果用>隔开，那么就只影 响直系。
div>span
<div>
<span></span>
</div>
交集选择器
同时满足所有条件,不常用
div.c1{}
<div>
<span class="c1"></span> √
<span class="c1"></span> √
<span class="c2"></span> ×
</div>
并集选择器
有满足的条件即可
#img1,.img{}
<div id="img1"></div> √
<div class="img1"></div> √
<div class="img1"></div> √
优先级： id>类>标签
字体样式
谷歌浏览器默认16号字体，最小显示12号字体
| 代码 | 用法 |
|---|---|
| font-weight:bold | 字体加粗 |
| text-align: center | 文本水平居中 |
| font-style: italic | 斜体 |
| line-height:10px | 通过行高进行垂直居中 |
| letter-spacing: 10px | 字符间距 |
| text-decoration: underline0 | 文本修饰下划线 |
| text-decoration: overline | 上划线 |
| text-decoration:line-through; | 中划线 |
| text-decoration: none | 去掉线 |
| text-indent: | 文本缩进 |
| -webkit-text-stroke: 1px red | 文本描边 |
| text-shadow: 10px 5px 1px black(右移动10;下移动5;字体清晰度-越小越清晰;阴影颜色) | 文字阴影 |
| border:1px soild red | 边框粗细 实心 颜色 |