CSS学习笔记 -- 1

更新于 | 阅读次数
| 字数统计 3,892 | 阅读时长 15

抽空学习了一下html、css、JavaScript。

这部分内容是我抽空学习的时候整理的笔记,这部分是看的前端的内容。学习地址。

什么是CSS

CSS 全称为”层叠样式表Cascading Style Sheets”,他主要是用于定义HTML内容在浏览器中的样式,如文字大小，颜色，字体加粗等。

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

1
2
3
4
5
p{
	font-size:12px;
	color:red;
	font-weight:bold;
}

CSS的语法

基本语法

css样式由选择符和声明组成，而声明又由属性和值组成。

如上文示例中p为选择符 {...}花括号内为声明，color为属性 ,red为值。

选择符:又称为选择器，指明网页中要应用样式规则的元素。

声明: 在英文花括号中的就是声明，属性和值之间用英文冒号分割。当有多条声明的时候，使用;分割。

注释

html: <!-- ... -->;

css: /*...*/

位置

内联式、嵌入式、外部式

内联式CSS样式,直接写在现有的CSS标签中

text

<p style="color:red ;font-size: 15px">text</p>

嵌入式CSS样式，直接写在当前的文件中

将css代码写在html文件的<style></style>标签中

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。

外部式CSS样式,写在单独的一个文件中

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

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

注意:

  1. css样式文件名称应该以有意义的英文字母命名。
  2. rel=”stylesheet” type=”text/css”是固定写法，不可以修改。
  3. <link>标签的位置一般写在<head>标签之内。
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>...</p>
</body>
</html>

三种方式的优先级以及怎么选择

如果三个都有，那么三个都要访问到，但是如果对于同一个属性，那么按照：就近原则体现。

类选择器

语法： .类选择器{css样式代码;}

  • 以英文原点开头
  • 类选器名称可以任意起名

使用：

  1. 设置类选择器
    1
    2. 使用合适的标签修饰内容

内容

1
3. 为上面的标签设置一个类

内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
### ID选择器
类似类选择器
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
#### 类选择器和ID选择器的区别
**相同点**:可以应用于任何元素
**不同点**:
1. ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
### 子选择器
子选择器(">")：用于选择指定标签元素的第一代子元素。

.food>li{border:1px solid red;}

1
2
3
4
5
6
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
### 包含（后代）选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first span{color:red;}

1
2
3
4
5
6
7
8
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
### 通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

*{color:red;}

1
2
3
4
5
6
7
8
### 伪类选择符
`a:hover{color:red;}`
为a标签鼠标滑过状态设置字体颜色变红。 由于兼容问题，只有`a:hover `兼容所有浏览器
### 分组选择符

h1,span{color:red;}

1
2

h1{color:red;}
span{color:red;}

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
以上代码等价。
### 权值规则
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
权值越高，优先使用。
**注意**：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
### 重要性
使用！important使某些样式具有最高权重。如：
`p{color:red!important;}`
一般情况下：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
但是`!important`是一个例外
所以:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式 < `!important` 修饰的样式
## 文字排版
### 字体

body{font-family:”Microsoft Yahei”;}

1
2
### 字号、颜色

font-size:12px;/字号/
color:#66;/颜色/

1
2
### 粗体

font-weight:bold;

1
2
### 斜体

font-style:italic;

1
2
### 下划线

font-decoration:underline;

1
2
### 删除线

text-decoration:line-through;

1
2
### 缩进

text-indent:2em;/2em表示文字的2倍大小/

1
2
### 行间距(行高)

line-height:1.5em;

1
2
3
4
### 中文字间距、字母间距
**中文、字母**

letter-spacing:50px;

1
2
**单词**

word-spacing:50px;

1
2
### 对其方式

text-align:center;/居中/

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
## 元素分类
常用的块状元素：
`div`、`p`、`hn`、`ol`、`ul`、`dl`、`table`、`address`、`blockquote`、`form`
常用的内联元素有：
`<a>`、`<span>`、`<br>`、`<i>`、`<em>`、`<strong>`、`<label>`、`<q>`、`<var>`、`<cite>`、`<code>`
常用的内联块状元素有：
`<img>`、`<input>`
### 块级元素
如上文；
可以通过`display:block`将元素显示为块级别元素。
**块级元素特点**：
1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
### 内联元素
如上文；
可以通过`display:inline`将元素设置为内联元素
**内联元素特点**：
1. 和其他元素都在一行上；
2. 元素的高度、宽度及顶部和底部边距不可设置；
3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。
### 内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
可以通过`display:inline-block`将元素设置为内联块状元素
**inline-block 元素特点**：
1. 和其他元素都在一行上；
2. 元素的高度、宽度、行高以及顶和底边距都可设置。
## 盒子模型
1. `width`: 内容
2. `height`:内容
3. `padding`:内填充
4. `margin`:外填充
5. `border`:边界
### 边框 border
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
例如给div设置边框：

