CSS的基础

CSS基础

css语法规范

使用html时，需要遵从一定的规范要求，css也是如此，想要熟练的使用css对网页进行操作和修饰，首先需要了解css样式规则

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

• 选择器是用于指定css样式和html标签，花括号内是对该对象设置的具体样式

• 属性和属性值以“键值对”的形式出现

• 属性是对指定的对象设置的样式属性，例如字体大小和字体颜色等

• 属性和属性值之间用英文“：”分开

• 多个键值对之间用英文“；”进行区分

选择器

选择器分为基础选择器和复合选择器两大类

• 基础选择器是由单个选择器组成的

• 基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器

标签选择器

标签选择器：用标签名作为我们的选择器，可以把某一类标签全部选择出来

优点：能快速把页面中同类型的标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

类选择器

类选择器：如果想要差异化选择不同标签，单独选一个或几个标签，可以选择类选择器

语法：

.类名{

属性1：属性1；

}

<div class=“类名”>xx<div>

注意：

1.类选择器使用"."进行标识，后面紧跟类名

2.可以理解为给这个标签起一个名字来标识

3.长名称或词组可以使用中横线来为选择器命名

4.不要使用纯数字或中文命名，尽量使用英文字母来表示

5.命名要有意义，尽量让人一眼就看出这个类名的目的

6.命名规范

ID选择器

id选择器：样式#定义，结构id调用，只能调用一次，不能调用多次。

语法：

#类名{

属性1：属性1；

}

<div id=“类名”>xx<div>

通配符选择器

通配符选择器：将定义选取网页的所有元素

*{

属性1：属性1；

}

注意：

• 通配符选择器不需要调用，自动给所有元素使用样式
• 特殊情况才使用

字体属性

字体类型

css使用font-family属性定义文本的字体系列

p｛font-family: “微软雅黑”；｝

• 各个字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体用引号包含
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中正确显示
• 最常见的几个字体：body｛font-family：“Microsoft YaHei‘’,tahoma,arial,‘’‘Hiragino Sans GB’｝

字体大小

CSS使用font-size属性定义字体大小

p｛

​ font-size：100px；

｝

• px（像素）大小是我们网页最常用的单位

• 谷歌浏览器默认的字体大小16px

• 不同浏览器可能默认显示的字体大小不一致，我们尽量给一个明确的大小，不要默认大小

• 我们可以给整个body指定一个字体大小

字体粗细

CSS使用font-weight属性设置文本字体的粗细程度

p {

font-weight: bold;

}

属性值	描述
normal（400）	默认值（不加粗）
bold	定义粗体
100-900	400等于normal，700对于bold

文字样式

CSS使用font-style属性设置文本的风格

p｛

font-style： normal；

｝

属性值	作用
normal	默认值
italic	浏览器会以斜体的字体样式显示

css的文本属性

文本颜色

color 属性用于定义文本的颜色

格式：

div ｛

​ color： red；

｝

表示	属性值
预定的颜色值	red，green等
十六进制	#FF0000,#FF6600,#29D794
RBG代码	rbg（255，0，0）

对齐文本

text-align属性用于设置元素内文本的水平对齐方式

div ｛

​ text-align： ceenter；

｝

属性值	解释
left	左对齐（默认值）
center	居中对齐
right	右对齐

装饰文本

text-decoration属性规定添加到文本的装饰，可以给文本下划线，删除线，上划线等

div ｛

​ text-decoration： underline；

｝

属性值	描述
none	默认，无装饰
underline	下划线。链接a自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

文本缩进

text-indent属性用来文本第一行缩进，通常是将段落首行缩进

div ｛

​ text-indent：10em；

｝

行间距

line-height属性设置行间的距离。可以控制行与行之间的距离。

p ｛

​ line-height：26px；

｝

css的三种样式表

按照css样式书写的位置，css样式表可以分为三大类：

1.行内样式表（行内式）

2.内部样式表（嵌入式）

3.外部样式表（链接式）

EMMET语法

快速生成html标签

1.生成标签直接输入标签吗按tab键即可

2.如果想要生成多个相同标签，加上*即可，如div*3

3.如果有父子级关系的标签，可以用>，如ul>li

4.如果有兄弟关系标签，用+即可，如div+p

5.如果生成带有类名或者id名字的，直接写.demo或者# two tab键即可

