css(part1)

什么是CSS？

• css指的是层叠样式表，也称级联样式表

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

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

• 外部样式表存储在css文件中

CSS节省了大量工作

样式通常保存在外.css文件中

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

CSS语法

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

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

每条声明都包含一个css属性名称和一个值，以冒号分隔

多条css声明用分号分隔，声明块用花括号括起来基本选择器

元素选择器

元素选择器跟据元素名称来选择HTML元素

实例：

p {
 color:red;
 text-align:center;
}

id选择器

id选择器根据 元素的id来选择特定的HTMl元素

实例:

#striking {
text-align:center;
 color:red;
}

类选择器

类选择器有特定class属性的HTML元素

.center {
text-align:cenetr;
 color:pink;
}

通用选择器

通用选择器(*)选择页面上的所有HTML元素

* {
text-align:center;
 color:green;
}

分组选择器

分组选择器选取具有相同样式定义的HTML元素

h1,h2,h3 p {
text-align:center;
color:yellow;
}

组合选择器

css组合选择符包括各种选择符的组合说明，说明两个选择器之间的关系

• 后代选择器 (以空格 分隔 )

• 自元素选择器(以大于号 > 分隔)

• 相邻兄弟选择器 (以加号 + 分隔)

• 普通兄弟选择器( 以波浪号 ~ 分隔)

后代选择器

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

div p {
color:pink;
​
}

子元素选择器

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

div>p {
color:blue;
}

相邻兄弟选择器

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

div+p {
 color:green;
}

后续兄弟选择器

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

div ~ p {
 color:skyblue;
}

属性选择器

[attribute]选择器

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

实例:

a [target] {
background-color:yellow;
}

定位

position ：static

HTML元素默认情况下的定位方式位static(静态)

position : relative

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

position : fixed

position : fixed 的元素是相对于视口定位的，这意味着即使滚动页面，他也始终位于同一位置

position : absolute

position : absolute的元素相对于最近的定位祖先进行定位(而不是相对于视口定位)

position : sticky

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