CSS入门指南3
1.属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
<div class="icon-home">Home</div>
<div class="icon-settings">Settings</div>
<div class="icon-user">User</div>
<div class="not-icon-profile">Profile</div>
<div class="another-class">Another</div>
使用 div[class^=icon] 选择器，你可以为所有以 “icon” 开头的 class 的 <div> 元素应用样式。例如：
div[class^=icon] {
color: blue;
font-size: 20px;
background-color: lightgray;
padding: 10px;
margin: 5px;
border: 1px solid black;
}
组合使用
你还可以组合使用这些选择器来进一步细化选择。例如，你可以选择一个type属性为text且class属性值以form-开头的input元素：
input[type="text"][class^="form-"] {
/* styles here */
}
2.结构伪类选择器
:nth-child(n)
选择其父元素的第n个子元素。n可以是数字、关键词（如even和odd），或者是一个公式（如2n+1表示所有奇数子元素）。
p:nth-child(2) {
color: green;
}
p:nth-child(odd) {
background-color: lightgray;
}
:nth-last-child(n)
与:nth-child(n)类似，但它是从父元素的最后一个子元素开始计数的。
p:nth-last-child(2) {
text-decoration: underline;
}
:first-of-type
选择其父元素中相同类型元素的第一个。
p:first-of-type {
font-size: 20px;
}
:nth-of-type(n)
与:nth-child(n)类似，但它是基于相同类型的元素进行计数的。
p:nth-of-type(3) {
color: purple;
}
:nth-child 与 :nth-of-type 的区别
<style>
ul li:nth-child(2){
/* 字体变成红色 */
color: red;
}
ul li:nth-of-type(2){
/* 背景变成绿色 */
background-color: green;
}
</style>
<ul>
<li>列表项一</li>
<p>乱来的p标签</p>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
也就是说：
E:nth-child(n)匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
3.伪元素选择器
::before 和 ::after
这两个伪元素选择器在选定的元素内容之前或之后插入内容。通过content属性定义要插入的内容。
p::before {
content: "开始：";
}
p::after {
content: "结束。";
}
::selection
选择用户用鼠标或其他方式（如拖动）在网页上选择的文本部分。这允许你改变选定文本的外观。
::selection {
background-color: yellow;
color: black;
}
4.盒子模型
box-sizing 是 CSS 中的一个属性，它决定了元素的总宽度和总高度应如何计算，包括内容（content）、内边距（padding）和边框（border），但不包括外边距（margin）。box-sizing 属性有两个主要的值：content-box 和 border-box。
content-box
content-box 是 box-sizing 的默认值。当设置为 content-box 时，元素的宽度和高度仅包含内容，而不包括内边距和边框。这意味着，如果你为一个元素设置了宽度、内边距和边框，元素的总宽度将是这三者之和。
例如：
.box {
width: 200px;
padding: 10px;
border: 5px solid black;
box-sizing: content-box; /* 默认值 */
}
上述元素的实际渲染宽度将是 200px（内容宽度）+ 20px（左右内边距）+ 10px（左右边框）= 230px。
border-box
当 box-sizing 设置为 border-box 时，元素的宽度和高度包括了内容、内边距和边框。这意味着，如果你为一个元素设置了宽度，那么该元素的宽度将包含内容、内边距和边框。设置内边距和边框不会增加元素的宽度。
例如：
.box {
width: 200px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
}
在上述例子中，尽管设置了内边距和边框，但元素的渲染宽度仍然是 200px。内边距和边框的大小将从元素指定的宽度中减去。
5.滤镜filter
filter属性允许你对元素（如<img>、<video>、<canvas>元素，以及任何具有background-image的元素）应用图形效果，如模糊、亮度、对比度、饱和度等。
常见属性：
blur()：给图像应用模糊效果。
img {
filter: blur(5px);
}
brightness()：调整图像的亮度。值在0%（黑色）到100%（原图）之间，也可以超过100%以增加亮度。
img {
filter: brightness(70%);
}
opacity()：等价于 CSS 的 opacity 属性，但不会影响元素下的其他内容。值在0%（完全透明）到100%（完全不透明）之间。
img {
filter: opacity(50%);
}
6.calc函数
calc() 是一个函数，它允许你对长度、频率、角度、时间、数字等类型的值进行动态计算。这个函数的主要优点是它可以在CSS中直接进行数学运算，而无需使用JavaScript或服务器端代码。
calc() 函数可以接受加（+）、减（-）、乘（*）和除（/）运算符。但是，在使用乘法或除法时，必须确保其中一个操作数是明确的数字（而不是一个百分比或一个由em、rem、vw等构成的单位），因为CSS不允许在这些单位之间进行直接的数学运算。
示例：
.container {
width: 100%;
}
.element {
width: calc(70% - 50px);
}
注意：
- 在使用
calc()时，运算符前后必须有空格，否则CSS解析器会报错。 - 尽管
calc()可以进行复杂的数学运算，但通常建议保持其简单性，以便更好地维护和理解样式。
7.过渡
CSS 过渡（Transitions）允许你在一个时间段内平滑地改变一个 CSS 属性的值。这可以创建出动态的、吸引人的效果，而无需使用 Flash 或 JavaScript。
基本语法
CSS 过渡由两个或更多个 CSS 样式之间的平滑转换组成。要实现过渡效果，你需要指定以下两个属性：
transition-property: 指定应用过渡的 CSS 属性的名称。如果你想为所有属性应用过渡，可以使用all。transition-duration: 定义过渡效果花费的时间长度。默认是 0，意味着不会有过渡效果。
此外，还有两个可选的过渡属性：
transition-timing-function: 定义过渡效果的时间曲线。例如，ease、linear、ease-in、ease-out、ease-in-out，或者自定义的贝塞尔曲线。transition-delay: 定义过渡效果何时开始。它表示在元素状态改变后延迟多长时间开始过渡效果。
这四个属性可以简写为一个 transition 属性，如下所示：
transition: property duration timing-function delay;
示例：
button {
background-color: blue;
/* 添加过渡效果 */
transition: background-color 2s;
}
button:hover {
background-color: red;
}
过渡和动画的区别
虽然 CSS 过渡和动画都可以创建动态效果，但它们之间有一些区别：
- 过渡 是基于元素从一个状态到另一个状态的平滑变化。它依赖于一个触发事件（如点击、悬停等），并且只定义开始和结束状态。
- 动画 允许你定义更复杂的序列，包括多个关键帧和中间状态。动画不依赖于触发事件，并且可以自动播放或循环播放。
8.2D转换
在CSS中，2D转换（transforms）允许你对元素进行2D空间内的移动、旋转、缩放和倾斜。这些转换是通过transform属性来应用的，并且它们不会影响到页面的布局，只是改变了元素自身的呈现方式。
以下是CSS 2D转换的一些常用函数：
-
translate()
：移动元素。
translate(x, y)：在x轴和y轴上移动元素。正值会向右或向下移动元素，负值会向左或向上移动元素。- 当括号里面使用了百分号算法，此时百分比是相对于元素自身的宽度（对于 X 轴）和高度（对于 Y 轴）来计算的。
-
rotate()
：旋转元素。
rotate(angle)：使元素以中心为原点进行旋转，角度为正时顺时针旋转，为负时逆时针旋转。- 旋转中心
默认情况下，
rotate()的旋转中心是元素的中心点（即transform-origin的默认值是50% 50%）。但是可以通过改变transform-origin的值来改变旋转中心。基本语法：
/* 关键词 */ transform-origin: top left; /* 长度值 */ transform-origin: 10px 20px; /* 百分比算法 */ transform-origin: 30% 70%;其中百分比值代表的是相对于元素自身尺寸的位置。具体来说，这些百分比是相对于元素的边框盒（border box）来计算的。
例如，如果想让元素围绕其左上角旋转，你可以这样设置：
.box { transform-origin: 0 0; /* 设置旋转中心为左上角 */ transform: rotate(45deg); } -
scale()
：缩放元素。
scale(x, y)：对元素进行缩放。如果两个参数相等，则元素会等比例缩放；如果不同，则元素会按照给定的比例进行缩放。
等比例缩放
.box {
transform: scale(2); /* 水平和垂直方向都放大到原来的 2 倍 */
}
不等比例缩放
.box {
transform: scale(1.5, 0.75); /* 水平方向放大到原来的 1.5 倍，垂直方向缩小到原来的 0.75 倍 */
}
缩放原点
缩放操作是相对于元素的 transform-origin 属性定义的点进行的。默认情况下，transform-origin 的值是 50% 50%，即元素的中心点。但是，可以更改这个值来改变缩放的视觉效果。
和直接更改高度和宽度相比，缩放不会影响其他盒子的布局
9.3D转换
在CSS中，你可以使用transform属性来进行3D转换。这允许你沿着X、Y和Z轴移动、旋转和缩放元素。
3D转换属性
transform：该属性用于在2D或3D空间中转换元素。你可以使用以下函数进行3D转换：translate3d(tx, ty, tz)：在3D空间中移动元素。rotate3d(x, y, z, angle)：根据给定的旋转向量和角度在3D空间中旋转元素。scale3d(sx, sy, sz)：在3D空间中缩放元素。perspective(d)：为元素设置透视效果，这会影响子元素的3D转换。transform-style: preserve-3d：在元素上启用3D转换，并允许其子元素也进行3D转换。
transform-origin：如之前所述，该属性定义了转换的原点。在3D转换中，你也可以使用第三个值来定义z轴上的位置。
该属性用于在2D或3D空间中转换元素。你可以使用以下函数进行3D转换：translate3d(tx, ty, tz)：在3D空间中移动元素。rotate3d(x, y, z, angle)：根据给定的旋转向量和角度在3D空间中旋转元素。scale3d(sx, sy, sz)：在3D空间中缩放元素。perspective(d)：为元素设置透视效果，这会影响子元素的3D转换。transform-style: preserve-3d：在元素上启用3D转换，并允许其子元素也进行3D转换。
transform-origin：如之前所述，该属性定义了转换的原点。在3D转换中，你也可以使用第三个值来定义z轴上的位置。perspective和perspective-origin：这两个属性定义了观察者与Z=0平面的距离和透视的起点。它们通常在容器的样式中设置，以影响容器内所有元素的3D转换。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
