CSS学习

学习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，开发人员可以分离内容和样式，使网页更易于维护，提高用户体验。

二、学习资源

  1. W3Schools：这是一个非常全面的在线学习资源，提供了关于CSS的入门教程和参考手册。
  2. MDN Web Docs：这是一个由Mozilla维护的开发者资源，提供了关于各种Web技术的详细文档，包括CSS。
  3. CSS Tricks：这是一个由Chris Coyier维护的博客，提供了大量的CSS技巧和教程。

三、核心概念

  1. 选择器（Selectors）：选择器是用于选择你想要样式化的HTML元素的模式。它们可以包括元素名称、类、ID、属性、属性值等。例如，在以下的HTML代码中：

html复制代码
  <p class="highlight">Hello, world!</p>

我们可以使用类选择器 .highlight 来样式化这个段落：

css复制代码
  .highlight {
  color: red;
  }

  1. 属性（Properties）和值（Values）：属性是你想要设置的样式属性，例如字体、颜色、边距、背景等。值是你为属性设置的具体数值。例如，你可以设置color属性为red来改变文本颜色：

css复制代码
  color: red;

  1. 声明块（Declaration Block）：声明块包含选择器、属性和值，以及一个分号。例如：selector { property: value; }

  2. 层叠（Cascading）：CSS中的层叠是指多个样式可以应用于同一个元素，但它们之间会有优先级。优先级高的样式会覆盖优先级低的样式。你可以通过!important规则来强制一个样式具有最高优先级：

css复制代码
  p {
  color: blue !important;
  }

  1. 单位（Units）：CSS中的单位可以是像素（px）、百分比（%）、em、rem等。它们用于定义值的大小。例如，你可以使用px来设置一个元素的宽度为100像素：

css复制代码
  width: 100px;

  1. 布局（Layout）：CSS布局涉及到的概念包括盒模型、定位（相对、绝对、固定和粘性定位）、浮动和Flexbox等。盒模型是CSS布局的基础，每个元素都被视为一个盒子，这个盒子包含了该元素的内容，以及可能存在的内边距和外边距。Flexbox是一个用于创建复杂布局的布局模型，它允许你在不同屏幕尺寸和设备上提供灵活的布局解决方案。

  2. 响应式设计（Responsive Design）：响应式设计是指网页能够自适应不同大小的屏幕和设备。这通常通过媒体查询、弹性布局和流式布局等技术实现。例如，你可以使用媒体查询来改变不同屏幕尺寸下的布局：

css复制代码
  @media screen and (max-width: 600px) {
  body {
  background-color: lightblue;
  }
  }

在屏幕宽度小于600像素时，背景颜色将变为浅蓝色。

posted @ 2023-12-09 20:43  20211311  阅读(20)  评论(0)  编辑  收藏  举报