学习CSS
一、概述
CSS（层叠样式表）是一种用于描述HTML（或XML和SVG等其他标记语言）文档样式的样式表语言。它被广泛用于网页和用户界面的设计和布局。通过使用CSS，开发人员可以分离内容和样式，使网页更易于维护，提高用户体验。
二、学习资源
W3Schools、菜鸟教程
三、核心概念
选择器：选择器是用于选择你想要样式化的HTML元素的模式。它们可以包括元素名称、类、ID、属性、属性值等。例如，在以下的HTML代码中：
html
<p class="highlight">Hello, world!</p>
可以使用类选择器 .highlight 来样式化这个段落：
css
.highlight {
color: red;
}
属性和值：属性是设置的样式属性，例如字体、颜色、边距、背景等。值为属性设置的具体数值。例如，可以设置color属性为red来改变文本颜色：
css
color: red;
声明块：声明块包含选择器、属性和值，以及一个分号。例如：selector { property: value; }
层叠：CSS中的层叠是指多个样式可以应用于同一个元素，但它们之间会有优先级。优先级高的样式会覆盖优先级低的样式。可以通过!important规则来强制一个样式具有最高优先级：
css
p {
color: blue !important;
}
单位：CSS中的单位可以是像素（px）、百分比（%）、em、rem等。它们用于定义值的大小。例如，可以使用px来设置一个元素的宽度为100像素：
css
width: 100px;
布局：CSS布局涉及到的概念包括盒模型、定位（相对、绝对、固定和粘性定位）、浮动和Flexbox等。盒模型是CSS布局的基础，每个元素都被视为一个盒子，这个盒子包含了该元素的内容，以及可能存在的内边距和外边距。Flexbox是一个用于创建复杂布局的布局模型，允许在不同屏幕尺寸和设备上提供灵活的布局解决方案。
响应式设计（Responsive Design）：响应式设计是指网页能够自适应不同大小的屏幕和设备。这通常通过媒体查询、弹性布局和流式布局等技术实现。例如，可以使用媒体查询来改变不同屏幕尺寸下的布局：
css
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
在屏幕宽度小于600像素时，背景颜色将变为浅蓝色。
四、如何更好地使用
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。可以在<head> 部分通过 <style>标签定义内部样式表:
<head><styletype="text/css">
body {background-color:yellow;}
p {color:blue;}</style></head>
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head><linkrel="stylesheet"type="text/css"href="mystyle.css"></head>
学习CSS：从入门到精通
一、概述
CSS（层叠样式表）是一种用于描述HTML（或XML和SVG等其他标记语言）文档样式的样式表语言。它被广泛用于网页和用户界面的设计和布局。通过使用CSS，开发人员可以分离内容和样式，使网页更易于维护，提高用户体验。
二、学习资源
- W3Schools：这是一个非常全面的在线学习资源，提供了关于CSS的入门教程和参考手册。
- MDN Web Docs：这是一个由Mozilla维护的开发者资源，提供了关于各种Web技术的详细文档，包括CSS。
- CSS Tricks：这是一个由Chris Coyier维护的博客，提供了大量的CSS技巧和教程。
三、核心概念
-
选择器（Selectors）：选择器是用于选择你想要样式化的HTML元素的模式。它们可以包括元素名称、类、ID、属性、属性值等。例如，在以下的HTML代码中：
| <p class="highlight">Hello, world!</p> |
我们可以使用类选择器 .highlight 来样式化这个段落：
| .highlight { |
| color: red; |
| } |
-
属性（Properties）和值（Values）：属性是你想要设置的样式属性，例如字体、颜色、边距、背景等。值是你为属性设置的具体数值。例如，你可以设置
color属性为red来改变文本颜色：
| color: red; |
-
声明块（Declaration Block）：声明块包含选择器、属性和值，以及一个分号。例如：
selector { property: value; } -
层叠（Cascading）：CSS中的层叠是指多个样式可以应用于同一个元素，但它们之间会有优先级。优先级高的样式会覆盖优先级低的样式。你可以通过
!important规则来强制一个样式具有最高优先级：
| p { |
| color: blue !important; |
| } |
-
单位（Units）：CSS中的单位可以是像素（px）、百分比（%）、em、rem等。它们用于定义值的大小。例如，你可以使用
px来设置一个元素的宽度为100像素：
| width: 100px; |
-
布局（Layout）：CSS布局涉及到的概念包括盒模型、定位（相对、绝对、固定和粘性定位）、浮动和Flexbox等。盒模型是CSS布局的基础，每个元素都被视为一个盒子，这个盒子包含了该元素的内容，以及可能存在的内边距和外边距。Flexbox是一个用于创建复杂布局的布局模型，它允许你在不同屏幕尺寸和设备上提供灵活的布局解决方案。
-
响应式设计（Responsive Design）：响应式设计是指网页能够自适应不同大小的屏幕和设备。这通常通过媒体查询、弹性布局和流式布局等技术实现。例如，你可以使用媒体查询来改变不同屏幕尺寸下的布局：
| @media screen and (max-width: 600px) { |
| body { |
| background-color: lightblue; |
| } |
| } |
在屏幕宽度小于600像素时，背景颜色将变为浅蓝色。
标签：样式,布局,学习,color,HTML,样式表,CSS From： https://www.cnblogs.com/chen-zeyang/p/17878795.html