CSS基础知识

CSS初识

• CSS指的是层叠样式表。
• CSS不是编程语言
• 样式就是格式，对于网页来说，网页显示的文字的大小、颜色以及图片位置、背景颜色等都是网页显示的样式。（就是外面传的衣服，在外表的装饰）

CSS语法

在最基本的层面上，CSS由两个组成部分组成：

• 属性：人类可读的标识符，指示您想要更改的样式特征(例如font-size, width, background-color) 你想改变。
• 值：每个指定的属性都有一个值，该值指示您希望如何更改这些样式特性(例如，要将字体、宽度或背景色更改为。)
• 以; 结尾

三种引用方式

内联、外联、内嵌

• 内联：例如：
• 内嵌：在中标签内
• 外联：例如：

tips:尽量选择外联
外联让css文件和html文件分离开来，便于编写和阅读。
外联让维护更加容易，如果我们只需修改某些css样式而不必再去改动html文件。

选择器

基本选择器

**通用选择器：**选择所有元素

*{
  padding:none;
  margin:none;
}

**元素选择器：**选中所有的此元素，div{}就是选中所有的div

input{
   outline:none;
}
div{
   color:red;
}

class选择器

1. 以.前缀开头，然后跟一个自定义的类名，对应HTML中的class属性
2. 同个class可以出现在不同元素中
3. 一个元素可以有不同的class
4. 同样class命名也不能以数字开头

<div class="className1">
</div>
<div class="className1 className2">
</div>

/* 基础类选择器 */
.className1{
}
/* 多类选择器 */
.className1.className2{ 
}

id选择器

5. #前缀开头，然后跟一个自定义的ID名，对应HTML中的id属性
6. id命名时不能以数字开头
7. 一个元素不能设置两个id
8. 同个id不能出现在两个元素中

<div id="idName">
    
</div>

#idName{
    
}

分组选择器：同时选中多种标签

/*比如*/
/*会同时匹配div和span*/
div,span{

}

其他选择器

属性选择器：选择html中具有某个属性的元素

1. 选择有某个属性的元素，而不论属性值是什么，可以使用属性选择器。
2. 也可以只选择有特定属性值的元素。
3. 根据多个属性进行选择，只需将属性选择器链接在一起即可。
4. 在XML文档中使用频繁

简单属性选择器，只选择有对应属性的元素，不关心属性值

/*把包含标题（title）的所有元素变为红色*/
*[title] {color:red;}

/*对有 href 属性的锚（a 元素）应用样式*/
a[href] {color:red;}
/*同时有 href 和 title 属性的 HTML 超链接的文本设置为红色*/
a[href][title] {color:red;}

/*可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像*/
img[alt] {border: 5px solid red;}

多属性选择器，如果某个属性存在多属性值，需要完全匹配

/*将指向 Web 服务器上某个指定文档的超链接变成红色，*/
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

/*多个属性-值选择器链接在一起来选择一个文档*/
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

/*<p class="important warning">This paragraph is a very important warning.</p>*/
/*匹配*/
p[class="important warning"] {color: red;}
/*不匹配*/
p[class="important"]{color:red;}

部分属性值选择：选择包含某属性包含部分属性值的元素

p[class~="important"] {color: red;}

子串匹配属性选择器，

类型	说明
[abc^=“def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”]	选择 abc 属性值中包含子串 “def” 的所有元素

a[href*="w3school.com.cn"] {color: red;}

特定属性选择器

/*选择 lang 属性等于 en 或以 en- 开头的所有元素。*/
*[lang|="en"] {color: red;}

<!--因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：-->
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

后代选择器：又称为包含选择器，可以选择作为某元素后代的元素。

/*对 h1 元素中的 em 元素应用样式*/
h1 em {color:red;}

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

语法解释
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

字体和文本样式

1、css中的长度与颜色

2、css中的文字属性

3、css中的文本属性

文字样式属性

font-family:文字字体
font-size:文字大小
font-color：文字颜色
font-weight：文字粗细
font-style：文字样式

