层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

Blog:​​博客园​​  个人
参考:​​https://www.w3school.com.cn/css/index.asp​

概述

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

优点

  • 使网页代码更少,网页下载更快
  • 实现了内容与样式的分离,使网站维护更快捷
  • 使网页与浏览器的兼容性更好

语法结构

每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS快速入门_CSS

selector {declaration1; declaration2; ... declarationN }


声明

每条声明由一个属性和一个值组成。属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。请使用花括号来包围声明。

selector {property: value}


如果值为若干单词,则要给值加引号:

p {font-family: "sans serif";}


多重声明

如果要定义不止一个声明,则需要用分号将每个声明分开。

p {text-align:center; color:red;}


推荐每行只描述一个属性,例如:

p {
text-align: center;
color: black;
font-family: arial;
}


空格和大小写

  • 是否包含空格不会影响 CSS 在浏览器的工作效果;
  • 与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

引入方式

行内样式(内联样式)

请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。例如:

This is a paragraph


内部样式

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用


 


外部样式

 

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用  标签链接到样式表。标签在(文档的)头部:


选择器

优先级:行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配符选择器

元素选择器(标签选择器)

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}


类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用,也可以与其他元素结合使用。

语法

我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号.,然后结合通配选择器:

*.important {color:red;}


只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器:

.important {color:red;}


ID选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式。

语法

首先,ID 选择器前面有一个#号,也称为棋盘号或井号。

例如:

*#intro {font-weight:bold;}


ID 选择器中可以忽略通配选择器。前面的例子也可以写作:

#intro {font-weight:bold;}


引用

ID 选择器不引用 class 属性的值,它要引用 id 属性中的值。例如:

This is a paragraph of introduction.


通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

例如,下面的规则可以使文档中的每个元素都为红色:

* {color:red;}


背景

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

属性

属性

描述

background

简写属性,作用是将背景属性设置在一个声明中。

background-attachment

背景图像是否固定或者随着页面的其余部分滚动。

background-color

设置元素的背景颜色。

background-image

把图像设置为背景。

background-position

设置背景图像的起始位置。

background-repeat

设置背景图像是否及如何重复。

背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

例如:

p {background-color: gray; padding: 20px;}


背景图像

要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。

如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

body {background-image: url(/i/eg_bg_04.gif);}


背景定位

可以利用 background-position 属性改变图像在背景中的位置。

为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

例如:

p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}


文本

CSS 文本属性可定义文本的外观。

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

属性

属性

描述

CSS

​color​

设置文本的颜色。

1

​direction​

规定文本的方向 / 书写方向。

2

​letter-spacing​

设置字符间距。

1

​line-height​

设置行高。

1

​text-align​

规定文本的水平对齐方式。

1

​text-decoration​

规定添加到文本的装饰效果。

1

​text-indent​

规定文本块首行的缩进。

1

text-shadow

规定添加到文本的阴影效果。

2

​text-transform​

控制文本的大小写。

1

​unicode-bidi​

设置文本方向。

2

​white-space​

规定如何处理元素中的空白。

1

​word-spacing​

设置单词间距。

1

​hanging-punctuation​

规定标点字符是否位于线框之外。

3

​punctuation-trim​

规定是否对标点字符进行修剪。

3

text-align-last

设置如何对齐最后一行或紧挨着强制换行符之前的行。

3

​text-emphasis​

向元素的文本应用重点标记以及重点标记的前景色。

3

​text-justify​

规定当 text-align 设置为 "justify" 时所使用的对齐方法。

3

​text-outline​

规定文本的轮廓。

3

​text-overflow​

规定当文本溢出包含元素时发生的事情。

3

​text-shadow​

向文本添加阴影。

3

​text-wrap​

规定文本的换行规则。

3

​word-break​

规定非中日韩文本的换行规则。

3

​word-wrap​

允许对长的不可分割的单词进行分割并换行到下一行。

3

表格

CSS 表格属性可以帮助您极大地改善表格的外观。

属性

属性

描述

CSS

​border-collapse​

规定是否合并表格边框。

2

​border-spacing​

规定相邻单元格边框之间的距离。

2

​caption-side​

规定表格标题的位置。

2

​empty-cells​

规定是否显示表格中的空单元格上的边框和背景。

2

​table-layout​

设置用于表格的布局算法。

2

定位

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

属性

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

属性

描述

​position​

把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

​top​

定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

​right​

定义了定位元素右外边距边界与其包含块右边界之间的偏移。

​bottom​

定义了定位元素下外边距边界与其包含块下边界之间的偏移。

​left​

定义了定位元素左外边距边界与其包含块左边界之间的偏移。

​overflow​

设置当元素的内容溢出其区域时发生的事情。

​clip​

设置元素的形状。元素被剪入这个形状之中,然后显示出来。

​vertical-align​

设置元素的垂直对齐方式。

​z-index​

设置元素的堆叠顺序。

框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
margin: 0;
padding: 0;
}


在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

CSS快速入门_CSS_02

#box {
width: 70px;
margin: 10px;
padding: 5px;
}


Tips:

  • 内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
  • 外边距可以是负值,而且在很多情况下都要使用负值的外边距。

术语

  • element : 元素。
  • padding : 内边距,也有资料将其翻译为填充。
  • border : 边框。
  • margin : 外边距,也有资料将其翻译为空白或空白边。

display属性

  • block:将元素变成块级标签,可以设置高度和宽度
  • inline:将元素变成行内标签,不能设置高度和宽度
  • inline-block:同时具有两种
  • none:标签消失

例如:

行内标签


overflow溢出处理属性

  • Overflow (水平和垂直均设置)
  • Overflow-x (设置水平方向)
  • Overflow-y (设置垂直方向)

设置水平滚动条:

overflow-x : scroll


设置垂直滚动条:

overflow-y : scroll