前端自学笔记_CSS

CSS (Cascading Style Sheets) 是用于描述网页样式的语言。以下是一些关键的CSS概念和实例代码片段：

1. 选择器：用于选择需要应用样式的元素。

/* 选择所有的段落元素 */
p {
  color: blue;
}
 
/* 选择ID为"header"的元素 */
#header {
  background-color: yellow;
}
 
/* 选择所有class包含"button"的元素 */
.button {
  padding: 5px 10px;
  border: 1px solid black;
}

2. 属性和值：定义如何显示选择的元素。

/* 设置段落文字颜色为蓝色 */
p {
  color: blue;
}
 
/* 设置段落文字大小为16px */
p {
  font-size: 16px;
}
 
/* 设置元素的宽度和高度 */
div {
  width: 100px;
  height: 100px;
}

3. 层叠：当多个样式表存在时，同一元素可能受到多个样式的影响，CSS通过层叠规则来决定最终应用哪个样式。

/* 内联样式 */
<p style="color: red;">这是一段红色的文字。</p>
 
/* 外部样式表 */
<link rel="stylesheet" type="text/css" href="styles.css">

4. 继承：子元素可以继承父元素的某些样式。

/* 链接颜色将被继承 */
a {
  color: blue;
}
 
/* 段落将继承链接的颜色 */
p {
  color: inherit;
}

5. 布局：使用CSS进行页面布局。

/* 简单的浮动布局 */
.column {
  float: left;
  width: 50%;
}
 
/* 使用flexbox布局 */
.container {
  display: flex;
}
 
.item {
  flex: 1; /* 可以自动分配空间 */
}

6. 媒体查询：响应式设计，根据屏幕大小应用不同样式。

/* 屏幕宽度小于600px时，字体大小变为14px */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

这些是CSS的基础概念，对于初学者来说是入门所需。随着学习的深入，可以进一步了解更高级的特性，如伪类选择器、动画、响应式布局、Flexbox和Grid布局等。