font-family 字体属性

作用：元素内文字以什么字体来显示

语法：font-family:[字体1],[字体2],[......];

说明：

1. 含空格字体名和中文，用英文引号（"）括起；
2. 多个字体用英文逗号隔开；
3. 引号嵌套，外使用双引号，内使用单引号。

 font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

font-size 文字大小

作用：元素内文字大小

语法：font-size:绝对单单位，相相对单位

• 绝对单位

单位	说明
in	英寸
cm	公分
mm	公里
ex	小写字母为单位
pt	1pt/72英寸
pc	1pc/12pt
px	像素（推荐使用）

• 相对单位

值	描述
xx-small 、x-small、small、medium、large、x-large、xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

color 文字颜色

语法：颜色名|十六进制|RGB

font-weight

作用：设置文字粗细

语法：font-weight:normal 400正常 | bold 700加粗 | bolder 加粗 | lighter 细体 | 100-900

说明：默认值：normal 400等同于normal,而700等同于bold

font-style

作用：文字样式

作用：为元素内文字设置样式

语法：font-style:normal 正常显示 | italic 文字倾斜 | oblique 文字倾斜（基本不用）

font-variant

作用：设置元素中文本为小型大写字母

语法：font-variant:normal 正常显示| small-caps 将英文大小写字母调成为同宽

font

作用：文本属性简写

语法：font:font-style font-variant font-weight font-size/line-height font-family;

说明：值之间空格隔开，注意书写顺序。

CSS文本样式

text-align

作用：设置元素内文本的水平对齐方式

语法：tex-align:left 左对齐 | right 右对齐 | center 居中对齐 | justify 两端对齐

注意：该属性对块级元素设置有效

line-height

作用：设置元素中文本行高

语法：line-height:长度值 | 百分比

说明：一行文字的高度，行高指文本行的基线间的距离

文字基线

注意：基线并不是汉字文字的下沿，看图理解自行理解

行高和行距

行高：基线到基线的距离

行距：底线到顶线的距离

注意：看图自行理解

行框和行内框

注意：看图自行理解

vertical-align

作用：设置元素内容的垂直方式

语法：vertical-align:baseline | sub | super |top| text-top | middle | bottom |text-bottom| 长度 | 百分比

注意：看图自行理解

text-indent

作用：设置首行缩进

文本样式属性

字体属性	说明
word-spaceing	设置元素内单词之间的距离
letter-spaceing	设置元素内字母之间的距离
text-transform	设置元素内字母的大小写 capitzlize 首字母大写 | uppercase字母大写 | lowercase字母小写 | none正常
text-decoration	设置元素内文本的装饰 underline下划线 | overline上划线 | line-through删除线 | blink | none 正常
text-transform:	capitzlize

CSS一些属性

● width height
● margin padding
● background及其相关属性
● background-color
● background-image
● background-repeat
● background-attachment
● background-position

● font-size
● font-weight
● font-family
● color
● text-indent

伪类

给既存的元素模拟新添加一个类来实现某种效果

• :link（未访问的链接）
• :visited（已访问的链接）
• :hover（鼠标划过时）
• :active（鼠标点击时）
• :first-child（父元素的第一个子元素）

伪元素

模拟新添加一个元素来实现某种效果

• ::before
• ::after

伪类和伪元素具体的暂时就先不讲了，可参考W3school和菜鸟教程等

比较复杂，了解常用的，复杂的用到的时候再查就行

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

有些特殊的情况需要为某些样式设置具有最高权值，使用!important

如下代码：

/* 这时 p 段落中的文本会显示的red红色 */
p{color:red!important;}
p{color:green;}

CSS进阶

盒模型

width、height、padding、border、margin

• W3C的标准盒模型

box-sizing: content-box

元素实际大小=width/height+padding+border+margin

• IE盒模型

box-sizing: border-box

元素实际大小=width/height+margin

• 盒模型切换

视情况使用哪种盒模型
box-sizing: content-box/border-box;

