当前位置:网站首页 > HTML与CSS基础 > 正文

HTML/CSS 备忘录 - 07. CSS 基础

一、什么是 CSS

层叠样式表(Cascading Style Sheets,缩写为 CSS)是一种样式表语言,用来描述 HTML 或 XML 等文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

二、插入CSS的三种方式

1. 外部样式表

写在单独的 .css 文件中,随后在 HTML 文件中引入使用。

/* main.css */ h1{ color: red; font-size: 40px; }

在 HTML 文件中引入 .css 文件:

<link rel="stylesheet" href="./main.css" />

2. 内部样式表

写在 html 页面内部,将所有的 CSS 代码提取出来,单独放在 <style> 标签中。<style> 标签理论上可以放在 HTML 文档的任何地方,但一般都放在 <head> 标签中。

<style> h1 { color: red; font-size: 40px; } </style>

3. 内联样式表

写在标签的 style 属性中,只能控制当前标签的样式,对其他标签无效,不推荐大量使用。

<h1 style="color:red;font-size:60px;"> 你好 CSS </h1>

4. 三种方式的优先级

优先级规则:内联样式 > 内部样式 = 外部样式

  • 内部样式和外部样式的优先级相同,且后面的会覆盖前面的。
  • 同一个样式表中,优先级和编写顺序有关,且后面的会覆盖前面的。

三、CSS 语法

  • 选择器(Selector):它选择了一个或多个需要添加样式的元素(在这个例子中就是 <p> 元素)。要给不同元素添加样式,只需要更改选择器。
  • 声明(Declaration):一个单独的规则,如 color:red; 用来指定添加样式元素的属性。
  • 属性(Properties):改变元素样式的途径(本例中 color 就是 <p> 元素的属性)。
  • 属性的值(Property value):设置指定属性的外观。

除了选择器部分,每个规则集都应该包含在成对的大括号里({})。在每个声明里要用冒号(:)将属性与属性值分隔开。在每个规则集里要用分号(;)将各个声明分隔开。

/* 展开风格,开发时推荐,便于维护和调试 */ h1 { color: red; font-size: 40px; } /* 紧凑风格,项目上线时推荐,可减小文件体积。 */ p {color:red;text-align:center;}

四、注释

CSS 注释以 /* 开始, 以 */ 结束, 实例如下:

/* 这是个注释 */ p { text-align:center; /* 这是另一个注释 */ color:black; font-family:arial; }

五、CSS3 的私有前缀

W3C 标准所提出的某个 CSS 特性,在被浏览器正式支持之前,浏览器厂商会根据浏览器的内核,使用私有前缀来测试该 CSS 特性,在浏览器正式支持该 CSS 特性后,就不需要私有前缀了。

  • Chrome浏览器: -webkit-
  • Safari浏览器: -webkit-
  • Firefox浏览器: -moz-
  • Edge 浏览器: -webkit-
  • 旧 Opera 浏览器: -o-
  • 旧 IE 浏览器: -ms-
-webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;

CSS3 兼容性查询网站:https://caniuse.com/

到此这篇HTML/CSS 备忘录 - 07. CSS 基础的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • 前端入门——css 样式表简介2024-10-31 00:05:01
  • html5+css网页设计基础教程_如何用css设计网页2024-10-31 00:05:01
  • Javaweb知识 day08 HTML表单&CSS基础2024-10-31 00:05:01
  • HTML+CSS零基础教学:每天学习几分钟,轻松掌握HTML(一)2024-10-31 00:05:01
  • 零基础web前端_web前端要学哪些东西2024-10-31 00:05:01
  • 前端基础知识-HTML和css3(css完结篇)2024-10-31 00:05:01
  • 零基础必看的前端HTML+CSS教程2024-10-31 00:05:01
  • HTML+CSS零基础教学:每天学习几分钟,轻松掌握HTML(一)2024-10-31 00:05:01
  • Javaweb知识 day08 HTML表单&CSS基础2024-10-31 00:05:01
  • 网页设计——CSS基础2024-10-31 00:05:01
  • 全屏图片