CSS基础教程：入门与常用属性解析

94 浏览量更新于2024-09-03 收藏 94KB PDF 举报

"CSS样式的基础学习总结" 在深入探讨CSS样式之前，我们首先理解CSS的基本概念。CSS，全称级联样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要功能是分离网页的内容（HTML或XML）和表现（样式），使网页的设计更加灵活和易于维护。 CSS3是目前最新的版本，它引入了许多新的特性，如选择器增强、多列布局、过渡效果、动画、边框和背景的改进，以及媒体查询（Media Queries），这使得开发者能够实现响应式设计，适应不同设备和屏幕尺寸。 CSS的使用主要有三种方式： 1. **外部样式表**：这是最常见的使用方式，适用于整个网站或多个页面共享一套样式。样式定义在一个单独的.css文件中，然后通过`<link>`标签链接到HTML页面。这样可以方便地管理和更新样式，同时保持页面间的样式一致性。 ```html <link href="路径/文件名.css" rel="stylesheet" type="text/css"> ``` 2. **内页样式**或**内部样式表**：这种方式将CSS样式写在HTML页面的`<head>`标签内，通常用`<style>`标签包裹。适用于那些只在特定页面中使用的样式，或者需要覆盖外部样式表中某些规则的情况。 ```html <head> <style> /* 内部样式表内容 */ </style> </head> ``` 3. **行内样式**或**内嵌样式**：直接在HTML元素的`style`属性中编写样式，适用于个别元素的特例处理。这种方式虽然方便快捷，但不推荐大量使用，因为它会使HTML代码变得冗长且难以维护。 ```html <p style="color: red;">这是红色文字</p> ``` CSS提供了丰富的选择器，如标签选择器、类选择器、ID选择器、伪类和属性选择器等，用于精准定位和控制HTML元素的样式。此外，还可以通过继承、层叠和优先级规则来管理样式冲突。在布局方面，CSS提供了盒模型（Box Model）、浮动（Float）、定位（Positioning）等机制来控制元素的布局。CSS3还引入了Flexbox（弹性盒子布局）和Grid Layout（网格布局），这些现代布局模式使得创建复杂、响应式的布局变得更加简单。对于初学者来说，理解并熟练掌握CSS的基本概念、选择器、布局技术以及样式应用方法是非常重要的。随着经验的积累，可以逐步探索更高级的CSS3特性，如阴影、渐变、圆角、透明度等，以及如何利用媒体查询实现响应式设计，从而打造出更具吸引力和用户体验的网页。

CSS样式的基础学习总结样式的基础学习总结

进行css布局的同时，没有足够的基础知识是不可能的，本文为初学者整理了一些，经常使用的css属性，感兴

趣的朋友可以参考下，或许有所帮助

一．一．CSS基本介绍基本介绍

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计

的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式

表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充

精确指定网页元素位置，外观以及创建特殊效果的能力。

CSS是英语CascadingStyle Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS

能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能

力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或

者优化写法，针对各类人群，有较强的易读性。

二．二．CSS的使用方法的使用方法

有三种方法可以在站点网页上使用样式表：

外部样式：将网页链接到外部样式表。

内页样式：在网页上创建嵌入的样式表。

行内样式：应用内嵌样式到各个网页元素。

每一种方法均有其优缺点：

当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们

链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映

到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如牛腩新闻发布系统中的公共样式

Common.css。然后在需要此样式的页面中将其链接进来，如：

当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 <HEAD>标记符

内。嵌入的样式表中的样式只能在同一网页上使用。如：

body {background:grey;}

</style>

使用内嵌样式以应用级联样式表属性到网页元素上。如：

<pstyle="@importurl('style3.css');">CSS document</p>

如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

要在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链

接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。

该“样式” 框列出标准 HTML 标记符，例如标题

1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素，请选定该样式然后单击

“样式” 框中的样式或选择器。

在 Microsoft FrontPage 2000中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令（在 “格式”

菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性（例如∶ <pstyle="border-

style: solid">）。然而某些属性的应用需要使用 CSS，其他则需要使用 HTML 。如果人们只想使用 CSS 应用内嵌样式，可使

用 “样式”按钮（位于网页元素的 “属性” 对话框里）应用类或 ID 选择器或嵌入式样式。

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38691055

粉丝: 10
资源: 930

CSS基础教程：入门与常用属性解析

新手学习DIV+CSS难点之经验总结

CSS学习笔记

Html与Css学习笔记以及经验总结

CSS与HTML基础练习

用css写一个登录注册页面

html+css+javascript网页制作案例教程

写一个学习完HTML和CSS以及JavaScript的学习感受三百字

html零基础入门教程

html+css兴趣爱好代码

web前端期末大作业 html css javascript网页设计实例 企业网站制作

最新资源

web前端期末大作业 html css javascript网页设计实例企业网站制作