CSS 简明教程（一）
|
|
1,339
|
0
|
前端
|
admin52

4167 字
|
30 分钟
本文最后更新于 135 天前，内容如有失效请评论区留言。

CSS 介绍

简介

CSS 表示层叠样式表，定义如何渲染 HTML 标签，设计网页显示效果。本节内容主要对 CSS 进行初步介绍，旨在理解 CSS 具体是什么，又是如何达到渲染文档，使网页看起来更美观。另外掌握一些 CSS 的基础概念，有助于后续内容的学习。

知识点

  • CSS 概述
  • CSS 语法
  • CSS 注释
  • CSS 数值与单位
  • CSS 样式类型

CSS 概述

层叠样式表（英语：Cascading Style Sheets，简写 CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。

注：定义来自维基百科。

直观的来说 CSS 就是我们网页的美容师，为我们的网页添加样式，美化网页，让网页更加美观。而我们前面所学到的 HTML 是写出我们网页的结构。

CSS 语法

CSS 的语法单元是样式，每个样式包含两部分内容：选择器和声明（或者称为规则）：

例子：

h1 {
  color: red;
}

注：上述例子中 h1 是选择器，color 是属性，red 是属性值。

pic

CSS 语法结构为：选择器{属性：值;属性：值;…}

  • 选择器：通常是你需要设置样式的 HTML 元素。
  • 属性：是你需要设置的样式属性，比如宽高，颜色，大小等。
  • 属性值：你需要设置的样式属性的具体值，比如宽高具体是多少 px，颜色具体是什么颜色。

CSS 数值与单位

你会在很多地方看到 CSS 单位中使用到数值。下面为大家介绍数值的最常用类别。

颜色值

在网页中的颜色设置是非常重要，有字体颜色，背景颜色，边框颜色等，设置颜色的方法也有很多：

1.英文命名颜色

p {
  color: pink;
}
/*给p标签的字体颜色设置为粉色*/

2.RGB 颜色

由 Red、Green、Blue 三种颜色的比例来配色，简称 RGB。

p {
  color: rgb(154, 32, 432);
}

每一项的值可以是 0~255 之间的整数，也可以是 0~100% 的百分数，如：

p {
  color: rgb(30%, 20%, 40%);
}

3.十六进制颜色

现在较为普遍的颜色使用法，其原理其实也是 RGB 设置，但是其每一项的值由 0~255 变成了十六进制 00-ff。

p {
  color: #00eeff;
}

长度值

长度单位总结了几种常用单位：px，em，%，这三种单位都是相对单位。

1.像素

px 像素（Pixel）。相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。

特点：

  • IE 无法调整那些使用 px 作为单位的字体大小。
  • 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。

2.em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em=14px。如果 font-size 为 18px，那么 1em=18px。

p {
  font-size: 14px;
  line-height: 2em;
}
/*在这里的line-height行高被设置成了14*2=28px*/

3.百分比

p {
  font-size: 14px;
  line-height: 120%;
}
/*行高为：14*1.2=16.8*/

CSS 样式类型

CSS 样式类型分为三种：内联式、内嵌式、外链式。

内联式(行内式)

通过标签的 style 属性来设置元素的样式，语法格式为：

<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>

例子：

<p style="color:blue;">哈喽，要保持微笑哦。</p>

优点：十分灵活，书写方便，权重高（后面会提到）。

缺点：只能操作某一个标签，没有实现样式和结构相分离。

内嵌式（内部样式表）

将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。语法格式为：

<head>
<style type="text/css">
    选择器 {属性1:属性值1; 属性2:属性值2; ...}
</style>
</head>

例子：

<style type="text/css">
    p{color:blue;}
</style>

优点：可以通过一条语句操作多个标签或类。

缺点：只能控制一个页面，没有彻底实现样式和结构分离。

外链式（外部样式表）

将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。语法格式为：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

注：href 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。rel 定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件。

例子：

首先我们要创建一个 css 文件，比如：main.css。然后在里面就能直接写 css 代码了。比如:

p {
  color: blue;
}

其次我们在 html 文件中引入这个 css 文件。

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

优点：一个单独的 CSS 文件，多个 HTML 文件可以引用一个 CSS 样式表文件。HTML 代码和 CSS 代码分离,要写什么就在哪个文件去找，修改方便。

注：这样写的前提是 HTML 页面与 CSS 文件在同一文件夹下。行内样式表一般写在标签头部，内嵌式样式表、外联式一般写在 <head></head> 标签内。为了编码规范，希望大家尽量使用外联式来写我们的 CSS 代码。

三种方法的优先级

我们学了三种 CSS 样式类型，那么如果对于同一个元素，我们同时使用了三种方法设置了 CSS 样式，这个时候，哪个方法是有效的呢 ？

我们可以记住一个优先级：

内联式 > 嵌入式 > 外链式

