CSS简介_css是开放网络的核心语言-CSDN博客

本文链接：https://blog.csdn.net/qq_53632966/article/details/128190329

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一，由 W3C 规范实现跨浏览器的标准化。CSS节省了大量的工作。样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

现在的互联网前端三层：HTML超文本标记语言从语义的角度描述页面结构。CSS层叠式样式表从审美的角度负责页面样式。JSJavaScript从交互的角度描述页面行为。

1.1 什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个

1.2 CSS语法

CSS 实例CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

color:red;

text-align:center;

}

CSS声明总是以分号(;)结束，声明总以大括号({})括起来,为了让CSS可读性更强，你可以每行只描述一个属性。

注意：最后一条申明后面的分号(;) 可以省略不写。申明和申明直接的分号(;) 不能省略。

css一些常见属性:

字符（文字）颜色：

color:red;color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制。

sublime中的快捷键是c，然后tab

字号大小：

font-size:40px;font就是“字体”，size就是“尺寸”。px是“像素”。单位必须加，不加不行。sublime中的快捷键是fos，然后tab

背景颜色：

background-color: blue;background就是“背景”。sublime中的快捷键是bgc，然后tab

加粗：

font-weight: bold;font是“字体” weight是“重量”的意思，bold粗。sublime中的快捷键是fwb，然后tab

不加粗：

font-weight: normal;normal就是正常的意思sublime中的快捷键是fwn，然后tab

斜体：

font-style: italic;italic就是“斜体”sublime中的快捷键是fsi，然后tab

不斜体：

font-style: normal;sublime中的快捷键是fsn，然后tab

下划线：

text-decoration: underline;decoration就是“装饰”的意思。sublime中的快捷键是tdu，然后tab

没有下划线：

text-decoration:none;sublime中的快捷键是tdn，然后tab

例如：

<style>

h1{

color: aqua;

font-size: 20px;

background-color: red;

font-weight: normal;

}

font-size: 30px;

font-weight: bold;

font-style: italic;

text-decoration: underline;

}

font-style: normal;

}

em{

font-style: normal;

}

text-decoration: none;

}

</style>

<body>

<h1>这是我的第一个css文件</h1>

<p>这是一个段落</p>

<i>我是斜体标签</i>

<em>我是斜体标签</em>

<u>我是下划线标签</u>

</body>

1.3 CSS样式的引入方式

引入方式有4种，分别是：

（1）内嵌方式写样式，写在style标签中。

内嵌样式特点：只能修饰当前这个html文件。也就是说它里面的样式规则，不能作用到其他页面的标签上。

<style>

color: aqua;

}

</style>

<p>我是段落标签</p>

（2）行内样式，写在标签中的style属性上的。

行内样式的特点：它里面的样式规则，只能修饰当前你指定的这个标签

（3）外部样式表，通过定义保存在外部.css文件中。外部样式表文件的后缀名是.css。文件名，必须是以字母开头。

注意：文件名，不能以数字开头。不能以汉字开头。(如果你这样写了，它不会报错，但是我们不推荐你在实际项目中这样操作。)

外部样式表，需要使用link标签引入到指定的html网页文件中。

<h1>我是index3文件</h1>

h1{

font-size: 50px;

color: orange;

}

（4）导入样式

a.首先创建一个main.css文件，写上相关的css样式规则，例如：

h1{

background-color: aqua;

}

b.然后再base.css文件中，把main.css样式，使用@import 导入到 base.css样式表中。

@import './main.css';

h1{

font-size: 50px;

color: orange;

}