前端笔记 CSS

CSS简介

概念

CSS层叠样式表，文件后缀为.css，用于HTML文档中元素样式的定义

目的

使用css的唯一目的是让网页具有美观一致的页面

语法

CSS规则由两个主要的部分构成：选择器、一条或多条声明（样式）

选择器通常是需要改变样式的HTML元素
一条声明由一个属性和一个值组成。属性是希望设置的样式，每个属性有一个值，属性和值被冒号分开

<style>
    h1{
        color: green;
        font-size: 12px;
    }
</style>

CSS的引入方式

内联样式（行内样式）

在相关的标签内使用样式（style）属性，style属性可以包含任何CSS属性

<p style="background: orange; font-size: 24px;">
    CSS
</p>

温馨提示

缺乏整体性和规范性，维护成本高，不利于维护

内部样式

当单个文档需要特殊样式时，就应使用内部样式表，即使用 <style> 标签在文档头部定义内部样式表

<head>
	<style>
    	h1{color: green;}
	</style>
</head>

温馨提示

单个页面内的CSS代码具有统一性和规划性，便于维护，但在多个页面之间容易混乱

外部样式（推荐）

当样式需要应用于多个页面时，则更适合选择外部样式表。在外部样式表中，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表，<link>标签在文档的头部

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

选择器

全局选择器

可以与任何元素匹配，优先级最低，一般做样式的初始化

*{
	margin: 0;
   	padding: 0;
}

元素选择器

HTML文档中的元素，p、b、div、a、img、body 等

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

p{
    font-size: 14px;
}

温馨提示

