CSS概述说明

原创已于 2024-11-04 18:35:28 修改 · 749 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-10-26 17:33:59 首次发布

wed前端专栏收录该内容

8 篇文章

订阅专栏

CSS学习记录分享

CSS编写规则
- 命名规则
- 代码注释
网页中引用CSS的方法

如果说把HTML比作人的骨架，那CSS就是修饰它的外表。HTML负责创建网页的结构，它使用标签来标记不同的内容，形成网页的骨架。而CSS则负责控制HTML元素的表现形式，它定义了网页的外观和风格，相当于为网页的结构“穿上漂亮衣服”。

CSS编写规则

命名规则

目录结构命名规则
存放CSS样式问价的目录一般命名为style或css。
样式文件的命名规则
在项目初期，会把不同类别的样式放于不同的CSS文件，目的是方便编写和调试CSS；
在项目后期，从网站性能上的考虑会将不同CSS文件整合到一个CSS文件，这个文件一般命名为style.css或css.css。
选择符的命名规则
所有选择符必须由小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。
设计者要用有意义的单词或缩写组合来命名选择符，做到“见其名知其意”，这样就节省了查找样式的时间。样式名必须能够表示样式的大概含义（禁止出现如 Div1、Div2、Stylel 等命名），可以参考下图的样式命名。

命名参考

代码注释

为代码添加注释是一种良好的编程习惯。注释可以增强CSS文件的可读性，使得后期维护更加便利。CSS中的注释格式以“/”开始，以“/”结尾。注释可以是单行，也可以是多行，并且可以出现在CSS代码的任何地方。
快捷键为Ctrl+/。

网页中引用CSS的方法

定义行内式

行内样式是各种引用CSS方式中最直接的一种，也叫内联样式。行内样式就是通过直接设置各个元素的style属性，从而达到设置样式的目的。这样的设置方式，使得各个元素都有自己独立的样式，但是回使整个页面变得更加臃肿。及时两个元素的样式是一模一样的，用户也需要在每个元素中单独书写。
元素的style属性值可以包含任何CSS样式声明。用这种方法可以简单地对某个标签单独定义样式表。这种样式表只对所定义的标签起作用，并不对整个页面起作用。
行内样式的格式为：<标签 style="属性:属性值;属性:属性值;..."
需要说明的是，由于行内样式将表现和内容混在一起，并不符合Web标准，所以慎用这种方法。当样式仅需要在一个元素上应用一次是可以使用行内样式。

定义内部样式表

内部样式表是指样式表的定义处于HTML文件一个单独的区域，与HTML的内容和结构标签分离开来，从而实现对整个页面范围的内容、结构和表现进行统一的控制与管理。与行内样式只能对所在标签进行样式设置不同，内部样式表处于页面的<head>与</head>标签之间。单个页面需要特定应用样式时，最好使用内部样式表。
内部样式表格式为：

<style type="text/css">
<!--
选择符1{属性:属性值;属性:属性值...}
选择符2{属性:属性值;属性:属性值...}     /*注释内容*/
...
选择符n{属性:属性值;属性:属性值...}
-->
</style>

<stylee>...</style>标签对用来说明索要定义的样式。type属性指定style使用CSS的语法来定义。当然，也可以只当使用像JavaScript之类的语法来定义。属性与属性值之间用冒号“：”隔开，定义之间用分号“；”隔开。

链入外部样式表

外部样式表通过在某个HTML页面中添加链接的方式生效。同一个外部样式表可以被多个网页甚至是整个网站的所有网页所采用，大大提高了样式应用和维护的效率，这就是它最大的有点。如果说内部样式表在总体上定义了一个网页的显示方式，那么外部样式表可以说在总体上定义了一个网站的显示方式。
外部样式表把声明的样式放在独立的样式文件中，当页面需要使用样式时，通过<link>标签链接外部样式表文件即可。使用外部样式表，改变一个文件就能改变整个站点的外观。

用`<link>`标签链接样式表文件

<link>标签必须放在页面的<head>...</head>标签对内。

<head>
...
<link rel="stylesheet" href="外部样式表文件名.CSS" type="text/css">
...
</head>

<link>标签标识浏览器从"外部样式表文件名.CSS"文件中以文档格式读出定义的样式表
rel="stylesheet"属性规定了当前文档与被链接文档之间的关系，即定义在网页中使用外部的样式表
type="text/css"属性定义文件的类型为样式表文件
样式表文件的格式为：

选择符1{属性:属性值;属性:属性值...}
选择符2{属性:属性值;属性:属性值...}     /*注释内容*/
...
选择符n{属性:属性值;属性:属性值...}

导入外部样式表

都如外部样式表是指在内部样式表的<style>标签里导入一个外部样式表。当浏览器读取HTML文件时，回复制一份样式表到这个HTML文件中，其格式为

<style type="text/css">
<!--
@import url("外部样式表的文件名1.css");
@import url("外部样式表的文件名1.css");
其他样式表的声明
-->
</style>