css样式和定位

什么是CSS
· CSS指的是层叠样式表（Cascading Style Sheets），也称级联样式表
● CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
● CSS节省了大量工作，它可以同时控制多张网页的布局
● 外部样式表存储在CSS文件中

Css还能美化html元素
Css文件夹可以存放 .css文件.
选择器{属性：属性值；}。

元素选择器
元素选择器根据元素名称来选择HTML元素。
 id 选择器
id 选挥器根据元素的id属性来选择特定的HTML元素。
元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素!要选择具有特定id的元素，请写一个并号（#），后跟该元素的id。
注意∶ id名称不能以数字开头。
类选择器
类选择器选择有特定class属性的HTML元素。
如需选择拥有特定class的元素，请写一个句点（.）字符，后面跟类名。
实例
.center {text-align:center;color: red;1
解析 在这个例子中，所有带有class=“center”的HTML元素文本将为红色且居中对齐。你还可以指定只有特定的HTML元素会受类的影响。实例∶p.center {
text-align:center;color: red;
}
最好对选择器进行分组，以最大程度地缩减代码。如需对选择器进行分组，请用*逗号 来分隔每个选择器。实例∶
h1,h2,p {
text-align:center;color: red;1
解析在这个例子中，我们对上述代码中的选择器进行分组
组合选择符
CSS组合选择符包括各种简单选择符的组合方式，说明了两个选择器之间的关系。
在CSS3中包含了四种组合方式∶·
后代选择器（以空格 分隔）· 
子元素选择器（以大于号>分隔）
·相邻兄弟选择器（以加号+分隔）
·普通兄弟选择器（以波浪号~分隔）
后代选择器
后代选择器用于选取某元素的后代元素。
子元素选择器
与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。
实例∶div>p{
background-color: red;}
| 解析|∶在这个实例中，选择器选取<div>元素中的所有直接子元素<p>。
相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元紫后的元素，且二者有相同父元素。
实例∶div+p{
background-color:green;}
解析 ∶在这个实例中，选择器选取所有位于<div>元素后的第一个<p>元素。
后续兄弟选择器
后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。
实例∶
div-p{
hackaraund-rolor:oranoe}
解析：在这个示例中，选择器选取位与<div>元素后的所有相邻兄弟元素<p>.
属性选择器
我们可以设置带有特定属性或属性值的HTML元素的样式。
【attribute】选择器【attribute】选择器用于选取带有指定属性的元素。实例∶a [target] {
background-color;yellow;y
解析 在这个实例中，选择器选取所有带有target 属性的<a>元素。
【attribute="value"】选择器【attribute="value"】选择器用于选取带有指定属性和值的元素。实例∶
a [target="_blank"] [background-color:red;}
|/解析|在这个实例中，选择器送取所有带有target=”_blank”属性的<a>元素。

定位
静态定位 static 默认 不受top bottom left right属性的影响 
相对定位  relative 相对于其正常位置进行定位 将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间
固定定位  fixed  相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top  right bottom left 属性使用
绝对定位  absolute 相对最近
sticky 粘性元素 根据滚动位置相对和固定之间切换 起先它会被相对定位，知道视口中遇到给定的偏移位置然后将其“粘贴”在适当的位置。