但是“嵌入式 > 外链式” 有一个前提：嵌入式 CSS 样式的位置一定在外链式后面。

挑战：制作谷歌图标

通过我们前面所学的 CSS 内容，来制作一个谷歌图标的小案例。

pic

源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta charset="utf-8" />
  </head>

  <body>
    <p style="font-size:60px">
      <span style="color:blue">G</span>
      <span style="color:red">o</span>
      <span style="color:orange">o</span>
      <span style="color:blue">g</span>
      <span style="color:green">l</span>
      <span style="color:red">e</span>
    </p>
  </body>
</html>

注：span 是一个行内标签，它能够不换行显示。

学习方法-通过浏览器进行 CSS 排错和调试代码

和 HTML 一样，在 CSS 中，如果选择器是无效的，那么它就不会选择任何东西，而整个规则也不会再做任何事情，浏览器只会继续执行下一个规则，而不是直接崩溃报错。

这使得就算我们的代码有错，但是依然能够运行显示给用户，只是显示的样式可能和我们预期的不一样。但是，当你想要去修改这个错误的时候，似乎会显得无从下手，因为我们甚至都不知道错在哪个地方，当代码量庞大的时候，一行一行去找显然是不可取的。

那么如何在浏览器中调试我们的 CSS 代码 或者查看别人网站的 CSS 代码呢？下面将为大家一一讲解。

  • 首先在浏览器中运行我们的前端代码，或者直接进去别人的网站，此处以实验楼为例。
  • 然后我们点击 F12 或者点击鼠标右键再点检查，进入调试模式。如下图所示：

pic

  • 最右边 styles 里面的代码就是我们的 CSS 代码了。
  • 如果是自己的项目，可以直接在 styles 里面修改我们的 CSS 代码，使得样式调到我们所需要的，最后再复制调试好的代码，到我们的本地。大大减少了我们本地改一次 CSS 代码，运行一次的时间，提高编程效率。
  • Elements 那一行最左边的
    pic
    这个图标用鼠标左键选中，直接点击页面，就能指定显示出那一块的样式。
  • styles 里面特别要注意有感叹号或者代码上面有一条线划掉的。这说明这些样式未成功生效。

总结

本节仅对 CSS 做了一些比较基础的介绍，主要包含以下知识点：

  • CSS 概述
  • CSS 语法
  • CSS 注释
  • CSS 数值与单位
  • CSS 样式类型

请大家务必认真理解相应概念，将 CSS 的基础知识扎实掌握。在后面的学习中，这些基础概念会起到很重要的作用。

CSS 基本样式

简介

本节主要介绍 CSS 基础样式，主要针对网页里面的文字、列表、链接等基本内容进行样式修改设置，使其呈现出不一样的效果。譬如更换颜色，改变大小等。

知识点

  • 文字排版
  • 样式化列表
  • 样式化链接
  • Web 字体

文字排版

字体

通过 font-family 属性设置字体种类，注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      body {
        font-family: 'yahei';
        /*微软雅黑*/
      }
    </style>
  </head>
  <body>
    <p>实验楼</p>
  </body>
</html>

下面再给大家介绍几种几乎所有系统都能够支持的几种字体：Arial，Courier New，Georgia，Times New Roman，Trebuchet MS，Verdana。

字体大小和颜色

字体大小通过 font-size 属性设置。字体的常用单位是：px，em。字体颜色通过 color 属性来设置。

<style>
  body {
    font-family: 'yahei';
    font-size: 40px;
    color: red;
  }
</style>
<body>
  <p>实验楼</p>
</body>

注意：这里只展示 <style>标签和 <body> 标签的内容，其他部分未改变的不做展示，接下来的例子都是这样，不再做提示。

字体样式-粗体

通过 font-weight 属性设置字体的粗细。常用的有 normal：字体正常，bold：文字加粗。

<style>
  body {
    font-size: 40px;
    color: red;
    font-weight: bold;
  }
</style>
<body>
  <p>实验楼</p>
</body>

字体样式-斜体

通过 font-style 属性设置文字格式。

  • normal: 将文本设置为普通字体 (将存在的斜体关闭)。
  • italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
  • oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
body {
  font-size: 40px;
  color: red;
  font-style: italic;
}

字体装饰

通过 text-decoration 属性设置或者取消字体上的文本装饰，我们一般会使用这个属性去掉链接上的默认下划线。可用值为：

  • none: 取消已经存在的任何文本装饰。
  • underline: 文本下划线。
  • overline: 文本上划线。
  • line-through: 穿过文本的线（删除线）。
body {
  font-size: 40px;
  color: red;
  font-style: italic;
  text-decoration: underline;
}

其他的属性可以自行动手尝试。

段落排版

缩进

段落缩进使用 text-indent 属性，中文文字中的段前习惯空两个文字的空白。

