-
层叠与继承
层叠(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容器更改为垂直布局 */ } }
这样,随着浏览器窗口大小的变化或者在不同设备上浏览网站时,样式可以根据预设的条件自动调整,从而实现响应式布局。