江湖小栈

Do Better

0%

CSS基础知识

发表于 分类于 Hot°C：  精品文章
本文字数： 5.9k 阅读时长 ≈ 5 分钟
CSS学习记录

本文为CSS基础知识。

CSS的一些基础知识

CSS简介

  CSS全称（Cascading Style Sheets）称为层叠样式表，他的存在使 HTML 与样式分离。

目的

  • 增加开发速度
  • 易维护
  • 易变更样式

CSS的引入方式

链接式

1
2
<link rel="stylesheet" type="text/css" href="url地址"/>
<link title="不同屏幕大小的引入范例" media="screen and (max-width: 699px)" href="url地址" rel="stylesheet" type="text/css"/>

HTML5中，type可以省略，但是rel不可省略。

内嵌式

1
2
3
<style type="text/css">
  css代码
</style>

引入式

1
2
3
<style type="text/css">
@import url(...);
</style>

链接式与引入式(导入式)的区别：引入式在网页加载完成后再装载CSS，因此这就导致了一个问题，如果网页比较大则会出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是一个缺陷。而引入式在网页加载时装载。

行内式（不推荐）

直接在Element中添加style属性即可。

选择器

全部选择

1
2
3
4
5

* {
  ...
}

id选择器

1
2
3
4
5

#id-name {
  ...
}

使用：<tag id="id-name"></tag>

class选择器

1
2
3
4
5
6
7

.class-name {
  ...
}

<!-- 一个标签有多个类时可以这样选取：（tagname.classnameA.classnameB.classnameC） -->

使用：<tag class="class-name"></tag>

标签选择器

所有相同的标签名称都会被选取

1
2
3
4
5

tagname {
  ...
}

属性选择器

所有具有该属性，不论属性值为何都会被选取

1
2
3
4
5

[tag-attribute] {
    …
}

属性值选择器

符合指定属性与其属性值的元素才会被选取

1
2
3
4
5

[tag-attribute=keyword] {
    …
}

【 = 】 完全相符关键字
【*=】 完全相符关键字，或包含「关键字」。
【~=】 完全相符关键字，或包含「△关键字」 「△关键字△」「关键字△」（△为空格）。
【^ =】 完全相符关键字，或以「关键字」开头。
【| =】 完全相符关键字，或以「关键字」「关键字-」开头。
【$ =】 完全相符关键字，或以「关键字」结尾。

以上选择器可配合一起使用：tagname.class-name[tag-attribute=keyword] {...}。

（注意：单个文件中，id选择器只能拥有一个，且只能使用一次。）

后代选择器

1
2
3
4
5
6

<!-- 选取super-selector后代中，所有的sub-selector -->
super-selector△sub-selector {
   ...
}

子选择器

1
2
3
4
5
6

<!-- 选取parent-selector中的所有子child-selector（必须是儿子，孙子就不行了！） -->
parent-selector > child-selector {
   ...
}

兄弟选择器

1
2
3
4
5
6
7
8
9
10
11

<!-- 选取selectorA的下一个selectorB -->
selectorA + selectorB{
    ...
}

<!-- 选取selectorA之后的selectorB -->
selectorA ~ selectorB{
    ...
}

其他选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!-- 结果属于第一个子节点（查找div下面的第一个子节点） -->
div :first-child {
  ...
}

<!-- 结果属于最后一个子节点（查找div下面的最后一个a） -->
div a:last-child {
  ...
}

<!-- 结果不属于最后一个子节点（查找div下面不是最后一个a的所有元素）后面的选择器也可以使用，均类似。 -->
div :not(a:last-child) {
  ...
}

<!-- 结果属于第 n 个子节点(单数节点：odd，偶数节点：even) -->
selector:nth-child(n) {
    ...查找第n个子selector，后同。
}

<!-- 结果属于第 an+b 个子节点(n从0开始的递增值，a、b为数字。) -->
selector:nth-child(an+b) {
    ...
}

<!-- 结果相同元素的属于第 n 个子节点(单数节点：odd，偶数节点：even) -->
selector:nth-of-type(n) {
    ...
}

<!-- 结果相同元素的属于第 an+b 个子节点(n从0开始的递增值，a、b为数字。) -->
selector:nth-of-type(an+b) {
    ...
}

注意：

  1. 选择器是由右到左执行的。
  2. 不要写冗余的选择器，尽量编写最简化的代码。
  3. 选择器存在优先级，优先级高的会覆盖优先级低的样式。
  4. css中，后定义的样式会覆盖之前定义的样式。最近的祖先样式比其他祖先样式优先级高。
  5. 优先级为： !important > 行内样式 > id > class > 属性 > 伪类 > 伪元素 > 标签 > 通配(全选)。
  6. 选择器可以权重叠加，例如：#id-name{...}虽然优先级高，但是div #id-name{...}的权重为1+1=2(单个选择器权重为1)，其大于前面的id选择器权重。所以会覆盖前面的样式。如果二者权重都为2，即#superid-name #id-name与div #id-name二者相比，那么按顺序依次比较优先级大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中都相等，则按照”就近原则”来判断（在这里，我们通过比较发现，前者的id选择器>标签选择器，所以前者的优先级更高。另外我们也可以这样认为，同样情况下选择器越多的优先级越高，例如：#id1#id1 > #id1/.class1.class1 > .class1）。（注意：在属性值对后面加 △！important，可以防止样式被覆盖，即优先级最高。)
  7. 选择器执行效率：id > class > 标签 > 兄弟 > 子代 > 后代 > 通配(全选) > 属性。(由快到慢，选择器三字省略…)
  8. class中可以使用多个选择器,使用空格隔开。（例：<div class="selectorA selectorB selectorC"></div>）
  9. css中，为了后续的可扩展性和可维护性，应尽量少使用id选择器，尽量不使用行内样式，且css应建立单独文档引入。

