css零基础学习笔记

[TOC]

html主要做结构，显示元素内容

css美化html,布局网页

1.1CSS语法规范

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

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

1.2选择器

1.2.1标签选择器

1.2.2类选择器(最常用)

.类名 {
    属性1：属性值1
}

使用的时候调用：class="类名"

类名英文字母间可以用中横线表示 my-red

1.2.3多类名

<div class="box red font35">红色</div>

类名之间用空格隔开。

1.2.4通配符选择器

* {
属性1：属性值1；
}

不用自己调用，他会自动应用于所有标签。

1.3字体

1.3.1字体样式：font-family

1.3.2字体大小：font-size px(像素)是最常用的单位

可以通过body标签指定整个页面的文字大小。标题标签比较特殊，需要单独指定大小。

1.3.3字体粗细：font-weight 由粗到细：bolder bold normal lighter 400->normal 700->bold 后面不加数字

1.3.4字体风格：font-style:italic(斜体) 其实反而更经常让斜体的文字变得不倾斜 font-style:normal

属性	表示	注意点
font-size	字号	我们通常的单位是px(像素) 一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	700-bold 400-normal
font-style	字体样式	倾斜italic
font	字体连写	有顺序 一定要有字号和字体

1.4CSS文本属性

文本颜色 对齐文本 装饰文本 文本缩进 行间距

1.4.1 文本颜色

div {
            color:#00eeff;     /*16进制数 最常用 */
            /* color:rgb(255,0,0); */
            /* color:deepskyblue; */
        }

1.4.2 文本对齐

h1 {
            /* 本质是让h1盒子里面的文本水平居中对齐 */
            text-align: center;
            background: #00ffee;
        }

1.4.3装饰文本 text-decoration

属性值	描述
none	默认。没有装饰线(最常用)
underline	下划线。链接a自带下划线(常用)
overline	上划线(几乎不用)
line-through	删除线(不常用)

1.4.4文本缩进 text-indent

设置段落的首行缩进。

可以设置缩进多少像素 px

em是一个相对单位，相对当前元素一个文字大小的距离 例如首行缩进2字符 2em

1.4.5行高

行高由三部分组成：上间距+文本高度+下间距。

属性	表示	注意点
color	文本颜色
text-align	文本对齐	left center right
text-indent	文本缩进
text-decoration	文本修饰	添加下划线underline 取消 none
text-height	行高	控制行与行之间的距离

1.5 CSS的引入方式

1.5.1CSS的三种样式表：

1.行内样式表 (行内式)

2.内部样式表 (嵌入式)

3.外部样式表(连接式)

1.行内样式表：

在要改的标签内部直接改，只改具体一个标签的样式。

<style>本身就是标签的属性。特殊情况下，需要简单修改样式的时候使用。

2.内部样式表：

一般放在html页面里的head标签里面的<style>标签之中，其实放哪里都可以。

并没有完全分离。

3.外部样式表：

单独写到CSS文件当中,然后的html页面的head标签里面。

    <link rel="stylesheet" href="style.css">

2 Emmet语法

2.1快速生成HTML结构语法

• 1.生成标签 直接输入标签名 按回车键

• 2.生成多个相同的标签，加上*即可，比如div*3 就可以快速生成3个div

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

• 4.如果有兄弟关系的标签，用+就可以了 比如 div+p

• 5.如果生成带有类名或者id名字的，直接写.demo或者#two (这里demo为类名，two为id名，默认为div标签，可以修改，比如 p.demo p#two)

• 生成的div类名是有顺序的，可以用自增符号$( 例如 .demo$*5 )

• 想要在生成的标签内部写内容可以用{}表示

2.2快速生成css样式语法

输入各部分单词的首字母，比如 tac text-align: center

3.复合选择器

3.1后代选择器

又称 包含选择器。

元素1 元素2 。。。{

​ 里面放样式

}

ol li {
    color: #f1f;
}

元素是一层一层的后代关系，可以有很多级，只有完全符合才适用。 孙子 重孙子都可以选择 最好没级都写出来。

可以用标签 也可以用类

.one li {
    color: #456;
}

3.2子元素选择器

元素1>元素2 只选择子元素 只管亲儿子

3.3并集选择器