6.如果生成的div类名是有顺序的，可以用自增符号$

7.如果想要在生成的标签内部写内容可用｛｝表示

伪类选择器

链接伪类选择器

属性值	解释
a:link	选择所有没有访问过的链接
a:visited	选择所有访问过的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起的链接）

focus伪类选择器

focus伪类选择器：用于选取获得焦点光标的表单元素

格式：

input：focus｛

​ background-color： yellow；

｝

CSS元素显示模式

html元素一般分为两大类块元素和行内元素

块元素

块元素：h1-h6、p、div、ul、ol、li等，其中div是最典型的块元素

特点：

• 自己独占一行
• 高度、宽度、外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子、里面可以放行或者块元素

注意：

• 文字类的元素不能使用块元素
• <p>标签主要用于存放文字，因此<p>里面不能存放块元素，特别不能存放div
• 同理h1-h6等都是文字类块标签，里面都不能存放其他元素

行内元素

行内元素：a,strong,b,i,del,s,ins,u，span等，其中span标签是最典型的行内元素，也成为内联元素

特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高，宽直接设置是无效的
• 默认宽度是他本身内容的宽度
• 行内元素只能容纳文本或其他的行内元素

注意：

• 链接里面不能再放链接
• 特殊情况链接a里面可以放块级元素，但是给a转化一下块级模式最安全

行内块元素

行内块元素：img，input，td，他们同时具有块元素和行内元素的特点。

特点：

• 和相邻行内元素在一行上，但是他们之间有空白缝隙，一行可以显示多个
• 默认宽度就是他们本身内容宽度
• 高度，行高，外边距以及内边距都可以控制

显示模式的转化

display：block：将元素转化为块元素

display：inline：将元素转化为行内元素

display：inline-block：将元素转化为行内块元素

CSS背景属性

CSS背景属性设置背景颜色（background-color），背景图片（background-image），背景平铺（background-repeat），背景图片设置（background-position），背景图像固定（background:rgba）等

背景颜色

background-color属性定义了元素的背景颜色

background-color：颜色;（transparent）

背景图片

background-image：none |url(url)；

背景平铺

background-repeat：repeat（默认）|no-repeat|repeat-x|repeat-y；

背景图片位置

background-position：x y；

参数值	说明
length	百分数|由浮点数字和单位标识符组成的长度值
position	top|center|bottom|left|right 方位名词

• 如果指定两个值都是方位名词，则两个值前后顺序无关，如left top和top left效果一样
• 如果只指定一个方位名词，另一个值省略，则第二个默认居中对齐

背景图片固定

background-attachment:属性设置背景图片是否固定或者随着页面的部分移动

格式：

background-attachment: scroll | fixed

参数	作用
scroll	背景图片是随着对象内容滚动
fixed	背景图像是固定的

背景颜色半透明效果

background:rgba (0,0,0,0.3);

• 最后一个参数alpha透明度，取值范围在0~1之间
• 我们习惯把0.3的0省略，写为background：rgba（0，0，0，.3）
• 背景半透明是指盒子半透明，盒子里面的内容不受影响

CSS三大特性

层叠性，继承性，优先性

层叠性

相同的选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决冲突的问题

层叠性原则：

• 样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个

• 样式不冲突，不会叠层

继承性

CSS中的继承，子标签会继承父标签的某些样式，如颜色和字号，简单的理解就是：子承父业

• 恰当的使用继承可以简化代码，降低css样式的复杂性
• 子元素可以继承父元素的样式（text，font，line这些开头的可以继承，以及color属性）

优先级

当同一个元素指定多个选择器，就会有优先级产生

• 如果选择器相同，则执行层叠性
• 如果选择器不同，则根据选择器权重执行

选择器	选择器权重
继承 或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式 style=“”	1，0，0，0
！important 重要的	无穷大

注意：

• 权重是有四组数字组成，但是不会有进位
• 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器
• 等级判断从左到右，如果一位数值相同，则判断下一位数值
• 简单记忆就是，通配符选择器和继承权重是0，标签选择器1，类（伪类）选择器10，id选择器100，行内样式选择器1000，！important为无穷大
• 继承的权重是0，如果该元素没直接选中，不管父元素权重多高，子元素得到的权重就是0

权重叠加

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

