css学习记录

简介: 1.什么是 CSS?2.三种样式表3.网页布局

1.什么是 CSS?


CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

样式表定义如何显示 HTML 元素,就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。


2.三种样式表


外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观。每个页面使用link 标签链接到样式表。 link 标签在(文档的)头部

内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用 style 标签在文档头部定义内部样式表

内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。 要使用内联样式,需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下,优先级如下:

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式


3.网页布局


网页布局 网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。


1.头部区域

头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo


2.菜单导航区域

菜单导航条包含了一些链接,可以引导用户浏览其他页面


3.内容区域

内容区域一般有三种形式:

1 列:一般用于移动端

2 列:一般用于平板设备

3 列:一般用于 PC 桌面设备


4.底部区域

底部区域在网页的最下方,一般包含版权信息和联系方式等。


相关文章
|
1天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
1天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
1天前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
7 2
|
1天前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
7 1
|
2月前
|
XML 前端开发 JavaScript
学习css
【5月更文挑战第25天】学习css
21 1
|
2月前
|
前端开发
CSS动画知识点学习
【4月更文挑战第2天】CSS动画知识点学习
34 3
|
2月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
104 1
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
88 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
23 0