CSS基础 | 青训营笔记
这是我参与「第四届青训营」笔记创作活动的的第2天
什么是css？
css指的是层叠样式表
语法
选择器{属性：值}
h1{color:red}
选择器
- 简单（根据名称、id、类来选取元素）
- 组合器（根据它们之间的特定关系来选取元素）
- 伪类（根据特定状态选取元素）
- 伪元素（选取元素的一部分并设置其样式）
- 属性（根据属性或属性值来选取元素）
类选择器
p.important{color:red}
class属性为important的所有段落为红色。
属性选择器
简单属性选择
a[href][title] {color:red;}将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
具体属性值选择
a[href="https://www.baidu.com"] {color: red;}
将指定超链接变成红色
特定属性选择类型
*[lang|="en"] {color: red;}会选择 lang 属性等于 en 或以 en- 开头的所有元素。
后代选择器
h1 em {color:red;}只选择对 h1 元素中的 em 元素应用样式
子代元素选择器
只能选择作为某元素子元素的元素
h1 > strong {color:red;} 只选择作为h1元素子元素的所有strong元素
相邻兄弟选择器
h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素。
CSS背景
- background-color：背景颜色。
- background-image：背景图像。
- background-repeat：背景重复，默认情况下，在水平和垂直方向上都重复图像。
- background-attachment：背景附着，指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）。
- background-position：用于指定背景图像的位置。
边框
边框类型
border-style 属性指定要显示的边框类型。
允许以下值：
dotted- 定义点线边框dashed- 定义虚线边框solid- 定义实线边框double- 定义双边框groove- 定义 3D 坡口边框。效果取决于 border-color 值ridge- 定义 3D 脊线边框。效果取决于 border-color 值inset- 定义 3D inset 边框。效果取决于 border-color 值outset- 定义 3D outset 边框。效果取决于 border-color 值none- 定义无边框hidden- 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
文本
对齐
text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。
当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的。
vertical-align 属性设置元素的垂直对齐方式。
装饰
text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线。
隐藏元素的方法
-
display: none：不会在页面中占位置，也不会响应绑定的监听事件。
-
visibility: hidden：元素在页面中占位置，但是不会响应绑定的监听事件。
-
opacity: 0：将元素的透明度设置为 0来隐藏。占据空间，并且能够响应元素绑定的监听事件。
-
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
-
z-index: 负值：遮盖住元素，以此来实现隐藏。
-
transform: scale(0,0) ：将元素缩放为 0，实现隐藏。占据位置，但不会响应绑定的监听事件。
