CSS 属性学习笔记（入门）

1. 选择器

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

元素选择器

p {color: blue;
}

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

类选择器

.highlight {background-color: yellow;
}

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

ID选择器

#header {font-size: 24px;
}

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

组合选择器

nav a {text-decoration: none;
}

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

2. 文本样式

字体大小

p {font-size: 16px;
}

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

字体颜色

h1 {color: #ff0000;
}

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

字体样式

em {font-style: italic;
}

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

3. 盒模型

宽度和高度

.box {width: 200px;height: 150px;
}

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

边框

.box {border: 2px solid #000;
}

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

内外边距

.box {padding: 10px;margin: 20px;
}

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

4. 布局

定位

.absolute-position {position: absolute;top: 50px;left: 20px;
}

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

浮动

.float-left {float: left;
}

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

5. 背景

背景颜色

body {background-color: #f4f4f4;
}

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

背景图片

header {background-image: url('header-bg.jpg');
}

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

6. 动画

过渡效果

.fade-in {transition: opacity 0.5s ease-in-out;
}

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

关键帧动画

@keyframes slide {from {transform: translateX(-100%);}to {transform: translateX(0);}
}

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