样式
CSS是一种描述HTML文档样式的语言。css描述应该如何显示html元素
什么是css？
css指的是层叠样式表，也称级联样式表。
CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素。
css节省了大量工作，它可以同时控制多张网页的布局。
外部样式表存储在css文件中。
为何使用css？
可以美化页面、布局。可以修饰当前网页，能呈现不同的布局和效果。
css用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
p、h1、h2等是标签选择器
CSS解决的问题
html设计之初从未打算包含用于格式化网页的标签，创建html的目的是描述网页的内容。
CSS节省了大量工作
样式定义通常保存在外部.css文件中
通过使用外部样式表文件，只需要更改一个文件即可更改整个网站的外观。
CSS语法规则
css规则集由选择器和声明块组成：
选择器：指向你需要设置样式的html元素。
声明块：包含一条或多条用分号分隔的声明。
每条生命都包含了一个css属性名称和一个值，以冒号分隔。
多条css声明用分号分隔，声明块用花括号括起来。
基本选择器
元素选择器
元素选择器根据元素名称来选择html元素。
id选择器(#id)
id选择器根据元素的id属性来选择特定的html元素。
元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素！
要选择具有特定id的元素，先写一个#(井号)，后跟该元素的id。
（id名称不能以数字开头）
id选择器的优先级要高于元素选择器的优先级。
类选择器（.class）
类选择器选择有特定class属性的html元素。
如需选择拥有特定class的元素，先写一个.(句号)字符，后跟类名。
类选择器的优先级大于元素选择器
通用选择器（*）
通用选择器（*）选择页面上所有的html元素，它会影响页面上每一个html元素。
类选择器、id选择器>元素选择器>通用选择器
通用选择器的优先级最低
分组选择器（.class , .class1）
分组选择器选取所有具有相同样式定义的html元素，中间用逗号分隔。
组合选择符
组合选择符包括了各种简单选择符的组合方式，说明两个选择器之间的关系。
css中包含了四种组合方式：
后代选择器（以空格 分隔）
后代选择器优先级要大于分组选择器。
选取A元素中所有的B元素。
<style type="text/css">
div p{
color: green;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>aaa</p>
<p>bbb</p>
</div>
</body>
子元素选择器（以>分隔）
只能选取它的一级子元素
容器是有选择的，p不是容器，所以p包裹div，使用子元素选择器是没有效果的，但div可以包裹其他元素。
<style type="text/css">
div>.cc{
color: green;
text-align: center;
}
</style>
</head>
<body>
<div>
<div class="cc">
<p>ccc</p>
</div>
</div>
</body>
相邻兄弟选择器(以 + 分隔)
同级别的元素，具有同一父元素。
如果兄弟过多，可以继续+，但全部元素都要是同级。
<style type="text/css">
div+p{
color: green;
text-align: center;
}
</style>
</head>
<body>
<div>
ccc
</div>
<p>
ddd
</p>
</body>
后续兄弟选择器（以~分隔）
某一元素后面所有相邻的兄弟元素
后续兄弟选择器包含兄弟相邻选择器
后续兄弟选择器优先于高于兄弟相邻选择器
<style type="text/css">
div~p{
color: green;
text-align: center;
}
</style>
</head>
<body>
<div>
ccc
</div>
<p>
ddd
</p>
<p>
eee
</p>
</body>
属性选择器
[attribute]选择器
[attribute]选择器用于选取带有指定属性的元素。
[attribute=“value”]选择器
[attribute=“value”]选择器用于选取带有指定属性和值的元素
元素里不能有空格，有空格样式就不会渲染。
定位positon
position属性规定应用于元素的定位方法类型。共有五个不同的位置值：
static、relative、fixed、absolute、sticky
是用top，bottom，left，right属性定位的。但必须首先设置position属性，否则这些属性不会起作用。
position:static（静态定位）
默认定位，它不会受到top，bottom，left，right属性的影响。
position：relative（相对定位）
相对于其正常位置进行定位，只占据自己原本的空间，不会因为位置的定位而占据其他空间。
position：fixed（固定定位）
这个元素相对于视口定位，即使滚动页面，也始终位于同一位置。
position：absolute（绝对定位）
相对于最近的定位父元素进行定位（而不是相对于视口定位），但如果这个绝对定位的元素没有父元素，它将随文档（body）的滚动而滚动。（需要容器）
position：sticky（粘性定位）
会根据用户的滚动位置进行定位。
粘性元素会根据滚动位置在相对和固定之间切换，期限它会被相对定位，直到在视口中遇到给定的偏移位置位置，然后将其粘贴在适当的位置。
重叠元素
在对元素进行定位时，他们可以与其他元素重叠。
z-index属性指定元素的堆栈顺序（哪个元素应该放置在其他元素的前面或后面）
元素可以设置正或负的堆叠顺序。
越大越在前面。
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
