怎么样新建一个网站个人博客网站搭建
了解
Cascading Style Sheet：层叠级联样式表
CSS：表现层（美化网页）如：字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动
css优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录
CSS的四种导入方式
行内样式
在需要设置的标签后面加style。优先级最高
css内部样式
可在html文件中的head标签中写如下：
<style>
选择器{
声明1；声明2；
声明3；
}
</style>
链接式外部样式
在文件恰当位置添加一个css文件
在需要引用样式的HTML文件的head标签中添加link标签。
<link rel="stylesheet" href="css文件位置">
内部样式与外部样式优先级一致，从上到下，谁先写，谁的优先级就高。
导入式外部样式（了解）
先在head标签中添加style标签
<style>
@import "css路径";
</style>
选择器
作用： 选择页面上的某一个或者某一类元素
标签选择器
会选择到页面上所有的这个标签的元素（选择一类标签），标签选择器优先级最低
标签选择器{
声明1；
声明2；
}
类选择器class
在标签后加class，class属性值为自定义，class值相同的为一组，可以复用，类选择器优先级>标签选择器（选择所有class属性值一致的标签）
<h1 class="类名称"></h1>
样式引用时，格式如下：
.类名{
声明1；
声明2
}
id选择器
在标签后加id，id属性值为自定义，id全局唯一,优先级最高
<h1 id="id名称"></h1>
样式引用时，格式如下：
#id名{
声明1；
声明2
}
优先级对比：id选择器>类选择器>标签选择器
层次选择器
根据以下框架，写HTML文件的body结构
红色为类选择器，紫色为id选择器
HMTL如下：
后代选择器
在某个元素的后面,eg:body后面的所有p标签
标签1 标签2{
声明1；
}
body后面的p标签全部设置为红色
类tex后面的p标签全部设置为黄色背景
子选择器
某个标签(选择器)的子标签，eg：body标签后面的p标签，该处p标签不包含无序列表中的p标签
标签1>标签2{
声明1；
}
body后面的第一轮子标签p字体全部设置为红色,类标签tex下的p标签背景为黄色
相邻选择器
某个标签（选择器）的相邻（下一个元素），eg：类选择器action的相邻标签
选择器+标签{
声明；
}
li的相邻li标签设置为红色字体
id选择器的同级p设置为蓝色背景，tex选择器的同级p设置为黄色背景，action的同级p设置为红色字体
通用选择器
选中元素的向下的所有兄弟元素
选择器+标签{
声明；
}
类选择器action的相邻p（所有下一个）元素，设置为橙色
结构伪类选择器
伪类选择器格式：
标签：参数{
声明；
}
first-child:第一个元素
last-child：最后一个元素
标签：nth-child()选择当前p元素的父级下的第几个元素,根据顺序选择
nth-of-type(2):选择父元素下的p标签的第几个，根据类型选择
扩展：hover，鼠标移动改变效果
属性选择器
设置10个标签，每个标签中包含许多属性，为a标签设置默认样式，如下
<p class="demo"><a href="http://baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item " >3</a><a href="images/123.png" class="links item " >4</a><a href="images/123.ipg" class="links item " >5</a><a href="abc" class="links item " >6</a><a href="/a.pdf" class="links item " >7</a><a href="/abc.pdf" class="links item " >8</a><a href="abc.doc" class="links item " >9</a><a href="abcd.doc" class="links item last" >10</a>
</p>默认样式：
<style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: red;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}</style>
a标签中存在id属性的元素
标签：[属性名]{
声明；
}
选择id属性中属性为first的元素
标签：[属性名=属性值]{ //=是绝对等于
声明；
}
class属性中属性值包含link的元素
标签：[属性名*=属性值]{ //*=是包含这个元素
声明；
}
选中以href属性中以http属性值为开头的元素
标签：[属性名^=属性值]{ //^=是以这个属性值开头
声明；
}
选中以href属性中以pdf属性值为结尾的元素
标签：[属性名$=属性值]{ //$=是以这个属性值结尾
声明；
}
字体样式
span标签：重点突出的字，使用span标签
- font-family:字体样式
- font-size:字体大小
- font-weight:字体粗细
- color:字体颜色