• div ul li-----(0,0,0,3)
• .nav ul li----(0,0,1,2)
• a:hover-----(0,0,1,1)
• .nav a--------(0,0,1,1)

网页布局

网页布局要学习三个核心：盒子模型，浮动，定位

网页布局过程：

1.先装备好相关网页元素，网页元素基本都是盒子box

2.利用css设置好样式，然后摆放位置

3.往盒子里面装内容

盒子模型

盒子模型：用来封装周围html元素，他包括：边框（border），外边距（margin），内边距（padding）和实际内容（content）

边框

border可以设置元素的边框:边框的宽度（粗细），边框的样式，边框的颜色

格式：

border（-方位名词）：border-width | border-style | border-color

border-style：

属性值	说明
solid	实线边框
dashed	虚线边框
dotted	点线边框

表格细线边框

border-collapse属性控制浏览器绘制表格边框的方式，他控制相邻单位的边框

语法：

border-collapse:collapse;

边框会影响和盒子的实际大小

内边距

padding属性用于设置内边距，就是边距与内容之间的距离

属性	作用
padding-left	左边距
padding-right	右边距
padding-top	上边距
padding-bottom	下边距

值的个数	表达意思
padding：5px；	一个值，表示上下左右都有5像素的内边距
padding：5px 10px；	两个值，表示上下5像素，左右10像素内边距
padding：5px 10px 15px；	三个值，表示上5像素，左右10像素，下15像素
padding：5px 10px 15px 20px；	四个值，表示上5像素，右10像素，下15像素，左20像素

padding也最影响盒子的大小

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式和padding是一样的

外边距可以让盒子水平居中，必须满足两个条件

1.盒子必须有宽度

2.盒子左右外边距都设置为auto

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素上有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

1.可以为父元素定义上边框

2.可以为父元素定义内边距

3.可以为父元素添加overflow：hidden

清除内外边距

网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除一下网页元素的内外边距

*｛

padding：0；

margin：0

｝

注意：行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下外边距，当时转化为块级和行内块元素就可以了。

圆角边框

border-radius属性用于设置元素的外边框圆角

语法：

border-radius:length（半径）;

• length的值可以是数值也可以是百分比
• 如果是正方形，想要设置一个圆形，把数值修改为高度或者宽度的一半即可，或者直接写为50%
• 如果是一个矩形，设置高度的一半可以做出两边圆弧中间直线的形式
• 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角

盒子阴影

box-shadow：属性将阴影应用于盒子

box-shadow:h-shadow v-shadow blur spread color insert

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
insert	可选，将外部阴影改为内部阴影

注意：

• 默认的是外阴影，当时不可以写这个单词，否则导致阴影无效
• 盒子阴影不占用空间，不影响其他盒子的排序

文字阴影

text-shadow属性将阴影应用于文本

text-shadow:h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影颜色

浮动

浮动可以改变元素标签默认的排列方式

网页布局的第一准则：多个块元素纵向排列找标准流，多个块级元素横向排列找浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框边缘

语法：

选择器｛float：属性值；｝

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

脱标

1.浮动元素会脱离标准流（脱标）

2.浮动盒子不再保留原先的位置

一行内显示

如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列

注意：浮动的元素是互相粘靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行。

浮动元素具有行内块元素特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

• 如果块盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
• 浮动的盒子中间没有缝隙的，是紧挨着一起的
• 行内元素同理

浮动元素经常和标准流父级元素搭配使用

先用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列左右的位置，符合网页布局第一标准

网页布局第二准则：先设置盒子大小，之后设置盒子的位置

清除浮动

清除浮动本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果盒子本身有高度，就不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

语法：

选择器｛clear：属性值；｝

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动的影响

我们实际工作中，几乎只用clear：both；

清除浮动的策略是：闭合浮动

方法：

1.额外标签法也称为隔墙法，是w3c的推荐做法

2.父级添加overflow属性

3.父级添加after伪元素

4.父级添加双伪元素

额外标签法

额外加一个空标签，将上下分割开。

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构比较差

注意：添加的空标签必须是块标签

父级添加overflow

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll

优点：代码简介

缺点：无法显示溢出的部分

after伪元素

after方式是额外标签的升级版，也是给父元素添加

