网页制作css简单
CSS 基础语法
CSS 规则由选择器和声明块组成。选择器指定样式应用的对象，声明块包含属性和值：
选择器 {
属性: 值;
属性: 值;
}示例：
p {
color: blue;
font-size: 16px;
}常用选择器类型
- 元素选择器：直接使用 HTML 标签名（如
p、h1）。 - 类选择器：以
.开头（如.header），通过 HTML 的class属性调用。 - ID 选择器：以
#开头（如#main），通过id属性调用（一个页面中唯一）。 - 后代选择器：通过空格嵌套（如
div p选择div内的所有p）。
常见样式属性
- 文本样式：
color: #FF0000; /* 文字颜色 */ font-family: Arial; /* 字体 */ text-align: center; /* 对齐方式 */ - 盒模型：
width: 200px; /* 宽度 */ padding: 10px; /* 内边距 */ margin: 20px; /* 外边距 */ border: 1px solid black; /* 边框 */
引入 CSS 的三种方式
- 内联样式：直接在 HTML 标签中使用
style属性。<p style="color: red;">文本</p> - 内部样式表：在 HTML 的
<head>中添加<style>标签。<style> p { color: blue; } </style> - 外部样式表：通过
<link>引入独立的.css文件（推荐）。<link rel="stylesheet" href="styles.css">
简单布局示例
使用 display: flex 实现水平排列：
.container {
display: flex;
gap: 10px; /* 元素间距 */
}
.box {
width: 100px;
height: 100px;
background: #eee;
}对应 HTML：
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>响应式设计基础
通过媒体查询适配不同屏幕尺寸：
@media (max-width: 600px) {
.container {
flex-direction: column; /* 小屏幕改为垂直排列 */
}
}调试技巧
- 浏览器开发者工具（F12）中检查元素，实时修改 CSS。
- 使用
border: 1px solid red;快速定位元素边界问题。
通过以上基础内容，可以快速实现网页的简单样式和布局。