div{border:2px solid red;}

1
2
或者

div{
border-width:2px;
border-style:solid;
border-color:red;
}

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
**注意**
1. border-style: `dashed`虚线、 `dotted`点线、 `solid`实线
2. border-color:
3. border-width（边框宽度）中的宽度也可以设置为：`thin` | `medium` | `thick`（但不是很常用），最常还是用象素（px）。
`border-bottom`、`bottom-top`、`bottom-left`、`bottom-right`只给一边的边框设置。
### 大小 
`width` `height`
### 内填充
`padding`  `div{padding:20px 10px 15px 30px;}`  顺序为上又下左(顺时针)
如果上、右、下、左的填充都为10px;可以这么写
`div{padding:10px;}`
如果上下填充一样为10px，左右一样为20px，可以这么写：
`div{padding:10px 20px;}`
### 边界(外填充)
`margin`  类似`padding`
## CSS布局模型
网页中的元素有三种布局模型:
1. 流动模型(Flow)
2. 浮动模型(Float)
3. 层模型(Layer)
### 流动模型(Flow) 
流动是默认的网页布局模式。也就是说网页在默认的状态下的HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征:
1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
2. 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
### 浮动模型(Float)
如上文，块状元素都是独占一行。如果要讲快中元素并排显示，那么久需要用到浮动模型了。
注意: 任何元素都是默认不能浮动的，但是可以用css定义为浮动。

div{
width:200px;
height:200px;
border:1px red solid;
float:left;
}


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
37
38
39
40
41
42
43
44
45
46
47
### 层模型(Layer)
让html元素在网页中精确定位
层模型有三种形式：
* 绝对定位(position: absolute)
* 相对定位(position: relative)
* 固定定位(position: fixed)
#### 绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
#### 相对定位
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
#### 固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#### Relative与Absolute组合使用
absolute 可以相对于浏览器设置定位。如果相对于其他元素，就需要使用`position:relative`
注意:
1. 参照定位的元素必须是相对定位元素的前辈元素
2. 参照定位的元素必须加入position:relative;
3. 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
### 盒子模型代码简写
* top right bottom left 相同,写一个
* top bottom相同，left right 相同，写两个
* left right相同，写三个
*
### 颜色值缩写
16进制的色彩值，如果每两位的值相同，可以缩写一半
＃336699   ——>  ＃369
### 字体缩写

body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:”宋体”,sans-serif;
}

1
缩写为:

body{
font:italic small-caps bold 12px/1.5em “宋体”,sans-serif;
}

1
2
3
4
5
6
7
**注意**:
1. 使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2. 在缩写时 font-size 与 line-height 中间要加入“/”斜扛。 
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{
font:12px/1.5em “宋体”,sans-serif;
}
```
只是有字号、行间距、中文字体、英文字体设置。

颜色

  1. 英文命令颜色p{color:red;}
  2. RGB颜色p{color:rgb(133,45,200);}或者p{color:rgb(20%,23%,20%);}
  3. 十六进制颜色p{color:＃00ffff);}

长度值 都是相对单位

  1. 像素 px 相对于显示器
  2. em 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。
  3. 百分比

注意：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。

小技巧

水平居中

  • 如果被设置元素为文本、图片等行内元素时，水平居中时通过给父类元素设置text-align:center来实现的
  • 定宽块状元素:通过设置margin的left和right为auto实现。此时width:200px
  • 不定宽块状元素:
    • 加入label标签
      • 第一步:为需要设置居中的元素外面加入一个table标签(包括<tbody>、<tr>、<td>)
      • 第二步:为这个table设置左右margin居中。
    • 设置display:inline:显示类型设置为行内元素，进行不定宽元素的属性设置
    • 设置position:relative和left:50%:利用相对定位的方式，讲元素向左偏移50%，达到居中的目的。

垂直居中

  • 父元素高度确定的单行文本: 设置 height 等于 line-height 实现。
    • height : 该元素的高度
    • line-height:行高，指在文本中，行与行之间的基线间的距离.
    • line-height 与 font-size 的计算值之差，在CSS中成为”行间距”.
  • 父元素高度确定的多行文本(图片):
    • 方法一:使用插入table 同时设置vertival-align:middle
    • 方法二(因为兼容问题，不推荐使用):display：table-cell ; vertival-align:middle

隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

  1. position : absolute

  2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。

CepheusSun wechat
订阅我的公众号，每次更新我都不一定会告诉你！
坚持原创技术分享，您的支持将鼓励我继续创作！
0%