所有的标签，都可以是选择器。比如：``ul、li、div、lable、dt、dl、input、div`等

无论标签嵌套多深，都会被选择

选择的是所有，而不是一个

类选择器

规定用圆点.来定义，针对想要的所有标签使用

优点是很灵活，推荐使用

.class-one{color: pink;}
.class-two{font-size: 14px;}

<h2 class="class-one class-two">粉色的标题</h2>

class属性特点

类选择器可以被多种标签使用

类名不能以数字开头，由字母、数字、- 组成

同一个标签可以使用多个类选择器，用空格隔开

ID选择器

针对某一个特定的标签来使用，只能使用一次。CSS中的ID选择器以#来定义

#mytitle{color: pink;}

<h2 id="mytitle">粉色的标题</h2>

特别提示

ID是唯一的

ID不可以以数字开头

合并选择器

语法：选择器1,选择器2……{}

作用：提取同样的样式，减少重复代码

.header, .footer{height: 300px}

选择器的优先级

内联样式 > ID选择器 > 类选择器 > 元素选择器 > 全局选择器
不同的类选择器作用于同一个元素时，如果有样式的重叠，会发生样式的覆盖，即最后一个类选择器生效

字体属性

CSS字体属性定义字体颜色、大小、加粗、文字样式

color

规定文本的颜色

div{color: red;}
div{color: #ff0000;}
div{color: rgb(255,0,0);}
div{color: rgba(255,0,0,0.5);}  /*a表示透明度*/  

font-size

设置文本的大小

h1{font-size: 40px;}

温馨提示

chrome浏览器能接受的最小字体是12px

font-weight

设置文本的粗细

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100-900	定义由细到粗，400等同默认，700等同bold

h1{font-weight: normal;}
h2{font-weight: bold;}

font-style

设置文本的文字样式

h1{font-style: normal;} /*默认值*/
h2{font-style: italic;} /*斜体*/

font-family

font-family 属性指定一个元素的字体

温馨提示

每个值用逗号分开

如果字体名称包含空格，务必加上引号

p{font-family: "Microsoft YaHei", "Simsun", "SimHei";}

背景属性

CSS背景属性包括设置背景颜色、背景图片、背景图片显示位置、背景图片如何填充、背景图片大小

background-color

设置背景颜色

div{ width: 400px; height: 400px; background-color: blue;}

background-image

设置背景图片

温馨提示

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向上铺平图像，如果图像大小超过元素大小，则从图像的左上角显示元素大小的那部分

div{ width: 400px; height: 400px; background-image: url(“路径”);}

background-repeat

设置如何平铺背景图像

值	描述
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

div{ 
    width: 400px; 
    height: 400px; 
    background-image: url(“路径”);
	background-repeat: no-repeat;
}

background-size

设置背景图像的大小

值	描述
length	设置背景图片的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只是设置一个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图片缩放成适合背景定位区域的最大大小

div{ 
    width: 400px; 
    height: 400px; 
    background-image: url(“路径”);
	background-size: cover;
}

background-position

设置背景图片的起始位置，其默认值是 0% 0%

值	描述
left\|center\|right left\|center\|right	左\|中\|右上\|中\|下
x% y%	第一个值是水平位置，第二个值是垂直位置，如果只指定一个值，其他值默认是50%
xpos ypos	单位是像素

div{ 
    width: 400px; 
    height: 400px; 
    background-image: url(“路径”);
	background-position: center;
}

文本属性

text-align

指定元素文本的水平对齐方式

h1{text-align: left|center|right;}  /*默认left*/

text-decoration

规定添加到文本的修饰，下划线，上划线，删除线等

h1{text-decoration: underline|overline|line-through;}

text-transform

控制文本的大小写

值	描述
captialize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

p{text-transform: uppercase;}

text-indent

规定文本块中首行文本的缩进

p{text-indent: 50px;}

温馨提示

负值是允许的。如果是负值，将第一行左缩进

表格属性

表格边框

指定CSS表格边框，使用border属性

table, td{
	border: 1px solid black;   /*大小 样式 颜色*/
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table{border-collapse: collapse;}

表格宽度高度

width 和 height 属性定义表格的高度和宽度

table{width: 100%; height: 50px;}

表格文字对齐

表格中文本对齐包括水平对齐和垂直对齐

text-align属性设置水平对齐方式

td{text-align: left|center|right;}

vertical-align属性设置垂直对齐方式

td{vertical-align: top|center|bottom;}

表格填充

如果在表格内容中控制与边框之间的空格，应使用td和th元素的填充属性

td{padding: 15px;}

表格颜色

background-color表示背景颜色； color表示文字颜色

td{background-color: green; color: white;}

关系选择器

后代选择器

选择所有被E元素包含的F元素，中间用空格隔开

E F{}

子代选择器

选择所有作为E元素的直接子元素F，对更深厚一层的元素不起作用，用>表示

E>F{}

相邻兄弟选择器

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

E+F{}

通用兄弟选择器

选择E元素之后的所有兄弟F元素，作用于多个元素，用~隔开，只能向下选择

E~F{}

CSS盒子模型（Box Model）

概念

所有HTML元素可以看作是盒子，在CSS中，“Box Modle” 这一术语是用来设计和布局时使用

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin），边框（border），内边距（padding），和实际内容（content）

margin（外边距）：清除边框外的区域，外边框是透明的（两个值：第一个值是上下，第二个值是左右）
border（边框）：围绕在内边框和内容外的边框
padding（内边距）：清除内容周围的区域（两个值：第一个值是上下，第二个值是左右）
content（内容）：盒子的内容，显示文本和图像

div{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 2px solid red;
    margin: 10px;
    background-color: green;
}

参数值可以是auto，效果是平均分配

弹性盒子模型（flex box）

CSS3弹性盒内容

弹性盒子是由弹性容器（flex container）和弹性子元素（flex item）组成

弹性容器通过display属性的值为flex将其定义为弹性容器

弹性容器中包含一个或多个弹性子元素

温馨提示

弹性容器外及弹性子元素内是正常渲染，弹性盒子只是定义了弹性子元素如何在弹性容器内的布局

<div class="flex-container">
    <div class="flex-item">flex item1</div>
    <div class="flex-item">flex item2</div>
    <div class="flex-item">flex item3</div>
</div>

<style>
    .flex-container{
        display: flex;
        width: 400px; height: 400px;
        background-color: red;
    }
    .flex-item{
        background-color: yellow;
        width: 90px; height: 90px;
        margin: 10px;
    }
</style>

温馨提示

默认弹性盒子内容是横向摆放

父元素上的属性

display 属性，display: flex 表示开启弹性盒子
flex-direction 属性，指定了弹性盒子子元素在父容器中的摆放方式
- row：横向从左到右排列（左对齐），是默认排列方式
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）
- column：纵向排列
- column-reverse：反转纵向排列
justify-content 属性，即内容对齐，把弹性子元素沿着弹性容器的主轴线（垂直方向）对齐
- flex-start：默认值，弹性项目向行头紧挨着填充
- flex-end：弹性项目向行尾紧挨着填充
- center：弹性项目居中紧挨着填充（如果剩余空间是负的，则弹性项目将在两个方向上同时溢出）
align-items 属性，设置或检查弹性盒子子元素在侧轴（水平方向）方向上的对齐方式
- flex-start
- flex-end
- center

<div class="flex-container">
    <div class="flex-item">flex item1</div>
    <div class="flex-item">flex item2</div>
    <div class="flex-item">flex item3</div>
</div>

<style>
    .flex-container{
        display: flex;
        width: 400px; height: 400px;
        background-color: red;
        flex-direction: column;
        justify-direction: center;
        align-items: center;
    }
    .flex-item{
        background-color: yellow;
        width: 90px; height: 90px;
        margin: 10px;
    }
</style>

子元素上的属性

flex 属性：根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

默认为0，即如果存在剩余控件也不扩大

如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%

<div class="flex-container">
    <div class="flex-item1">flex item1</div>
    <div class="flex-item2">flex item2</div>
    <div class="flex-item3">flex item3</div>
</div>

<style>
    .flex-container{
        display: flex;
        width: 500px; height: 500px;
        background-color: red;
    }
    .flex-item1{
        background-color: yellow;
        width: 90px; height: 90px;
        margin: 10px;
        flex: 3;
    }
    .flex-item2{
        background-color: green;
        width: 90px; height: 90px;
        margin: 10px;
        flex: 1;
    }
    .flex-item3{
        background-color: blue;
        width: 90px; height: 90px;
        margin: 10px;
        flex: 1;
    }
</style>

文档流

标准流问题：

高矮不齐，底边对齐

空白折叠

img之间有间隙

浮动

定义：float属性定义元素在哪个方向浮动，任何元素都可以浮动，值有left、right，只有左右浮动，没有上下浮动

所有元素向左浮动：当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

当容器不足：当容器不足以横向摆放内容的时候，会在下一行摆放

清除浮动

浮动会有副作用：

浮动元素会造成父元素高度塌陷
后续元素会受到影响

解决方案：

父元素设置高度
受影响的元素增加clear属性
overflow清除浮动：父级标签的样式里面加overflow:hidden;clear:both;
伪对象方式

定位

position属性指定了元素的定位类型：

值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

其中，绝对定位和固定定位会脱离文档流，设置定位之后：可以使用四个方向进行调整位置：left、top、right、bottom

绝对定位会随着滚动而滚动，固定定位不会

标准流是一层，浮动是两层，加一个绝对定位是加一层

温馨提示

设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上级寻找，直到顶层文档

z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面

CSS3新特性

圆角

border-radius属性可以制作圆角，参数可以是一二三四个值

阴影

box-shadow向框添加一个或多个阴影

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

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

它可以改变任意多的样式任意多的次数

用百分比来规定变化发生的时间，或用关键词from和to

@keyframes创建动画

@keyframes name {
    from | 0%{
    }
    percent{
    }
    to | 100%{
    }
}

animation执行动画

animation: name duration timing-function delay iteration-count direction

值	描述
name	名称
duration	持续时间
timing-function	速率
delay	开始时间（延迟执行）
iteration-count	循环次数，infinite为无限次数循环
direction	播放方向
animation-play-state	播放状态：running代表播放，paused代表停止播放

timing-function值	描述
ease	逐渐变慢
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction值	描述
normal	默认值normal表示向前执行
alternate	第偶数次向前播放，第奇数次向反方向播放

//鼠标悬停暂停
div:hover{
    animation-play-state: paused;
}

媒体查询

设置meta标签：使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入此meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">

媒体查询语法：

	@media screen and (max-width: 768px){
        /* 设备小于768px加载样式*/
        body{
            background-color: yellow;
        }
	}
	@media screen and (max-width: 992px) and (min-width: 768px){
        /* 设备大于768px小于992px加载样式*/
        body{
            background-color: green;
        }
	}
	@media screen and (min-width: 992px){
        /* 设备大于992px小于1200px加载样式*/
        body{
            background-color: blue;
        }
}

雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去

原理：通过background-image引入背景图片，通过background-position把图片移动到自己需要的位置

字体图标

优点：轻量，加载速度快，减少http请求；灵活性，可以利用CSS设置大小颜色等；兼容性，网页字体支持所有现代浏览器

使用字体图标：阿里字体图标库，选择font-class引用

rainbowYao's Blog