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;
}