【HTML+CSS】2. CSS基础整理

最新推荐文章于 2020-10-27 14:01:54 发布

M＆Q

最新推荐文章于 2020-10-27 14:01:54 发布

阅读量159

点赞数 1

分类专栏：前端基础文章标签： html css web

本文链接：https://blog.csdn.net/qq_45427038/article/details/105473147

版权

前端基础专栏收录该内容

16 篇文章 1 订阅

订阅专栏

CSS 指层叠样式表 (Cascading Style Sheets)，主要用于控制html页面的外观样式，实现内容与表现分离。通俗一点说，css为HTML提供了“样式库”。

1. CSS语法

CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明。如下所示：

/*  CSS语法  */
 选择器{
            属性名：属性值;
            属性名：属性值;
        }
/* 例子 */
body {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: #777;
  background: #ececec;
}

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成，属性（property）是您希望设置的样式属性（style attribute）。
每个属性有一个值。属性和值被冒号分开。
多个属性值之间通过分号间隔。

上面的例子中也用到了注释，在CSS中，注释以 /* 开始, 以 */ 结束。

2. CSS引用方式

css的引用方式有三种：内联样式、内部样式、外部样式。

2.1 内联样式表

CSS的内联样式表，也被称为行内样式表，就是把css代码直接写在HTML标签中，通过标签的style属性定义。比如：

<h1 style="color: red; text-align: right;"> 这是使用内联样式的标题 </h1>
<p style="background-color: #999900"> 这是使用内联样式的段落 </p>

上面的代码，就通过在HTML标签中加入内联样式表的方式设定了标题和段落的格式。在所有的样式设置中，内联样式表的优先级最高，可以快速更改当前样式，不必考虑以前编写的样式冲突问题。

使用内联样式表在查看时非常直观，但是对于同样的样式设置，每一个标签的设置都需要说明style属性，标签和样式糅杂在一起，增加了代码冗余，修改的时候也需要逐一对比修改，后期维护成本高。

2.2 内部样式表

CSS的内部样式表，也称为内嵌式样式表，在HTML文档中的< head >中使用< style >标签标记，它的特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
    text-align: left;  /*文本左对齐*/
    font-size: 18px;  /*字体大小 18 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行缩进2个文字大小空间*/
    width: 500px;  /*段落宽度 500 像素*/
    margin: 0 auto;  /*浏览器下居中*/
    margin-bottom: 20px;  /*段落下边距 20 像素*/
}
</style>
</head>
<body>
    <p>“百度”这一公司名称便来自宋词“众里寻他千百度”。（百度公司会议室名为青玉案，即是这首词的词牌）。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术”非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象。在这之后，由于在搜索引擎中，大都有动物形象来形象，如 SOHU 的狐，如 GOOGLE 的狗，而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。</p>
    <p>在百度那次更换 LOGO 的计划中，百度给出的 3 个新 LOGO 设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。</p>
    <p>此次更换 LOGO 的行动共进行了 3 轮投票，直到第 2 轮投票结束，新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把 3 个新 LOGO 方案彻底否决。</p>
</body>
</html>

上面的代码在<head>标签内定义了段落的样式，包括文本对齐、字号、行高、缩进等，在<body>内使用段落<p>时，不需要再通过 style=" " 的方式设置样式，节省了较多的篇幅，修改的时候也比较方便。

这里有一点需要注意，style不仅可以定义CSS样式，还可以定义JavaScript脚本，所以使用内部样式表时要注意声明<style type="text/css">。

style 中还有一个比较特殊的属性 title，使用 title 可以为不同的样式设置一个标题，浏览者就可以根据标题选择不同的样式达到浏览器中切换的效果（“查看”-“页面样式"），但是有些浏览器可能不支持这个功能，默认情况下显示的是第一次出现的样式。

2.3 外部样式表

外部样式表也叫链接式样式表，它是目前应用最多的方式，也是非常使用的方式。它把css代码写一个单独的外部文件中（扩展名为“.css”），通过 HTML 的 <link> 标签，将外部样式表文件链接到 HTML 文档中。这种方法将 HTML 文档和 CSS 文件完全分离，也就是结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

假设我们建立一个a.css文档，代码如下：

/*选择符{ 属性：属性值 ；属性：属性值;}*/
a{color:#FF0000 ;}

#img1{width:800px;}  /*id选择器*/

.img2{ width:800px;} /*类选择器*/

接下来我们就可以把这个CSS样式表引入对应的HTML文件中：

<head>

<link href="a.css" type="text/css" rel="stylesheet">

</head>

<body>
<a href="#">超链接</a>

<img src="xx.jpg" id="img1">

<img src="xxx.jpg" class="img2">

</body>

<link>的使用规则如下，包含href, type, rel三个基本属性，其中href 是必须设置属性。。一个HTML文档可以同时引入多个样式表文件，同一个样式表文件也可以被多个HTML文件引入。

链接式样式使 CSS 代码和 HTML 代码完全分离，达到结构与样式的分开，使 HTML 代码专门构建页面结构，而美化工作由 CSS 完成，这样做的好处有：

同一个CSS 文件可以放在不同的 HTML 文件中，使网站所有页面样式统一；
将 CSS 代码放入一个 CSS 文件中便于管理、减少代码以及维护时间；
当修改 CSS 文件时，所有应用此 CSS 文件的 HTML 文件都将更新，而不必从服务器上将所有的页面取回再修改完毕后上传。

还可以用@import 命令导入样式表，比如：

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    @import url(a.css);
    @import url(b.css);
</style>
</head>

区别如下：

link 属于 HTML 标签，而 @import 是 CSS 提供的。
页面被加载时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载。
@import 只在 IE 5 以上才能识别，而 link 是 HTML 标签，无兼容问题。
link 方式的样式的权重高于 @import 权重。

感觉是比较推荐<link>导入的~

这篇博客主要介绍了一些基础的CSS知识，关于外部样式表，还有许多内容，下一篇文章继续讲解吧。

M＆Q

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML+CSS】2. CSS基础整理

CSS 指层叠样式表 (CascadingStyleSheets)是为了解决内容与表现分离的问题CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。注释是用来解释...
复制链接

扫一扫