CSS 属性学习笔记(入门)

1. 选择器

CSS选择器用于选择要样式化的HTML元素。以下是一些常见的选择器:

元素选择器

css 复制代码
p {
  color: blue;
}

描述: 选择所有 <p> 元素,并将文本颜色设置为蓝色。

类选择器

css 复制代码
.highlight {
  background-color: yellow;
}

描述: 选择所有具有 highlight 类的元素,并将背景颜色设置为黄色。

ID选择器

css 复制代码
#header {
  font-size: 24px;
}

描述: 选择具有 header ID 的元素,并将字体大小设置为24像素。

组合选择器

css 复制代码
nav a {
  text-decoration: none;
}

描述: 选择所有在 nav 元素内的链接,并移除下划线。

2. 文本样式

字体大小

css 复制代码
p {
  font-size: 16px;
}

描述: 设置所有 <p> 元素的字体大小为16像素。

字体颜色

css 复制代码
h1 {
  color: #ff0000;
}

描述: 将所有 <h1> 元素的文本颜色设置为红色。

字体样式

css 复制代码
em {
  font-style: italic;
}

描述: 将所有 <em> 元素的字体样式设置为斜体。

3. 盒模型

宽度和高度

css 复制代码
.box {
  width: 200px;
  height: 150px;
}

描述: 设置所有具有 box 类的元素的宽度为200像素,高度为150像素。

边框

css 复制代码
.box {
  border: 2px solid #000;
}

描述: 为所有具有 box 类的元素添加2像素宽度、黑色实线边框。

内外边距

css 复制代码
.box {
  padding: 10px;
  margin: 20px;
}

描述: 为所有具有 box 类的元素设置10像素内边距和20像素外边距。

4. 布局

定位

css 复制代码
.absolute-position {
  position: absolute;
  top: 50px;
  left: 20px;
}

描述: 将具有 absolute-position 类的元素定位到相对于其包含块的左上角,距离顶部50像素,左侧20像素。

浮动

css 复制代码
.float-left {
  float: left;
}

描述: 将所有具有 float-left 类的元素向左浮动。

5. 背景

背景颜色

css 复制代码
body {
  background-color: #f4f4f4;
}

描述: 将整个页面的背景颜色设置为淡灰色。

背景图片

css 复制代码
header {
  background-image: url('header-bg.jpg');
}

描述:header 元素添加背景图片。

6. 动画

过渡效果

css 复制代码
.fade-in {
  transition: opacity 0.5s ease-in-out;
}

描述: 为具有 fade-in 类的元素添加0.5秒的透明度过渡效果,采用渐入渐出的缓动函数。

关键帧动画

css 复制代码
@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

描述: 定义一个名为 slide 的关键帧动画,使元素从左侧滑入。

相关推荐
红尘散仙1 分钟前
四、WebGPU 基础入门——Uniform 缓冲区与内存对齐
前端·rust·gpu
进取星辰13 分钟前
13、性能优化:魔法的流畅之道——React 19 memo/lazy
前端·react.js·前端框架
zwjapple18 分钟前
React中createPortal 的详细用法
前端·javascript·react.js
小矮马20 分钟前
React-组件通信
前端·javascript·react.js
codingandsleeping28 分钟前
pnpm + monorepo:高效的项目管理方式
前端
程序员三千_1 小时前
最近爆火的MCP到底是什么?
前端
宁酱醇1 小时前
各种各样的bug合集
开发语言·笔记·python·gitlab·bug
古时的风筝1 小时前
暴论:2025年,程序员必学技能就是MCP
前端·后端·mcp
DKPT1 小时前
正则表达式
java·数据库·笔记·学习·正则表达式
古时的风筝1 小时前
这编程圈子变化太快了,谁能告诉我 MCP 是什么
前端·后端·mcp