0%

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开始的递增值,ab为数字。) -->
selector:nth-child(an+b) {
...
}

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

<!-- 结果相同元素的属于第 an+b 个子节点(n从0开始的递增值,ab为数字。) -->
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