元素1,元素2 中间用逗号隔开 喜欢竖着写 两个元素都采用同种样式：

div,
p {
    font-size: 99px;
}

逗号是 和 的意思，用于集体声明。

3.4

三种选择器可以一起使用

3.5伪类选择器

冒号

鼠标放在页面的某一个位置的时候，样式会改变：

1. a:link 选择所有未被访问的链接
2. a:visited 选择所有已被访问的链接
3. a:hover 鼠标碰到的地方
4. a:active 鼠标点到的地方

3.6 focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况<input>类表单元素才能获取。

input:focus {
    background-color: yellow;
}

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	空格隔开
子代选择器	选择最近一级元素	只选亲儿子	较少	大于号隔开
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	逗号隔开
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	lvha a:link
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus

5 CSS的元素显示模式

5.1什么是元素显示模式：元素以什么方式进行显示。一般分为块元素和行内元素。

5.2块元素：

div h p ul ol li

1.自己独占一行

2.高度、宽度、外边距和内边距可以控制

3.宽度默认是容器(父级宽度)的100%

4.是一个容器及盒子，里面可以放行内或块级元素

5.文字类的元素内不能使用块级元素 p和h标签内不能放块级元素。

5.3行内元素：(内联元素)

a strong b em .......

span标签是典型的行内元素。

1.相邻行内元素在一行上，一行可以显示多个。

2.宽高直接设置是无效的

3.默认宽度就是他本身内容的宽度

4.行内元素只能容纳文本或其他行内元素。

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

5.4行内块元素

<img /> <input /> <td>

1.一行可以显示多个，他们之间会有空隙(行内元素特点)

2.默认宽度就是他本身的宽度(行内元素特点)

3.宽度、高度、外边距和内边距都可以控制。(块元素的特点)

5.5元素转换

display:block 转换为块元素 最常用。

a {
	width:100px;
	background-color:pink;
	display:block;
}

display:inline 转换为行内元素

div {
	width:100ps;
	display:inline;
}

display:inline-block

span {
	width:100px;
	background-color: deeppink;
	display: inline-block;
}

5.6 文字居中

让单行文字垂直居中的解决方案：让文字的行高等于盒子的高度。

行高等于上空隙加文字像素加下空隙，再联系盒子的高度，可以设置文字的垂直位置。

6 CSS背景

6.1背景颜色

一般情况下背景颜色为透明的：transparent

修改可以直接设置background-color:

6.2背景图片

background-image 属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

background-image: none|url(url)

表示没有背景图片，或者一定要写地址，url(绝对地址或相对地址)

6.3背景平铺

默认情况下，背景都是平铺的。

background-repeat:repeat

可以设置背景不平铺。

background-repeat: no-repeat

沿着x轴平铺，y轴平铺。

background-repeat:repeat-x

background-repeat:repeat-y

盒子里面即可以加背景颜色，也可以加背景图片。背景图片压住背景颜色。

6.3.2 背景图片位置。可以是方位名词，也可以是精确单位.

方位名词的水平和垂直顺序可以颠倒：left right center top bottom. 只写一个，另外一个没有写就默认居中

水平居中，垂直靠上：background-position: center top;

水平靠右，垂直居中：background-position:right center;

精确的移动像素：

background-position:x y;

参数可以混合使用，方位坐标和精确像素混合使用，有顺序。先水平再垂直。

6.4 背景图像固定

background-attachment: scroll | fixed

默认是滚动的，我们也可以设为固定

背景图像复合写法：

一般习惯规定为：

background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置

6.5背景色半透明：

非常常见的效果：

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

这样比较不会挡住下面的盒子

7 CSS三大特性：

• 层叠性

  样式冲突时，采用就近原则。

• 继承性

  父亲的性质，会作用到儿子。(子承父业)

  text- font- line- 开头的样式 以及color可以继承 并不是所有的都能继承。

  行高的继承性可以跟单位也可以不跟单位：

  font: 12px/24px

  font: 12px/1.5 当前元素文字大小的1.5倍 反而更常用

• 优先级

​ 选择器相同，执行层叠性

​ 选择器不同：

权重 由低到高 范围越小越高

选择器	选择器权重
继承 或者*	0，0，0，0
元素选择器 好像是标签	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style	1，0，0，0
!important	无穷大