布局

文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式

• 块级元素-从上到下的方式排列
• 行内元素-从左到右的方式排列

display

+block 块级元素

• inline 行内元素 / 内联元素
• inline-block 行内块级元素
• none 隐藏元素
• flex flex布局
• grid grid布局

position定位

• static 默认值，正常位置
• relative 相对定位，相对于其正常位置进行定
• absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位，若没有则相对于html
• fixed 固定定位，相对于浏览器窗口进行定位
• sticky

top/bottom/left/right

1. 值

bottom:-20px; 向下移动
left:50px; 向右移动

• 可为负值，表示向相反的方向移动
• 可为百分比，水平偏移量根据其父元素 width属性的值计算得到，垂直偏移量根据其父元素 height 属性的值计算得到，但如果父元素没有显式定义height 属性，就等同于 height属性的值为0

2. 表现

• 绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型
• 固定元素不占据空间，即使窗口滚动它也不会滚动
• 相对定位元素仍然占据文档中的原有位置，并且对父元素和兄弟元素的布局都没有任何影响，但可能会覆盖其他元素
• relative和fixed脱离文档流，子元素无法撑起父元素的高度

float浮动

如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征：

1. 浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位
2. 浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
3. 浮动元素依然位于包含框之内
4. 浮动定位解决的问题-让多个块级元素在一行内显示

flex
Flexible Box，弹性盒子

Flex Container（父级）的属性

● display：flex
● flex-direction
● flex-wrap
● flex-flow
● justify-content
● align-items
● align-content

Flex Item 的属性

● align-self
● order
● flex-flow
● flex-shrink
● flex-basis

Grid

网格布局（兼容性不是很好）

花园小游戏

Grid深入浅出

居中方案

定宽高的当然也可以用不定宽高的居中方案

水平

• 内联元素水平居中 在外层用 text-align:center
• 定宽块级元素水平居中
  ○ 非绝对定位加margin-left和margin-right设为auto
  ○ 绝对定位left: 50%; 加 margin-left: -50px; (假设宽度100px)
• 任意块级元素水平居中
  ○ 绝对定位left: 50%; 加 transform: translateX(-50%);
  ○ 绝对定位加margin: auto
  绝对定位left: 0; right: 0; 加 margin-left 和 margin-right 设置为 auto
  ○ inline-block（可多个）
  父元素text-align: center: 子元素display: inline-block;
  ○ flex布局（可多个）
  父元素设置display: flex; justify-content: center;

垂直

● 单行文字垂直居中
○ 将line-height设为与父元素高度相同
○ padding上下填充相同
● 多行文本垂直居中
○ padding填充上下相同
○ flex布局，外层元素定高加以下代码，（会将内部子元素变成block类型）
display: flex;
flex-direction: column;
justify-content: center;
● 定高块级元素垂直居中
子元素绝对定位 top: 50%; 和负边距 margin-top: -50px; (假设宽度100px)
● 不定高块级元素垂直居中
○ 子元素绝对定位 top: 50%; 加transform: translateY(-50%);
○ 绝对定位加margin: auto;
设置元素为绝对定位且top与bottom均为零，margin-top与margin-bottom为auto
○ flex布局
/* 会将居中元素内的文本也垂直居中 */
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}

水平垂直

● 定宽定高
绝对定位加负边距
● 不定宽高
○ 绝对定位left: 50%; top: 50%; 加 transform: translate(-50%,-50%);
○ 绝对定位加margin: auto;
设置元素为绝对定位且top、bottom、left与right均为零，margin值为auto
○ flex布局
父元素设置display: flex; justify-content: center; align-items: center;
○ Grid布局
父元素display: grid; 子元素设置justify-self: center; align-self: center;
CSS&CSS3
渐变
文本效果
字体
2D转换、3D转换
过度
动画
分页
CSS规范
命名

不管是文件名，还是class或id名，都不要用中文
class或id命名最好按语义来，两个及以上的单词用下划线连接