学习CSS(层叠样式表)是学习计算机科学的重要部分。以下是一份详细的CSS学习笔记:
CSS基础
CSS是什么?
CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各类XML分支语言)文档的呈现方式。CSS描述了如何在屏幕、纸质、音频等媒介上渲染元素。 CSS的基本语法
CSS规则由两个主要部分构成:选择器(Selector)和一组属性(Declaration)。选择器用于选取需要添加样式的HTML元素。属性和值则用于定义元素的样式。
例如:
p { color: red; text-align: center; } 这段代码的意思是,所有
元素的文本颜色将是红色,并且文本将居中显示。 CSS的引入方式
内联样式:在HTML元素内部使用 style 属性。 内部样式:在HTML文档的 部分使用 标签。 外部样式:在HTML文档中使用 标签链接外部CSS文件。
CSS选择器
CSS选择器用于选取需要添加样式的HTML元素。以下是一些常见的CSS选择器:
元素选择器:选择所有指定类型的元素。例如, p 选择所有
元素。 类选择器:选择所有class属性中包含指定值的元素。例如, .company-name 选择所有class属性包含 company-name 的元素。 ID选择器:选择所有id属性等于指定值的元素。例如, #company-name 选择id属性等于 company-name 的元素。
CSS布局
CSS布局主要涉及到定位、浮动、显示、表格布局、弹性布局等概念。
定位: position 属性用于设置元素的定位方式。常见的定位方式有静态定位、相对定位、绝对定位和固定定位。 浮动: float 属性用于设置元素的浮动方式。常见的浮动方式有左浮动和右浮动。 显示: display 属性用于设置元素的显示方式。常见的显示方式有块级元素、内联元素、列表项等。 弹性布局:Flexbox是一种现代的布局模式,可以提供更灵活的布局方式。使用 display: flex 可以将一个容器设置为弹性布局容器。
以上只是CSS学习笔记的一部分内容,CSS的知识体系非常丰富,包括颜色和背景、文本和字体、边框和背景、盒模型、媒体查询、动画等更多内容。建议通过实际项目练习和深入学习,以更好地理解和掌握CSS。