div {
	color: pink!important;
}

此时的优先级最高！

有了权重，我们就知道要优先执行哪一个了。

继承的权重是0，不管父元素的权重多高，继承过来的权重都是0

a链接不会继承，浏览器有默认的样式。需要手动指定样式。

---------------------划重点：权重叠加-------------------------------------

复合选择器会有权重叠加的问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重叠加</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* 虽然可以叠加，但是不会有进位的问题 以四组为一个单位*/
        /* ul li 权重 0，0，0，1+1，0，0，0 = 0，0，0，2 */
        
        ul li {
            color: green;
        }
        /* li的权重0，0，0，1 */
        
        li {
            color: red;
        }
        /* .nav li 的权重 0，0，1，0 + 0，0，0，1 = 0，0，1，1 */
        
        .nav li {
            color: pink
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>hh</li>
        <li>换行</li>
        <li>方法</li>
    </ul>

</body>

</html>

8 盒子模型

8.1看透网页布局的本质

1. 先准备好相关的网页元素，网页元素基本都是盒子box
2. 利用CSS设置好盒子的样式，然后摆放到相应位置
3. 往盒子里面装内容

网页布局的核心本质：就是利用CSS摆盒子

8.2 盒子模型(Box Model)

1. border 边框 (盒子的厚度)
2. content 内容
3. padding 内边距 (内容和盒子的距离)
4. margin 外边距 (两个盒子的距离)

8.2.1 边框(border)

border-width 边框粗细

border-style 边框样式 solid dash dotted 实线 虚线 点线

border-color 边框颜色

可以合在一起写： border: 5px solid pink 合在一起写，没有顺序

边框也可以四条边单独设置：

border-top border-bottom border-left border-right

border: 1px solid blue
border-top: 1px solid pink

合理利用层叠性，一条边粉色，另外三条边为蓝色

测量的时候不要测量边框，只要里面的尺寸。

实际开发过程中，可以考虑边框的厚度，对应地减小盒子的宽高(记得双倍)

8.3内边距 padding

可以更加具体：

padding-left padding-right padding-top padding-bottom

值的个数	表达意思
padding: 5px	1个值，代表上下左右都有5像素内边距
padding:5px 10px	2个值 上下5 左右10
padding:5px 10px 20px	3个值 上5 左右10 下20px
padding:5px 10px 20px 30px	4个值 上5 右10 下20 左30 按顺时针的顺序

上述四种情况，都是会遇到的

内边距也会影响盒子的大小

盒子本身的宽高，加上内边距的宽度，是整个盒子实际占用的大小。盒子本身有宽度和高度，最后加上内边距，会撑大盒子。

设计的时候，可以相应减小盒子的宽高。

8.3.2 内边距2

如果盒子没有指定宽度，增加内边距不会增加宽度。 (高度同理)

如果宽度设计为 width:100% 增加内边距会增加宽度，多了滚动条。

8.4外边距 (margin)

属性	作用
margin-left
margin-right
margin-top
margin-bottom

同时写1-4个值，表示的意思与padding同理。

8.5盒子模型-外边距应用

要让盒子一直在浏览器中水平居中显示

• 盒子必须指定了宽度(width)
• 盒子左右的外边距都设置为auto

常见的三种写法：

• margin-left: auto; margin-right:auto;
• margin: 0 auto; (两个参数的情况，上下为0 左右自动)
• margin: auto;

以上居中对齐是针对块元素。

行内或行内块元素。找到他的父亲，在父亲添加 text-align: center

8.6外边距合并

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

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

三种解决方法：

• 为父元素定义上边框
• 为父父元素定义上内边框
• 为父元素添加overflow: hidden
• 还有其他方法：浮动、固定、绝对定位。

8.6.2清除内外边距

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

* {
            padding: 0px;
            /*清除内边距 */
            margin: 0px;
            /*清除外边距 */
        }

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(上下不一定能起到好的效果)。有需要的时候，转换成块级和行内块元素就可以了。

9.PS的知识点

• Ctrl+R 打开标尺 或者在导航栏的视图里面选择标尺
• 右击标尺，把里面的单位改为像素
• Ctrl + (加号) 可以放大视图，同理减号减小视图
• 按住空格，可以变成抓手
• 右边栏的矩形框可以知道大小，匕首状图标取色工具。

10.综合案例

做页面的模块的时候，最好先整理分析一下我们的布局。

11圆角边框(重点)

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

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

border-radius: length;

要做成圆形，要先做一个正方形。

半径设成边长的一半即可。或者设置为50%

div {
            background-color: pink;
            height: 200px;
            width: 200px;
            /* border-radius: 100px;*/
            border-radius: 50%;
        }

如果是一个矩形，就设置成高度的一半的值。

12盒子阴影(重点)

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

盒子阴影是不占用空间的。

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

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* 默认外阴影 outset 这个不要写 */
            /* box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3); */
            /* 可设置内阴影 */
            /* box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3) inset; */
        }
        /* 鼠标经过才有影子 */
        
        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);
        }

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色 建议用rgba
inset	可选。将外部阴影(outset)改为内部阴影

