第三章：CSS进阶特性

最新推荐文章于 2024-05-18 11:09:56 发布

艾恩小灰灰

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量745

点赞数 20

分类专栏： CSS入门到精通文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_68127493/article/details/137397468

版权

CSS入门到精通专栏收录该内容

9 篇文章 0 订阅

订阅专栏

层叠与继承

层叠（Cascading）：在CSS中，当多个选择器应用于同一个元素时，样式可能相互冲突。层叠原则决定了如何解决这种冲突。样式的选择遵循以下优先级顺序：
- 内联样式（style属性直接在HTML标签中定义）优先级最高。
- ID选择器的优先级高于类选择器和属性选择器。
- 类选择器和属性选择器优先级高于元素选择器和伪类选择器。
- !important声明的样式具有最高优先级，无论它们在何处定义。
示例：

Html
```
<style>
p { color: red; } /* 元素选择器 */
.text { color: blue; } /* 类选择器 */
#unique { color: green !important; } /* ID选择器且带有!important */
</style>
<p class="text" id="unique" style="color: yellow;">文本颜色</p>
```
在这个例子中，尽管有多种样式定义，最终“文本颜色”的颜色将是绿色，因为ID选择器加上!important的优先级最高。

继承（Inheritance）： CSS属性可以被子元素继承，比如字体相关的属性、文本颜色等。不是所有属性都能继承，如边框、内边距、外边距等通常不会被继承。

示例：

Html
```
<style>
body { font-family: Arial, sans-serif; color: darkblue; }
</style>
<body>
  <p>这段文本将继承body的字体家族和颜色。</p>
  <div style="color: red;">这个div内的文本颜色将被覆盖，字体仍然继承body的字体。</div>
</body>
```

CSS3新特性

圆角（Border-radius）：

Css

.rounded-corners {
  border-radius: 10px; /* 设置元素四个角都为10像素圆角 */
}
.specific-corner {
  border-top-left-radius: 5px 15px; /* 设置左上角圆角半径 */
}

**阴影（Box-shadow）**：
```css
.box-shadow-example {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 水平偏移量、垂直偏移量、模糊半径、颜色和透明度 */
}

**渐变（Gradients）**：
```css
.gradient-background {
  background: linear-gradient(to bottom, red, orange, yellow); /* 线性渐变从上到下由红色变为橙色再变为黄色 */
}

**动画（Animations）**：
使用`@keyframes`创建动画并应用到元素上：
```css
@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
.animated-element {
  animation: fadeInOut 2s infinite; /* 动画名称、持续时间、循环次数 */
}

**过渡效果（Transitions）**：
```css
.transition-effect {
  transition: background-color 0.5s ease-in-out; /* 属性名、持续时间、速度曲线 */
}
.transition-effect:hover {
  background-color: gold; /* 鼠标悬停时触发过渡效果 */
}

响应式设计与媒体查询

媒体查询（Media Queries）允许根据设备特征（如视窗宽度、设备像素比等）应用不同的CSS样式：

Css
```
/* 当视窗宽度小于等于600px时，更改body背景色 */
@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

/* 为小屏幕设备调整布局 */
@media screen and (max-width: 480px) {
  .container {
    flex-direction: column; /* 将Flex容器更改为垂直布局 */
  }
}
```
这样，随着浏览器窗口大小的变化或者在不同设备上浏览网站时，样式可以根据预设的条件自动调整，从而实现响应式布局。

艾恩小灰灰

关注

20
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
第三章：CSS进阶特性

在CSS中，当多个选择器应用于同一个元素时，样式可能相互冲突。： CSS属性可以被子元素继承，比如字体相关的属性、文本颜色等。在这个例子中，尽管有多种样式定义，最终“文本颜色”的颜色将是绿色，因为ID选择器加上!这样，随着浏览器窗口大小的变化或者在不同设备上浏览网站时，样式可以根据预设的条件自动调整，从而实现响应式布局。important声明的样式具有最高优先级，无论它们在何处定义。类选择器和属性选择器优先级高于元素选择器和伪类选择器。ID选择器的优先级高于类选择器和属性选择器。
复制链接

扫一扫