css入门

最新推荐文章于 2024-08-31 21:49:18 发布

落魄三无青年

最新推荐文章于 2024-08-31 21:49:18 发布

阅读量290

点赞数

分类专栏：前端学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_45858192/article/details/109155424

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS入门

什么是CSS

css全称为Cascading Style Sheets，翻译为层叠样式表。
样式定义如何显示HTML元素，样式通常存储在样式表中。css是能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML表现而言，css能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS发展历程

早在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计 CSS。

哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议，1995 年他与波斯一起再次展示这个建议。当时 W3C 组织刚刚创建，W3C 对 CSS 的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996 年底，CSS 已经完成。1996 年 12 月 CSS 要求的第一版本被出版。

1997 年初，W3C 内部组织了专门管理 CSS 的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是 1998 年 5 月出版的第二版要求。

目前，CSS 的最新版本已经更新到了第三版。CSS3 融入在了 HTML5 新版本的特性里面。

怎么使用CSS

CSS样式分为三种：内联样式，内嵌样式表，外联样式表。
内联样式

<div style="color: lightcoral;">这是测试内容.</div>

缺点：只能对当前元素有效，CSS代码出现冗余。
内嵌样式表

<style type="text/css">
	p {
		color: lightcoral;
		font-size: 24px;
	}
</style>

通过style元素进行设置，旧版本需要设置type属性值为"text/css"。
优点：可以通过css选择器定位HTML页面中一个或一类元素。
缺点：将css代码内嵌到HTML页面中，只能对当前页面有效。

编码的风格不符合编码原则中的低耦合
导致css代码可能冗余
外联样式表

<link rel="stylesheet" href="style/demo.css">

使

用外联样式前先创建一个css文件，用来存储css样式内容。
在HTML页面中通过<link>元素引入外部指定的css文件。

<link>元素：

作用：用来引入HTML页面外部资源。
属性：
- rel属性：用来设置外部资源与当前HTML页面的关系。
- href属性：用来设置引入外部资源的路径。

相对路径：目标文件相对于当前文件的路径。（推荐使用）
绝对历经：目标文件相对于根目录的路径。

优点：相对于内嵌样式表和内联样式表。

将css样式与HTML页面进行分离（低耦合）
不会出现内嵌样式表或内联样式产生的代码冗余。
缺点：可能会对HTML页面的加载造成负担，导致性能下降。

使用css样式
在一个HTML页面中同时使用内联样式，内嵌样式表和外联样式表：

内联样式的优先级别是最高的。
内嵌样式表和外联样式表与编写顺序有关：最后的是优先级别更高。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优先级</title>
  <link rel="stylesheet" href="style.css">
  <style>
    p{
      color: aqua;
    }
  </style>
</head>
<body>
  <p style="color: aquamarine;">19级启嘉班</p>
</body>
</html>

style.css文件内容。

p {
  color: blue;
}

在这里插入图片描述
语法结构

选择器{
		属性名称：属性值；
		属性名称：属性值；
		···
}

语法特点：

css声明总是以键值对（key\value）形式存在。
css声明总是以分号(;)结束。
声明组以大括号({})括起来。
为了让css可读性更强，每行只描述一个属性。
CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。css注释以/*开始以*/结束。

<style>
    /* 代码注释 */
    p{
      /* 代码注释 */
      color: aqua;
    }
  </style>

落魄三无青年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门

CSS入门什么是CSScss全称为Cascading Style Sheets，翻译为层叠样式表。样式定义如何显示HTML元素，样式通常存储在样式表中。css是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML表现而言，css能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS发展历程早在 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯
复制链接

扫一扫

专栏目录