13文字阴影

text-shadow属性将阴影设置于文本。

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

值	描述
h-shadow	必需
v-shadow	必需
blur	可选
color	可选

text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);

二、浮动

1.浮动

1.1传统网页布局的三种方式

网页布局的本质——用css来摆放盒子。把盒子摆放到相应位置。

CSS提供了三种传统布局方式：

• 普通流(标准流/文档流) 最基本的

  就是标签按照规定好默认方式排列。

  块级元素会独占一行，从上向下顺序排列。

  常用元素：div hr p h1~h6 ul ol dl form table

  行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

  常用元素：span a i em

• 浮动

• 定位

实际开发中，三种都要用

1.2浮动

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

浮动最典型的应用：可以多个块级元素一行内排列显示

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

1.3浮动特性

1. 浮动元素会脱离标准流
2. 浮动元素会一行内元素显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

1.3.1 脱离标准流

1. 脱离标准普通流的控制(浮) 移动到指定位置(动)，（俗称脱标）
2. 浮动的盒子不再保留原先的位置。

1.3.2对齐

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

注意：浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

1.3.3行内块元素

浮动元素会具有行内块元素的特性。

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

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

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

为了约束浮动元素的位置，我们网页布局一般采取的策略是：

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

2 常见网页布局

1. 浮动和标准流的父盒子搭配。

   先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。

   一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

   浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

3.清除浮动

有时候我们不应该直接给父盒子高度，父盒子高度由子盒子决定。

这时，我们就需要清除浮动了。

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

选择器{clear:属性值;}

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

在实际工作中，都是用both

3.1清除浮动——额外标签法

额外标签法也成为隔墙法，是W3C推荐的做法

额外标签法会在浮动元素末尾添加一个空的标签。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .box {
            width: 200px;
            border: 1px solid blue;
        }
        
        .one {
            width: 40px;
            height: 100px;
            background-color: aqua;
            float: left;
        }
        
        .two {
            width: 50px;
            height: 110px;
            background-color: pink;
            float: left;
        }
        
        .clearing {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="clearing"></div>
    </div>
</body>

</html>

通过这个标签清除浮动。

这个元素必须是块级元素，或者是br

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

缺点：添加许多无意义的标签，结构化较差。(我们不推荐使用)

3.1.1额外标签法清除浮动总结：

• 本质：清除浮动元素脱离标准流造成的影响
• 策略：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
• 额外标签法：隔墙法。就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式。实际工作可能会遇到，但是不常用。

3.2 清除浮动——父级添加overflow

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

3.3清除浮动——:after 伪元素法 (这种写法更高级、常用)

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

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        
        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

• 优点：没有添加标签，结构更简单
• 缺点：照顾低版本浏览器

3.4清除浮动——双伪元素清除浮动

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }

3.5清除浮动总结

清除浮动的方式	缺点
额外标签法(隔墙法)
父级overflow:hidden	溢出隐藏
父级after伪元素
父级双伪元素

什么时候需要清除浮动？

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了

4.切图

1. jpg图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，我们的产品类的图片经常用jpg格式的。
2. gif图像格式：GIF最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。
3. png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景。如果想要切成背景透明的图片，请选择png格式。
4. PSD图像格式是photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点，我们可以直接从上面复制文字，获得图片，还可以测量大小和距离。