​ .clearfix:after {

​ content: “”;

​ display: block;

​ height: 0;

​ clear: both;

​ visibility: hidden;

​ ｝

​ .clearfix {

​ /* IE6、7 专有 */

​ *zoom: 1;

​ }

优点：没有添加标签，结构简单

缺点：照顾低版本浏览器

父级添加双伪元素

也是给父元素添加

.clearfix:before,.clearfix:after {

content: “”;

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

优点：代码更简介

缺点：照顾低版本浏览器

定位

定位：将盒子顶在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式

定位模式决定元素的定位方式，他通过css的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移就是定位的盒子移动到最终位置，有top，botton，left，right 4个属性

边偏移属性	示例	描述
top	top:20px	顶端偏移量
botton	bottom:20px	底部偏移量
left	left:20px	左侧偏移量
right	right:20px	右侧偏移量

静态定位

静态定位就是元素默认的定位方式，无定位的意思

语法：

选择器｛position：static；｝

• 静态定位按照标准流的特性摆放位置，它没有边偏移
• 静态定位在布局里面很少使用

相对定位（灵魂出窍型）

相对定位是元素在移动位置的时候，是相对于他原来位置来说

语法：

选择器｛position：relative；｝

• 它是相对自己原来的位置移动的
• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（灵魂出窍，不脱标）

绝对地位（势利小人型）

绝对地位是元素在移动位置的时候，是相对于它祖先元素来说的

语法：

选择器｛position：absolute；｝

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
• 如果祖先元素由定位，则以最近一级的有定位祖先元素为参照点移动位置
• 绝对定位不在占有原先位置（脱标），不占有位置

子绝父相

为什么子绝父相

• 子级绝对定位，不会占用位置，可以放到父盒子的任何一个位置，不会影响其他的兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子内显示
• 父盒子布局时，需要占有位置，因此父亲只能是相对定位

固定定位

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

语法：

选择器｛position：fixed；｝

1.以浏览器的可视窗口为参照点移动元素

• 和父元素没任何关系
• 不随滚动条滚动而滚动

2.固定定位不占有位置

• 固定定位也是脱标的，其实固定定位也可以看做一种特殊的绝对定位

小技巧：固定在版心右侧位置

小算法：

1.让固定定位盒子left：50%。走到浏览器可视区的一半位置。

2.让固定定位的盒子margin-left版心宽度的一半距离。多走版心宽度的一半位置。

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器｛position:sticky; top:10px;｝

特点：

1.以浏览器的可视窗口为参照点移动的元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加top，left，right，bottom 其中一个才有效

定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index控制盒子的前后次序

语法：

选择器｛z-index：1；｝

• 数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上
• 如果值是相同的，则按照书写方式，后来居上
• 数值后面不能加单位
• 只有定位的盒子才有z-index属性

绝对定位的盒子水平居中

加了绝对定位的盒子不能通过margin：0 auto水平居中，但是可以通过以下计算方式实现水平和垂直居中。

1.让盒子左侧移动到父级元素的水平中心位置，如 left：50%

2.让盒子向左移动自身宽度的一半，如margin-left：100px；

定位的特殊特性

绝对定位和固定定位也和浮动相似

1.行内元素添加绝对或者固定定位，可以直接设置宽度和高度

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容大小

3.脱标的盒子不会触发外边距塌陷

4.绝对定位（固定定位）会完全压住盒子

• 浮动元素不同，只会压住他下面的标准流盒子，但是不会压住下面标准流盒子里的文字（图片）
• 绝对定位会压住下面标准流的所有内容

浮动之所以不会压住文字，因为浮动产生的目的最初就是做文字环绕的效果，文字会环绕浮动元素。

元素的显示与隐藏

让一个元素在页面隐藏或显示出来

1.display显示隐藏

2.visbility显示隐藏

3.overflow溢出显示隐藏

display属性

• display:none:隐藏对象
• display:block:除了转化为块级元素以外，同时还有显示元素的意思

display隐藏元素后不再占有原来位置

visibility可见性

visibility:visible;元素可视

visivility：hidden;元素隐藏

visivility隐藏元素后，继续占有原来的位置

display和visibility的区别就是隐藏后还有没有占本来的位置

overflow 溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度或宽度）时，会发生什么

值	说明
overflow：visible	默认值，溢出显示
overflow：hidden	溢出值隐藏
overflow：scroll	无论溢出与否都显示一个滚动条
overflow：auto	溢出的时候显示滚动条，不溢出就没滚动条