sialvsic的Tech空间

# CSS 基础

# CSS 概述

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

  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

# 文档流

指将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

# 层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式可以根据下面的规则层叠于一个新的虚拟样式表中

1.浏览器缺省设置 2.外部样式表 3.内部样式表（位于 <head> 标签内部） 4.内联样式（在 HTML 元素内部）

内联样式（在 HTML 元素内部）拥有最高的优先权

# 样式加载

# 外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

# 内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

# 内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

# CSS 盒模型

盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：

content(Element) -> padding -> border -> margin

盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)

标准盒子模型，可以看到width的长度等于content的宽度； 而当将box-sizing的属性值设置成border-box时，盒子模型的width=border+padding+content的总和

注意：背景色 覆盖的是 content + padding border 的颜色可以由 border-color 指定，默认为黑色，如果设置为transparent，则也会显示背景色

  • 标准盒模型 box-sizing: content-box; width = content
  • 怪异盒模型 box-sizing: border-box; width = border+padding+content

CSS 外边距合并 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

# CSS 语法

# 选择器

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。 eg：

content {
  color： white;
}

# 选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

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

# 派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。由于它们依赖于上下文关系来应用所以用来可以避免某项规则

//html 
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

//css 
li strong {
  font-style: italic;
  font-weight: normal;
}

# id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 # 来定义。

# 类选择器

在 CSS 中，类选择器以一个点号显示：.

类选择器可以结合属性选择器一起使用eg：

p.name {}

也可以使用多类选择器

.name.test {}

# 属性选择器

对带有指定属性的 HTML 元素设置样式。 属性选择器 Eg:

// 为带有 title 属性的所有元素设置样式
[title] {
  color:red;
}

属性和值选择器 Eg:

// 为 title="name" 的所有元素设置样式
[title=name] {
  border:5px solid blue;
}

属性和值选择器 - 多个值

//包含指定值的 title 属性的所有元素设置样式, 适用于由空格分隔的属性值

<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>

[title~=hello] { 
  color:red; 
}


//包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值

<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>

[lang|=en] {
  color:red; 
}

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

# 相邻兄弟选择器

）可选择紧接在另一元素后的元素，且二者有相同父元素

# 背景

background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	cover 

.container p {
    width: 80%;
    height: 1500px;
    margin: 0 auto;
    background: cornflowerblue url('./index.jpg');

    /*禁止图片重复*/
    background-repeat: no-repeat;

    /*使用关键字*/
    /*background-position: center center;  居中*/
    /*background-position: top; 向上*/
    /*background-position: bottom; 向下*/
    /*background-position: left; 向左*/
    /*background-position: top; 向右*/

    /*使用百分比*/
    /*如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似*/
    /*background-position: 100%;*/

    /*如果使用两个值*/
    /*水平20%  垂直50%处*/
    /*background-position: 20% 50%;*/

    /*如果使用长度值*/
    /*距左上顶点横轴20px 纵轴50px*/
    background-position: 20px 50px;

    /*如果想使图片固定的话*/
    background-attachment: fixed
}

# 文本

缩进文本 text-indent

对齐 text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

  • left
  • right
  • center
  • justify

字间隔 word-spacing

字母间隔 letter-spacing

字符转换 text-transform 属性用来处理文本的大小写.

  • none
  • uppercase
  • lowercase
  • capitalize 首字母大写

文本装饰 text-decoration

  • none
  • underline 加下划线
  • overline 顶端画一个下划线
  • line-through 文本中间画一个贯穿线
  • blink 文本闪烁，其实没什么用

处理空白符 white-space

  • normal 正常 将空白符和回车符全部处理为一个空格
  • pre 不处理多的空白符和回车符
  • nowrap 将空白符和回车符全部处理为一个空格，但是不换行
  • pre-wrap 文本会保留空白符序列，但是文本行会正常地换行
  • pre-line 正常文本中一样合并空白符序列，但保留换行符

对比：

值			   空白符		  换行符		     自动换行
pre-line		合并			保留				允许
normal			合并			忽略				允许
nowrap			合并			忽略				不允许
pre				保留			保留				不允许
pre-wrap		保留			保留				允许

文本方向 direction

  • ltr left to right 从左到右 默认值
  • rtl right to left 从右到左

行间距 line-height

# 字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

css 字体系列 css中，有两种不同的字体系列名称

  • 通用字体系列
  • 特定字体系列

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

指定字体系列 font-family

字体风格 font-style

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体加粗 font-weight 100~900

字体大小 font-size

# 链接

链接的四种状态：

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

记得遵守这四个状态的设置顺序，这个很关键 lvha

# 列表

列表类型样式 list-style-type

列表项图像 list-style-image: url()

列表标志位置 list-style-position
inside outside

# 表格

表格的属性

  • border
  • border-collapse 设置是否将表格边框折叠为单一边框
  • text-align 表格中的水平对齐方式
  • vertical-align 表格中的垂直对齐方式
  • border-spacing 设置分隔单元格边框的距离。在设置border-collapse ： collapse后无效

# 轮廓

边框的轮廓 outline

轮廓的颜色 outline-color 轮廓的样式 outline-style 轮廓的宽度 outline-width

# CSS 定位

CSS定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

CSS position 属性

  • static （默认值） 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

  • relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。relative并不会使元素脱离文档流

  • absolute 元素框从文档流完全删除，并相对于其包含块（包含块需是已经定位的元素）定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位的元素的位置相对于最近的已定位(除去static定位方式)祖先元素（并不是兄弟元素），如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

  • fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

# CSS 浮动

float 属性

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动元素引起的问题：

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除 float clear clear 属性规定元素的哪一侧不允许其他浮动元素。 清除浮动是针对元素本身的，只能对自己有效果，不能够影响到别的元素

浮动会使元素脱离文档流

使用场景： Float 可用于实现文字环绕图片

# CSS 尺寸

  • height
  • width
  • max-height
  • min-height
  • max-width
  • min-width

← CSS3 基础 →

陕ICP备20004732号-3