当前位置：首页 > news >正文

CSS 02【基础语法学习】

news 2025/10/14 7:41:42

1 CSS 下拉菜单

CSS 下拉菜单 | 菜鸟教程https://www.runoob.com/css/css-dropdowns.html

<style>
.dropdown {position: relative;display: inline-block;
}
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);padding: 12px 16px;
}
.dropdown:hover .dropdown-content {display: block;
}
</style>
<div class="dropdown"><span>鼠标移动到我这！</span><div class="dropdown-content"><p>菜鸟教程</p><p>www.runoob.com</p></div>
</div>

实例解析

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

2 CSS属性选择器

CSS 属性选择器 | 菜鸟教程https://www.runoob.com/css/css-attribute-selectors.html

CSS 属性选择器是一种强大的选择机制，允许根据 HTML 元素的属性及其值来选择元素，而不仅仅依赖于类名、ID 或标签名。这为样式设计提供了更高的灵活性。

基本语法与类型

[属性名] - 选择所有具有指定属性的元素

/* 选择所有带有title属性的元素 */
[title] {color: blue;
}

[属性名 = 值] - 选择属性值完全匹配指定值的元素

/* 选择type属性值为"text"的input元素 */
input[type="text"] {border: 1px solid #ccc;
}

[属性名～= 值] - 选择属性值包含指定单词（以空格分隔）的元素

/* 选择class属性中包含"button"单词的元素 */
[class~="button"] {padding: 8px 16px;
}

[属性名 |= 值] - 选择属性值以指定值开头，且后面要么跟连字符，要么是属性值的结尾
```
/* 选择lang属性值为"en"或"en-xxx"的元素 */
[lang|="en"] {font-family: Arial, sans-serif;
}
```

[属性名 ^= 值] - 选择属性值以指定值开头的元素

/* 选择href属性以"https://"开头的链接 */
a[href^="https://"] {color: green;
}

[属性名 $= 值] - 选择属性值以指定值结尾的元素

/* 选择src属性以".png"结尾的图片 */
img[src$=".png"] {border: 2px solid #f00;
}

[属性名*= 值] - 选择属性值包含指定子字符串的元素

/* 选择href属性中包含"example"的链接 */
a[href*="example"] {text-decoration: none;
}

大小写敏感修饰符 - 在属性选择器后添加i使匹配不区分大小写

/* 匹配type为IMAGE、image或Image的input元素 */
input[type="image" i] {border-radius: 4px;
}

实际应用场景

为不同类型的表单元素设置独特样式
区分内部链接和外部链接
为特定文件类型的链接添加图标
基于数据属性（data-*）为元素应用条件样式

属性选择器特别适合需要基于元素动态特性进行样式设置的场景，能够减少对额外类名的依赖，使 HTML 结构更简洁。

3 CSS表单

CSS 表单 | 菜鸟教程https://www.runoob.com/css/css-form.html有趣的输入搜索框动画：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
input[type=text] {width: 130px;box-sizing: border-box;border: 2px solid #ccc;border-radius: 4px;font-size: 16px;background-color: white;background-image: url('https://static.jyshare.com/libs/images/mix/searchicon.png');background-position: 10px 10px; background-repeat: no-repeat;padding: 12px 20px 12px 40px;-webkit-transition: width 0.4s ease-in-out;transition: width 0.4s ease-in-out;
}input[type=text]:focus {width: 100%;
}
</style>
</head>
<body><p>搜索输入框带动画:</p><form><input type="text" name="search" placeholder="搜索..">
</form></body>
</html>