<style>
  body {
    font-size: 14px;
    color: red;
    font-style: italic;
    text-decoration: underline;
    text-indent: 2em;
  }
</style>
<body>
  <p>实验楼是一个很好的学习网站</p>
</body>

行高

可以使用 line-height 属性设置段落行高。

<style>
  body {
    font-size: 14px;
    color: red;
  }
</style>
<body>
  <p>实验楼是一个很好的学习网站</p>
  <p style="line-height:30px">实验楼是一个很好的学习网站</p>
</body>

当两个段落一个设置行高，一个未设置行高时的效果：

pic

大家可以不设置行高看看效果。

中文字间距、字母间距

可以使用 letter-spacing 属性设置文字间距或者字母间距。

  <style>
        body{
            font-size:14px;
            color:red;
            letter-spacing:2em;
        }
    </style>
  </head>
  <body>
       <p>实验楼是一个很好的学习网站</p>
  </body>

对齐

如果想为块状元素中的文本、图片设置样式居中，可以使用text-align 属性。

  <style>
        body{
            font-size:14px;
            color:red;
            text-align:center;
        }
    </style>
  </head>
  <body>
      <p>实验楼是一个很好的学习网站</p>
  </body>

同样你也可以使用 text-align:left 设置左对齐，使用 text-align:right 设置右对齐。

样式化列表

List 列表大体上和其他文本一样，这里给大家讲解一些特殊用在列表上的 CSS 属性。

列表特定样式

  • 符号样式：用 list-style-type 设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。常见的取值有：
    • disc 无序列表的默认值，实心圆。
    • circle 空心圆。
    • square 实心方块。
    • decimal 有序列表的默认值阿拉伯数字。
    • lower-alpha 小写英文字母。
    • upper-alpha 大写英文字母。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      ul {
        list-style-type: circle;
      }
      ol {
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>

    <ol>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ol>
  </body>
</html>

效果为：

pic

  • 项目符号位置：通过 list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。默认值为 outside，这使项目符号位于列表项之外。如果值设置为 inside，项目条目则位于行内。我们把前面的例子设置为 inside 来看看效果,为了便于查看效果，我们为 ul 和 li 设置背景色。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      ul {
        list-style-type: circle;
        list-style-position: inside;
        background-color: red;
      }

      ol {
        list-style-type: lower-alpha;
      }

      li {
        background-color: gold;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>

    <ol>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ol>
  </body>
</html>

效果为：

pic

样式化链接

选择器中有以下几种伪类 :link、 :hover、 :active、 :visited， 我们也可以为伪类设置样式。

首先我们写一个链接，来看看它默认的一些样式：

<a href="#">我是链接</a>

效果图：

pic

我们发现以下特点：

  • 链接具有下划线。
  • 未访问过的 (Unvisited) 的链接是蓝色的。
  • 访问过的 (Visited) 的链接是紫色的。
  • 悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
  • 激活 (Active) 链接的时候会变成红色 (用鼠标左键点击链接)。

知道链接的默认样式后，我们同样可以使用 color 属性改变链接不同状态的颜色，使用 text-decoration 属性去掉链接默认的下划线。一般来说对于链接的样式，我们掌握这两个就够了。如果你有兴趣把自己的链接添加一些独特的样式，你可以自己尝试一下哟。

<style>
  a:hover {
    color: red;
    text-decoration: none;
    /*鼠标经过，字体颜色变成红色，并且去掉下划线*/
  }
</style>
<body>
  <a href="https://www.lanqiao.cn/">实验楼</a>
</body>

Web 字体

对于字体的使用来说，有时候我们可能并不仅仅满足于使用自带的字体。而通过 Web 字体，我们可以使用更多的不同的文本样式。

首先我们通过 @font-face 指定要下载的字体文件。

@font-face {
  font-family: 'Bitstream Vera Serif Bold';
  src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
}

然后使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你需要的地方，比如说：

body {
  font-family: 'Bitstream Vera Serif Bold', serif;
}

完整的代码为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      @font-face {
        font-family: 'Bitstream Vera Serif Bold';
        src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
      }

      body {
        font-family: 'Bitstream Vera Serif Bold', serif;
      }
    </style>
  </head>

  <body>
    <div>我爱学习，学习使我快乐！</div>
  </body>
</html>

使用 Web 字体后在浏览器中运行的效果图为：

pic

再来看看没有使用之前是什么样子的：

pic

注：现在网上有很多免费可以使用的 web 字体，大家可以自行百度搜索下载使用在自己的网页当中。比如：Google Web Fonts。

总结

本节内容主要对一些基础样式做介绍，主要包含以下知识内容：

  • 文字排版
  • 样式化列表
  • 样式化链接
  • Web 字体

针对本节内容的示例，请务必手动完成代码并运行结果查看效果。加深对 CSS 基础样式的理解。

前端
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