伪类&伪元素

伪类

名称使用时机
:hover当鼠标移过元素时
:focus当元素被 focus 时（聚焦）
:active当元素执行时，或者说被点击时。
:target当元素被呼叫时
:first-child当元素为第一个子节点时
:last-child当元素为最后一个子节点时

例让所有书签被呼叫时，字体颜色为红色： *:target { color: red; } (星号可写可不写)。

伪元素

名称使用时机
:::first-line第一行
::first-letter第一个字
::before元素内容之前
::after元素内容之后
::marker用于生成项目元素符号或数字

例在a标签后面添加内容ABC：

1
2
3
a::after { 
  content: "ABC"; 
}

例在a标签后面添加背景：

1
2
3
4
5
6
7
8
9
10
a::after { 
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  position: absolute;
  background-image: url(...);
  background-size: contain;
  background-repeat: no-repeat; 
}

例在a标签后面添加某个属性的值：

1
2
3
a::after { 
  content: attr(attribute-name);
}

伪类还有很多巧妙的用法(排序、贴图等)可以自己去探索~

盒子模型

margin 外边距

border 边框

注意：边框还可以分为内边框和外边框。默认为外边框，如果你想要变成内边框（即元素内容的宽度包含边框），只需设置属性 box-sizing: border-box;

padding 内填充

元素实际占用

元素实际宽高为：左(上)margin+左(上)border+左(上)padding+内容+右(下)padding+右(下)border+右(下)margin

元素背景占用为：左(上)border+左(上)padding+内容+右(下)padding+右(下)border

还可以设置最大最小宽高（max-width or min-height)具体操作自己摸索。

元素内容

W3C盒模型

box-sizing: content-box(default)

width = content-width
height = content-height

IE盒模型

box-sizing: border-box

width = content-width + 左(右)padding + 左(右)border
height = content-height + 上(下)padding + 上(下))border

其他知识

color 颜色

css中颜色有很多种写法。

  1. color: colorname; 这种写法，支持那些常用的颜色。（透明色：transparent）

    例: color: red;

  2. color: rgb(red,green,blue); 这种写法，是使用三原色调色。

    例: color: rgb(0,0,0);

  3. color: rgb(red,green,blue,Alpha); (Alpha是0～1之间的值，0 完全透明，1完全不透明)这种写法同上。

    例: color: rgb(0,0,0,0.5);

  4. color: HEX; 这种写法是写颜色的16进制值。

    例: color: #FFF; color: #FF0000;

font 字体

  1. font-style 默认为normal正常，可设置italic斜体。

  2. font-weight 默认为normal正常，可设置bold或者bolder加粗。

  3. font-size 自己设置，也可使用其样式（例：small、large、x-larger等等）。

  4. font-family 字体设置，需搭配@font-face。

例：

有两种类型的字体系列名称：

  • 指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。(或者自定义的字体)

  • 通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”

  font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。
注意：使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

1
2
3
4
5
6
7
8
9
10
11

font-family: "my-font-family-name",Serif;

@font-face {
    font-family: my-font-family-name;
    src: url('url地址');
    font-stretch: 拉伸字体;
    font-style: 字体样式;
    font-weight: 字体粗细;
}

text 文字

  1. text-indent 首行缩进 自己设置值

  2. text-align 文字排列（center、right、left）

  3. text-shadow 文字阴影 （四个值：分别是水平阴影 垂直阴影 模糊范围 颜色）

  4. text-transform 字母大小写 （none 原格式|uppercase 大写|lowercase 小写|capitalize 首字母大写）

  5. text-decoration 字符装饰 （none 无装饰|underline 下划线|overline 顶线|line-through 删除线）

  6. letter-spacing 字符之间的间距

  7. line-height 行高（一般设置与元素高度相同，字符就会垂直居中。）

CSS3 新特性

  • 新的伪类与伪元素
  • 选择器(基本选择器 属性选择器 伪类选择器)
  • 背景渐变
  • 边框圆角阴影
  • 转换和变形
  • 过渡
  • 动画
  • 盒模型(以box-sizing区分，前面有介绍。)
  • 媒体查询

WC太多了，基础篇写到这里。上厕所去了，其他内容后续再介绍。

进阶内容：

  1. background

  2. opacity visibility display:none区别

  3. column、outline、border、boxshadow、list、table

  4. cursor、overflow、resize

  5. display

  6. position、z-index

  7. float、对齐方式、上下左右居中方式

  8. 动画

  9. 各浏览器默认属性以及可继承与不可继承的属性

  10. 常用单位、设计哲学

相关推荐
bulb