CSS 基础知识CSS 基础知识

CSS 通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

什么是 CSS

CSS 通常称为 CSS 样式表或层叠样式表(级联样式表),主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS 以 HTML 为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

CSS 语法

基础语法

CSS 规则由两个主要部分构成:选择器以及一条或多条声明。每条声明由一个属性和一个值组成。属性(property)是设置的样式属性,每个属性有一个值,属性和值被冒号分开。

selector {
  property: value;
}

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

// h1是选择器,color 和 font-size 是属性,red 和 14px是值。
h1 {
  color: red;
  font-size: 14px;
}
  • 如果定义不止一个声明则需要用分号将每个声明分开,例如:p { text-align: center; color: red }
  • 如果值为若干单词,则要给值加引号,例如:p { font-family: "sans serif"; }

高级语法

选择器的分组

h1,
h2,
h3,
h4,
h5,
h6 {
  color: green;
}

继承及其问题:根据 CSS,子元素从父元素继承属性。

body {
  font-family: Verdana, sans-serif;
}

创建 CSS

CSS 创建样式表分为三种情况:

内部样式表

  • 优点:部分结构和样式相分离;
  • 缺点:没有彻底分;使用情况 较多;控制范围 控制一个页面(中)。
<head>
  <style type="text/CSS">
    选择器 {
      属性1: 属性值1;
      属性2: 属性值2;
      属性3: 属性值3;
    }
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>

行内式(内联样式)

  • 优点:书写方便;
  • 缺点:没有实现样式和结构相分离;使用情况 较少;控制范围 控制一个标签(少)。
<div style="width:200px;height:100px;border:1px solid black;"></div>

外部样式表(外链式)

  • 优点:完全实现结构和样式相分离;
  • 缺点:需要引入;使用情况最多(推荐);控制范围控制整个站点(多)。
<head>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

样式优先级:内联样式 > 内部样式 > 外部样式

id 和 class 选择器

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,id 属性和身份证一样具有唯一性。HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 "#" 来定义。注意: id 属性不能以数字开头。

#id名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}

class 选择器:

class 选择器用于描述一组元素的样式,也叫做类选择器。class 可以在多个元素中使用,并且一个元素也可以指定多个类名。在 CSS 中,类选择器以一个点 "." 号来定义。同样的类名的第一个字符也不能使用数字。

.类名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}

id 选择器和类 class 选择器的区别:

相同点:都可以应用于任何元素

不同点:

  • id 选择器只能在文档中使用一次,而类选择器可以使用多次。
  • 可以使用 class 选择器词列表方法为一个元素同时设置多个样式(也就是一个元素可以制定多个类名),而 ID 只能指定一个。

CSS 元素选择器

最常见的 CSS 选择器就是元素选择器,也就是标签选择器,也就是在 HTML 中元素的最基本的选择器。标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}
元素名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}

CSS 背景属性

background 属性用于定义 HTML 元素的背景。定义元素背景效果的 CSS 属性有五种:

  • background-color 背景颜色
  • background-image 背景图像
  • background-repeat 背景图像设置水平或垂直平铺或不平铺
  • background-position 背景图像设置定位
  • background-attachment 背景图像设置固定或滚动
body {
  background: green url("images/fix.gif") no-repeat fixed 12px 24px;
}

当使用简写属性时,属性值的顺序依次为:

background-color --> background-image --> background-repeat --> background-attachment --> background-position

CSS 外观属性

CSS 文本格式主要分为:文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。​

  • 文本对齐方式: text-align 属性有四个值:leftcenterrightjustify(两端对齐);属性默认值为auto
  • 文本修饰: text-decoration属性用来设置或删除文本的修饰。主要是用来删除超链接的下划线,也可以使用其他值来设置文本的修饰;text-decoration:overline,设置文本上划线。text-decoration:line-through; 设置文本中间划线。text-decoration:underline; 设置文本下划线。
  • 文本阴影: text-shadow: x y shadow color; 其中x是水平阴影的偏移值,y是垂直阴影的偏移值,shadow用于指定阴影的模糊值,即模糊效果的作用距离,不允许负值。color指定阴影的颜色。该属性有两个作用,产生阴影和模糊主体。
  • 文本缩进: 用来指定文本的首行缩进,允许为负值,如果值是负数,第一行则向左缩进。CSS 表示为:text-indent:2emem是相对文字大小的单位,1em就是 1 个文字大小,2em就是两个文字大小。文本间距:行高,也就是文本行的高度。例如:line-height:22px;
  • 字间距: letter-spacingword-spacing这两个属性都可用来增加或减少文本间的空白,即字间距。不同的是:letter-spacing 属性设置字符间距,而word-spacing属性设置单词间距。
  • 注意: word-spacing 属性对中文无效,因此在设置中文的字间距时请使用letter-spacing属性。letter-spacingtext-align:justify是两个冲突的属性,不能同时使用;text-align:justify是设置内容根据宽度自动调整字间距,使各行的长度恰好相等,实现文本两端对齐效果,而 letter-spacing 是指定一个固定的字间距。
  • 文本空白处理: white-space 属性指定元素内的空白如何处理,默认值为normal空白会被浏览器忽略。该属性还有 4 个值:nowrap文本不会换行,禁止换行,文本会在同一行上继续,直到遇到 <br> 标签为止。pre空白会被浏览器保留,这种方式类似 HTML 中的 <pre> 标签,用于定义预格式文本。pre-wrap指定保留空白符序列,但是正常地进行换行。pre-line指定合并空白符序列,但是保留换行符,并允许自动换行。
  • 文本转换: text-transform属性控制文本中的字母。是用来指定在一个文本中的大写和小写字母,可用于将所有字句变成大写或小写字母,或每个单词的首字母大写。 text-transform:capitalize, 定义文本中的每个单词以大写字母开头。 text-transform:uppercase,定义文本仅有大写字母。 text-transform:lowercase,定义文本仅有小写字母。
  • 什么是 CSS
  • CSS 语法
  • 创建 CSS
  • id 和 class 选择器
  • CSS 元素选择器
  • CSS 背景属性
  • CSS 外观属性

为从业或非从业的前端开发者及爱好者学习前端框架和工具等提供相关课程及指南

Language