css板块1

1.css是什么？

css指的是层叠样式表(cascading style sheets)也称级联样式表

2.作用以及优点

css描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素

css节省了大量工作，它可以同时控制多张网页的布局

外部样式表存储在 CSS 文件中通过使用外部样式表文件，你只需更改一个文件即可更改整个网站的外观

3.css语法

分为两部分：

选择器：指向你需要设置样式的 HTML 元素。

声明块：包含一条或多条用分号分隔的声明。

属性和值中间以冒号分隔，若有多条css则用分号分隔，

声明块用花括号括起来。

4.基本选择器

元素名称/类选择器

根据元素名称来选择html元素。

p{}; a{};等等

id选择器

根据元素的id属性来选择特定的html元素  （优先级大于标签选择器）

#定义的id{}；

 类选择器

根据特定 class 属性 选择html元素 （优先级大于标签选择器）

.css{
};

通用选择器 

（*）选择页面上的所有的 HTML 元素

*{};

分组选择器

选取所有具有相同样式定义的 HTML 元素

h1,h2,p{};

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

div+p{};
div跟p有相同父元素且两个为同级

后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素

div~p{};
后续兄弟选择器优先级>相邻兄弟选择器

后代选择器

后代选择器用于选取某元素的后代元素。

div p{};

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

div>p{};

[attribute]选择器

[attribute] 选择器用于选取带有指定属性的元素

p[class]{};

[attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

p[class="class名"]{};

定位

position

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：static relative fixed absolute sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

a.position: relative;相对定位

position: relative;的元素相对于其正常位置进行定位

p{
position="relative"
left="";
}

b.position: fixed;固定定位

position: relative;

的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

p{
position:"fixed"
left:"";
}

c.position: absolute;绝对定位

position:absolute;的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位）。

p{
position:"relative"
left:"";
}
span{
position:"absolute"
left:"";

}

d.position:sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: green;
  border: 3px solid darkred;
}

重叠元素

z-index

属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。

元素可以设置正或负的堆叠顺序。

img{
position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}