CSS3新手入门必备：规则、选择器与派生技巧概览

CSS3,入门

需积分: 29 130 浏览量更新于2024-09-08 1 收藏 329KB DOC 举报

身份认证购VIP最低享 7 折!

30元优惠券

CSS3笔记，适合新手入门，详细解析了CSS3的基础概念和关键特性，使初学者能够快速掌握这一前端开发语言。以下将详细介绍CSS3中的核心知识点： 1. CSS规则结构：CSS由选择器和声明组成，形式为 `selector { property: value; }`。选择器决定了应用样式的元素，而声明则指定元素的视觉属性，如颜色、字体、布局等。 2. 选择器类型： - 元素选择器：如`h1`、`html`等，用于选取特定类型的元素，如`html{color:black;}`设置页面所有`<html>`元素的文本颜色为黑色。 - ID选择器：以`#`标识，如`#red{color:red;}`，仅对文档中唯一指定ID的元素生效。 - 类选择器：以`.`标识，如`.center{text-align:center;}`，可应用于多个具有相同类名的元素。 - 属性选择器：`[attribute=value]`，如`[title=W3School]{border:5px solid blue;}`，选择具有特定属性值的元素。 - 通配符选择器：`*`，匹配任何元素，如`*{color:red;}`统一设置所有元素的文本颜色。 - 伪类和伪元素：如`:active`,`:focus`,`:hover`等，用于为特定状态下的元素添加样式，还有`:first-letter`,`:first-line`,`:before`,`:after`用于控制元素内的特定部分。 3. 选择器组合： - 分组选择器：多个选择器用逗号分隔，如`h1, h2, h3, ...`设置一组元素的样式。 - 声明分组：在大括号`{}`内集中多个声明，如`font: 28px Verdana; color: white;`。 - 派生选择器（上下文选择器）： - 后代选择器：通过空格连接选择器，如`<p> h1 {color:red;}`，表示所有嵌套在`<p>`内的`<h1>`元素。 - 子元素选择器：用`>`符号表示，如`ul > li {color:blue;}`，仅对直接子元素起作用。 4. 简化代码： - 通过组合不同的选择器和声明分组，可以创建简洁高效的CSS代码，提升代码的可读性和维护性。通过学习和理解以上内容，新手可以迅速上手CSS3，为网页设计和开发打下坚实的基础。继续实践并熟悉这些规则，将有助于创建出更美观、响应式的网页布局和交互效果。

资源详情

资源推荐

animation
所有动画属性的简写属性（除后 2 个）。语法
animation: name duration timing-function delay 
iteration-count direction; （-webkit-）
3
animation-name
规定 @keyframes 动画的名称。
3
animation-duration
规定动画完成一个周期所花费的秒或毫秒。
示例：animation-duration:2s;
3
animation-timing-function
规定动画的速度曲线。值为：ease 默认，低速-加快-变
慢。linear 匀速。ease-in 低速开始。ease-out 低速结
束。ease-in-out 低速开始和结束。cubic-
bezier(n,n,n,n)，n 可能的值是从 0 到 1。
3
animation-delay
规定动画何时开始，以秒或毫秒计。
3
animation-iteration-count
规定动画被播放的次数。值为: n | in+nite;n 次|无限次
3
animation-direction
规定动画是否在下一周期逆向地播放。值为：normal 正
常播放 | alternate 轮流反向播放;
3
animation-play-state
规定动画是否正在运行或暂停。值为：paused|running;
3
animation-+ll-mode
规定动画在播放之前或之后，其动画效果是否可见。
值为: none | forwards | backwards | both;
3
CSS 背景属性（Background）
属性 描述
CSS
background
在一个声明中设置所有的背景属性。例：background: 
#00FF00 url(bgimage.gif) no-repeat +xed top;
1
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
值为：scroll 默认滚动|+xed 背景不移动 |inherit 从父
元素继承
1
background-color
设置元素的背景颜色。值为：color_name | 
hex_number | rgb_number | transparent 默
认为透明 | inherit
1
background-image
设置元素的背景图像。值为：url('URL') | none |
inherit
1
background-position
设置背景图像的开始位置。值为：1.top|center|
bottom left|center|right，2.x%  y%，3. xpos 
ypos。如果只规定 1 个值，则另一个默认 center 或
50%。
1
background-repeat
设置是否及如何重复背景图像。值为：repeat |repeat-
x |repeat-y |no-repeat |inherit
1
background-clip
规定背景的绘制区域。 值为：border-box 绘制到边框
盒 |padding-box 内边距框 |content-box 内容框;
3
background-origin
规定背景图片的定位区域（规定 background-position
相对于什么位置来定位）。值为：padding-box |
border-box |content-box;
3
background-size
规定背景图片的尺寸。值为：length 度量尺寸| 
percentage 百分比 |cover 全覆盖 |contain 扩展至最
3