css

css常用标签

css常用标签

Posted by Starrynight on 2024-01-29
Estimated Reading Time 6 Minutes
Words 1.5k In Total
Viewed Times

CSS选择器与属性

基础部分

1.CSS 选择器大全

选择器 作用 示例
*（通配符选择器） 选中所有元素 * { margin: 0; padding: 0; }
元素名（标签选择器） 选中所有该标签的元素 p { color: blue; }
.class（类选择器） 选中所有带该类名的元素 .box { background: gray; }
#id（ID 选择器） 选中特定 id 的唯一元素 #header { font-size: 20px; }
标签1, 标签2（群组选择器） 选中多个标签 h1, h2, h3 { color: red; }
父 > 子（子选择器） 选中直接子元素 div > p { color: green; }
父 空格 子（后代选择器） 选中所有子元素（不管是否直接） div p { font-size: 18px; }
兄弟 +（相邻兄弟选择器） 选中紧接着的兄弟元素 h1 + p { color: blue; }
兄弟 ~（通用兄弟选择器） 选中所有兄弟元素 h1 ~ p { color: gray; }
:first-child 选中第一个子元素 p:first-child { color: red; }
:last-child 选中最后一个子元素 p:last-child { color: blue; }
:nth-child(n) 选中特定序号的子元素 li:nth-child(2) { color: blue; }
:nth-of-type(n) 选中特定类型的第 n 个元素 p:nth-of-type(2) { color: red; }
:not(选择器) 选中不符合条件的元素 div:not(.exclude) { color: black; }
:hover 鼠标悬停时触发样式 a:hover { color: red; }
:focus 选中获得焦点的元素 input:focus { border: 2px solid blue; }
:checked 选中复选框或单选框时生效 input:checked { background: yellow; }

2.CSS 颜色与文本样式

属性 作用 示例
color 文字颜色 color: red;
background-color 背景颜色 background-color: #f0f0f0;
font-size 文字大小 font-size: 16px;
font-weight 字体粗细 font-weight: bold;
font-style 文字样式 font-style: italic;
text-align 文字对齐方式 text-align: center;
line-height 行高 line-height: 1.5;
letter-spacing 字符间距 letter-spacing: 2px;
text-transform 文字大小写转换 text-transform: uppercase;
text-shadow 文字阴影 text-shadow: 2px 2px 5px black;

3.CSS 盒子模型

属性 作用 示例
margin 外边距 margin: 10px 20px 30px 40px;
padding 内边距 padding: 5px 10px;
border 边框 border: 2px solid black;
border-radius 圆角边框 border-radius: 10px;
box-shadow 盒子阴影 box-shadow: 5px 5px 10px gray;

4.CSS 尺寸与定位

属性 作用 示例
width / height 宽度 / 高度 width: 100px; height: 200px;
max-width / min-width 最大/最小宽度 max-width: 800px; min-width: 300px;
position 定位方式 position: absolute;
top, left, right, bottom 位置偏移 top: 50px; left: 100px;
z-index 层级 z-index: 10;
visibility 可见性 visibility: hidden;
opacity 透明度 opacity: 0.5;

5.CSS 布局

属性 作用 示例
display 显示方式 display: flex;
flex-direction 方向 flex-direction: row;
justify-content 水平对齐 justify-content: center;
align-items 垂直对齐 align-items: center;
grid-template-columns 网格列数 grid-template-columns: 1fr 2fr;

进阶部分

这里是更完整的 CSS 交互效果，包括 鼠标事件、动态动画、过渡效果、响应式设计 等内容，并附带示例代码。

1.鼠标交互效果

属性 / 伪类 作用 示例
:hover 鼠标悬停时触发 button:hover { background: red; }
:active 元素被点击时触发 button:active { background: blue; }
:focus 输入框获得焦点时触发 input:focus { border: 2px solid blue; }
:focus-within 当元素内的任何子元素获得焦点时触发 div:focus-within { border: 3px solid green; }
:checked 复选框或单选框被选中时触发 input:checked + label { color: red; }
:disabled 禁用的元素样式 button:disabled { background: gray; cursor: not-allowed; }
:enabled 只选中可用的表单元素 input:enabled { border: 2px solid black; }
:not(选择器) 选中不符合条件的元素 button:not(:disabled) { background: green; }

示例：鼠标悬停改变按钮颜色

1
2
3
4
5
6
7
8
9
10
button {
    background: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
button:hover {
    background: red;
}

2.过渡效果（transition）

属性 作用 示例
transition 让样式变化变得平滑 transition: all 0.5s ease-in-out;
transition-property 指定应用过渡的属性 transition-property: background-color;
transition-duration 过渡的持续时间 transition-duration: 0.3s;
transition-timing-function 速度曲线 transition-timing-function: ease-in-out;
transition-delay 延迟时间 transition-delay: 0.2s;

示例：悬停时让按钮变大

1
2
3
4
5
6
7
8
9
button {
    background: blue;
    color: white;
    padding: 10px 20px;
    transition: transform 0.3s ease-in-out;
}
button:hover {
    transform: scale(1.2);
}

3.CSS 动画（@keyframes + animation）

属性 作用 示例
animation 触发动画 animation: fade-in 2s infinite;
@keyframes 定义动画 @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
animation-name 绑定动画名称 animation-name: slide;
animation-duration 动画持续时间 animation-duration: 1s;
animation-timing-function 动画速率曲线 animation-timing-function: ease-in-out;
animation-iteration-count 动画循环次数 animation-iteration-count: infinite;
animation-delay 动画延迟时间 animation-delay: 0.5s;

示例：让元素渐隐渐现

1
2
3
4
5
6
7
8
9
10
11
@keyframes fade-in-out {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
.box {
    width: 100px;
    height: 100px;
    background: red;
    animation: fade-in-out 3s infinite;
}

4.鼠标样式（cursor）

属性 作用 示例
cursor: pointer; 变成手形 button { cursor: pointer; }
cursor: move; 变成可拖动的样式 .drag { cursor: move; }
cursor: not-allowed; 变成禁止状态 button:disabled { cursor: not-allowed; }
cursor: text; 变成文本输入样式 input { cursor: text; }

5.元素的显示与隐藏

属性 作用 示例
visibility: hidden; 元素隐藏，但仍占据空间 div { visibility: hidden; }
display: none; 元素隐藏，不占据空间 div { display: none; }
opacity: 0; 元素完全透明，但仍然存在 div { opacity: 0; }

示例：点击按钮切换元素显示

1
2
3
.hidden {
    display: none;
}
1
2
<button onclick="document.getElementById('box').classList.toggle('hidden')">点击显示/隐藏</button>
<div id="box" class="hidden">这是一个隐藏的盒子</div>

6.响应式设计

属性 作用 示例
@media 适配不同屏幕尺寸 @media (max-width: 600px) { body { background: yellow; } }
flexbox 让元素自适应排列 display: flex; justify-content: space-between;
grid 让元素按网格排列 display: grid; grid-template-columns: 1fr 1fr;

示例：当屏幕小于600px时改变背景色

1
2
3
4
5
@media screen and (max-width: 600px) {
    body {
        background: yellow;
    }
}

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。 也欢迎您共享此博客，以便更多人可以参与。 如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。 谢谢 ！

特色标签
css
链友
ESC