2018-10-16
URL相对路径
https://cdn2.jianshu.io/assets/web/icon_nocontent-00c423de394b9184d467f2f2a7284b54.png
https://cdn2.jianshu.io表示服务器地址
assets/web/icon_nocontent-00c423de394b9184d467f2f2a7284b54.png表示路径
URL错误写法
1、带本地地址 ；2、带IP地址 ；
添加样式
在head中添加样式
<style>
.poem
{
color:#029323;
font-family: "微软雅黑";
font-size: 30;
}
</style>
使用时添加样式：<h1 class="poem">“假死骗保案”曝光</h1>
样式具体信息科参考W3School
检查样式
使用Google
常用样式
background-color: #FF0;
padding: 10PX;
margin: 10px 10px auto 10px;
border-bottom: 1px solid #000;
border-radius: 4px;
text-align: center;
样式单CSS
添加CSS文件 ，内容为样式
.poem
{
color:#029323;
font-family: "微软雅黑";
font-size: 30;
}
在使用文件中使用LINK调用<link rel="stylesheet" href="css/new_file.css" />
然后正常使用或使用<p style="font-family: serif;">10月16日</p>临时使用样式
DOM文档结构模型
body内全部标签的树形结构
类选择器
<link rel="stylesheet" href="css/new_file.css" />
<style>
.a{background-color: red;}
</style>
调用<h1 class="poem a">“假死骗保案”</h1>，样式优先级为定义顺序
标签选择器
<style>
button//所有button都适用
{
color: blue;
background-color: red;
}
button.set//调用样式时适用
{
font-size: 30px;
}
</style>
<button class="set">发送</button>
标签选择器不再赘述。
ID选择器
<style>
button
{
color: blue;
background-color: red;
font-size: 30px;
}
（）#ok
//调用ID时适用
{
font-size: 20px;
}
</style>
<button style="color: yellow;" id="ok">发送</button>
优先级：临时样式>id>button
伪类选择器
不同状态
鼠标移动hover
聚焦focus
<style>
button
{
color: blue;
background-color: white;
font-size: 30px;
}
button:hover
{
border-color: red;
}
button:focus
{
border-color: blue;
}
</style>
子选择器
这个大家可以自己去试试哦，以后还是都以图片形式上传吧，不然也不好描述。
