掌握前端基础:CSS入门指南

发表时间: 2020-07-27 18:48

Introduction

CSS 是指层叠样式表(Cascading Style Sheets)。

CSS 可以定义 HTML 元素如何显示。

CSS 大大提高工作效率,可以将 HTML 代码与样式代码分离,让原本 HTML 不能描述的效果,通过 CSS 描述出来。

Syntax

CSS 语法规则由两个主要的部分构成:选择器,以及一条或多条声明

选择器 { 属性:值; 属性:值 } -- 在大括号中可以有多个声明,声明是由属性与值组成,它们之间使用 : 分开,而多个声明之间,使用的是 ; 来分开

选择器的主要作用就是用于确定当前的 CSS 修饰的是哪一个元素

关于 CSS 中书写的值的注意事项:

  1. CSS 不区分大小写,但是对于 id 与 class 的值是区分的。
  2. 对于数组,可以使用具体数值,也可以使用百分比,它默认的单位是 px。CSS 也可以使用其它的单位 mm,cm 等。
  3. 如果属性值是由多个单词组成,那么需要加上引号。


Integrate CSS into HTML

内联样式

在 HTML 标签上通过 style 属性来引用 CSS 代码。简单方便,但只能对一个标签进行修饰。

内部样式表

在 <head> 标签内通过 <style> 标签来声明 CSS。可以通过多个标签进行统一的样式设置,但只能在本页面上进行修饰。

外部样式表

引用外部 CSS 样式有两种方案:

  1. 在 HTML 页面中 head 标签内使用 <link> 标签。
  2. 在 HTML 页面中 style 标签内使用 @import 导入。

对比:

  1. @import 方式导入会先加载 html,然后才导入 css 样式,如果网络条件不好,就会先看到没有修饰的页面,然后才看到修饰后的页面;如果使用 link 方式,它会先加载样式表,也就是说,看到的直接就是修饰的页面。
  2. @import 方式导入 css 样式是不支持 javascript 的动态修改,而 link 支持。

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页 的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外 部样式表。一般优先级如下:

内联样式 Inline style > 内部样式 Internal style sheet > 外部样式 External style sheet > 浏览器默认样式


CSS 的使用

CSS 选择器

ID 选择器

只能选择一个元素,使用 "#" 引入,引用的是元素的 id 属性值。

类选择器

类选择器在使用时使用 "." 来描述,它描述的是元素上的 class 属性值。

元素(标签)选择器

可以对页面上相同的标签进行统一的设置,它描述的就是标签的名称。

选择器分组

让多个选择器可以同时使用同样的一段 css,注意选择器之间使用逗号分开。

派生选择器

在 CSS1 中, 通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器。

派生选择器允许根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器可以使 HTML 代码变得更加整洁。

CSS 伪类

CSS 伪类可对 CSS 的选择器添加一些特殊效果

锚伪类:

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000}     /* 未访问的链接 */a:visited {color: #00FF00}  /* 已访问的链接 */a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */a:active {color: #0000FF}   /* 选定的链接 */

:first-child 伪类:

可以使用 :first-child 伪类来选择元素的第一个子元素 。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>CSS 伪类</title>        <style>            p:first-child {font-weight: bold; color:blue}            li:first-child {text-transform:uppercase; color:red}        </style>    </head>    <body>          <div>            <p>我是第一个</p>            <ol>                <li>I'm the first;</li>                <li>I'm the second;</li>                <li>I'm the third;</li>            </ol>            <p>我是第二个</p>        </div>    </body></html>


CSS 基本属性

字体属性

CSS 字体属性定义字体,加粗,大小,文字样式

在CSS中,有两种类型的字体系列名称:

  • 通用字体系列 - 拥有相似外观的字体系统组合,如 Serif 或 Monospace。Serif: 衬线体(即“白体”),中国大陆地区和港台的印刷界称之为 宋体;Monospace: 等宽字体 (微软雅黑)。
  • 特定字体系列 - 一个特定的字体系列,如 Times 或 Courier( 打字机上的一种字体 )。

font-family 属性设置文本的字体系列。多个字体系列是用一个逗号分隔指明,如:

p{font-family:"Times New Roman", Times, serif;}

font-style 属性最常用于规定斜体文本。如:

p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}

font-weight 属性设置文本的粗细。如:

p.thick {font-weight:bold;} /* bold 关键字可以将文本设置为粗体 */

font-size 属性设置文本的大小。

p {font-size:14px;}p {font-size:0.875em;} /* 14px/16=0.875em */body {font-size:100%;}p {font-size:0.875em;}

文本属性

CSS 文本属性可定义文本的外观。通过文本属性可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

背景属性

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。

尺寸属性

CSS 尺寸属性允许控制元素的高度和宽度。同样,还允许增加行间距。

列表属性

作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

浮动

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。

元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

边框

CSS 边框属性允许指定一个元素边框的样式和颜色。

轮廓属性

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

轮廓和边框的区别:边框 (border) 可以是围绕元素内容和内边距的一条或多条线;轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

盒子模型

CSS盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边距,边框,填充,和 实际内容。所有 HTML 元素可以看作盒子,在 CSS 中,box model 这一术语是用来设计和布局时使用。

盒子模型允许在其它元素和周围元素边框之间的空间放置元素。

CSS 定位

CSS 定位(Positioning)属性允许你对元素进行定位。

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对 于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

分类属性

CSS 分类属性允许控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常 位置来定位元素,使用绝对值来定位元素,以及元素的可见度。

想了解更多,欢迎关注我的微信公众号:Renda_Zhang