/* 基本样式 */ body { font-size: 14px; color: #333; background-color: #fff; } /* 选择器 */ a { color: #007bff; text-decoration: none; } /* 盒模型 */ div { width: 300px; height: 200px; border: 1px solid #ccc; padding: 20px; margin: 10px; }
其中,基本样式定义了网页的全局样式,选择器可以选择网页元素进行特定样式的设置,盒模型可以控制元素的尺寸、边框、内边距和外边距。
/* 文本样式 */ h1 { font-size: 24px; font-weight: bold; margin-bottom: 20px; } p { font-size: 16px; line-height: 1.5; margin-bottom: 10px; } /* 图片样式 */ img { width: 100%; height: auto; } /* 背景样式 */ #header { height: 80px; background-color: #333; color: #fff; text-align: center; line-height: 80px; }
另外,文本样式可以控制文字的大小、字体和行高,图片样式可以设置图片的宽高比例,背景样式可以设置元素的背景颜色和背景图片。
通过上述的示例,可以看到,CSS是一个非常强大的工具,可以用来控制网页的布局、颜色、字体等方面,通过不同的选择器、样式定义可以实现非常复杂的效果,对于网页设计来说,CSS是一项必备技能。