前端基础之CSS

天道佩恩
69 阅读12分钟

CSS

样式选择

内联样式

在标签内使用style属性；不推荐

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

内部样式

在文档头部定义内部样式表

<head>
    <style> 
       h1 { 
           background: red; 
       } 
    </style>
</head>

外部样式(推荐)

单独写css文件，通过link标签链接到样式表

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

选择器

选择器的优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器

全局选择器

与任何元素匹配，优先级最低，一般做样式初始化
*{
     margin: 0;
     padding: 0;
 }

标签选择器

如p、b、div、a、img、body等
p{
    font-size:14px;
}

类选择器

用圆点"."来定义
1.类选择器可以被多种标签使用
2.类名不能以数字开头
3.同一标签可以使用多个类选择器，用空格隔开
<h3 class="classone  classtwo">
​
<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
    width:800px;
}
​
同一个标签使用多个类选择器：使用空格隔开
<h3 class="classone  classtwo">我是一个h3啊</h3>
错误案例：
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

ID选择器

以"#"来定义
1.ID是唯一的
2.不能以数字开头
​
<h2 id="mytitle">你好</h2>
#mytitle{
    border:3px dashed green;
}

合并选择器

语法：选择器1，选择器2，...{}
作用：提取共用的样式，减少重复代码
​
.header, .footer{
    height:300px;
}

关系选择器

后代选择器

定义：被E元素包含的F元素，用空格隔开
E F{}
案例：
<ul>
     <li>宝马</li>
     <li>奔驰</li>
</ul>
 <ol>
     <li>奥迪</li>
</ol>
​
ul li{
    color:green;
}
​

子代选择器

定义：E元素的直接子元素F，对更深一层的元素不起作用，用>表示
E>F{}
<div> 
    <a href="#">子元素1</a>
    <p> <a href="#">孙元素</a> </p>
    <a href="#">子元素2</a>
</div>
div>a{
    color:red
}

相邻兄弟选择器

定义：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
语法： E+F{}
案例：
<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>
​
h1+p{
    color:red;
}

通用兄弟选择器

定义：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择
语法：E~F{}
案例：
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1~p{
    color:red;
}

字体属性

颜色

color：设定文本颜色；如：div{ color:red;}
​
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

文本大小

font-size：设置文本大小，chrome浏览器接受最小字体是12px
​
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

文本粗细

font-weight：设置文本粗细
    bold：粗体字符
    bolder：更粗的字符
    lighter：更细的字符
    100~900：由细到粗,400等同默认,700等同bold
​
H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

字体风格

font-style：normal：默认，italic：斜体字

字体类型

font-family：指定字体，值用逗号分开
font-family:"Microsoft YaHei","Simsun","SimHei";

背景属性

背景色

background-color：设置背景色
​
<div class="box"></div>
.box{
    width: 300px;
    height: 300px;
    background-color: palevioletred;
}

背景图片

background-image：设置背景图片
​
<div class="box"></div>
.box{
    width: 600px;
    height: 600px;
    background-image: url("images/img1.jpg");
}

填充属性

background-repeat：设置背景图片如何填充
    repeat:：默认值
    repeat-x：水平方向平铺
    repeat-y：垂直方向平铺
    no-repeat：不平铺
​
.box{
    width: 600px;
    height: 600px;
    background-color: #fcc;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
}

背景图大小

background-size：设置背景图片大小
    length：设置背景图片的宽度和高度，第一个值宽度，第二个值高度；如果只设置一个，第二个值auto

背景图位置

background-position：设置背景图片显示位置
    left top：左上角
    left center：左 中
    left bottom：左 下
    right top：右上角
    right center：右中
    right bottom：中下
    x% y%：第一个值是水平位置，第二个值是垂直位置，左上角是0%  0%，右下角是100%  100% 。
        如果只指定了一个值，其他值默认是50%。默认是0%  0%
    xpos ypos：单位是像素
​
.box{
    width: 600px;
    height: 600px;
    background-color: #fcc;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

文本属性

text-align
    left： 文本居左，默认
    right：文本居右
    center：文本居中
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
​
text-decoration
    underline：下划线
    overline：上划线
    line-through：删除线
h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}
​
text-tranform
    captialize：单词开头大写
    uppercase：字母大写
    lowercase：字母小写
​
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
​
​
text-indent
    文本缩进；允许负值，将第一行左缩进
p{
    text-indent:50px;
}

表格属性

表格边框

指定边框，border属性
table, td { 
    border: 1px solid black; 
}
折叠边框: border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table { border-collapse:collapse; }
table,td { border: 1px solid black; }

宽度和高度

width和height定义表格的宽度和高度
table { 
    width:100%;
} 
td { 
    height:50px;
}

文字对齐

text-align，设置水平对齐方式，left、right、center
td { 
    text-align:right; 
}
vertical-align，设置垂直对齐方式
td { 
    height:50px; 
    vertical-align:bottom; 
}

填充

使用td和th元素填充表格内容空格之间的边框
td { 
    padding:15px;
}

颜色

下面例子指定边框颜色，th元素的文本和背景颜色
table, td, th { 
    border:1px solid green;
} 
td { 
    background-color:green; 
    color:white;
}

盒子模型

标准盒子模型

Margin：外边距
Border：边框
Padding：内边距
Content：内容
​
div{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 2px solid red;
    margin: 10px;
    background: green;
}

弹性盒子模型

由弹性容器Flex container和弹性子元素Flex item组成，通过设置display属性为flex定义为弹性容器；默认弹性盒子内容横向摆放

父元素属性

父元素属性：display： flex；开启弹性盒
flex-direction：
    1.row：横向排列，从左到右
    2.row-reverse：横向排列，从右到左
    3.column：纵向排列，从上到下
    4.column-reverse：纵向排列，从下到上
​
justify-content：
    1.flex-start
    2.flex-end
    3.center
​
align-items：
    1.flex-start
    2.flex-end
    3.center
​
<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div> 
</div>
<style>
    .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }
    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
</style>

子元素属性

<div class="flex-container">
    <div class="flex-item1">flex item 1</div>
    <div class="flex-item2">flex item 2</div>
    <div class="flex-item3">flex item 3</div> 
</div>
<style>
    .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: gold;
    }
    .flex-item1 {
        height: 150px;
        background-color: red;
        flex: 1;
    }
    .flex-item2 {
        height: 150px;
        background-color: green;
        flex: 2;
    }
    .flex-item3 {
        height: 150px;
        background-color: blue;
        flex: 1;
    }
</style>

文档流

排列方式
产生的问题:1.高矮不齐，底边对齐 2.空格折叠 3.元素无缝隙
脱离标准文档流的方式:1.浮动 2.绝对定位 3.固定定位

浮动

float属性
left：元素向左浮动
right：元素向右浮动
​
所有元素向左浮动：当所有元素同时浮动的
时候，会变成水平摆放，向左或者向右
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 0 5px;
}
​
当容器不足时：容器不足以横向摆放
内容的时候，会在下一行摆放
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
.container{
    width: 250px;
    height: 300px;
    border: 1px solid red;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
​
浮动副作用：当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动
    1.浮动元素会造成父元素高度塌陷
    2.后续元素会受到影响
受影响案例：
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
.container{
    border: 1px solid red;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
​
清除浮动：当父元素发生塌陷的时候，对布局是不利的，所以我们必须清除副作用
清除浮动解决方案
    1.父元素设置高度
    2.overflow清除浮动
    3.伪对象方式

定位

position指定元素的定位类型
设定定位后，可以使用四个方向值进行调整位置：left、top、right、bottom
    relative：相对定位
    absolute：绝对定位
    fixed：固定定位
提示：设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档
​
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
​
<div class="box1"></div>
<div class="box2"></div>
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    z-index: 2;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
    position:absolute;
    z-index: 1;
}

CSS3新特性

圆角

border-radius：上右下左

  1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角

    1. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
    2. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
    3. 一个值： 四个圆角值相同
div{
    margin: 10px;
}
.box1 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
.box2 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
.box3 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

阴影

阴影，box-shadow
属性：h-shadow v-shadow blur color
    h-shadow 必选，水平阴影的位置
    v-shadow 必须，垂直阴影的位置
    blur 可选，模糊距离
    color 可选，阴影的颜色
​
<div class="box"></div>
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px green;
}
​
模糊效果：
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px 5px green;
}
​
三个方向的阴影效果：
.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

动画

动画创建

动画创建，@keyframes,用百分比或from,to来规定发生的时间
name，动画名称，随意命名
percent，百分比，可添加多个
​
@keyframes name {
    from|0%{
        css样式
    }
    percent{
        css样式
    }
    to|100%{
        css样式
    }
}

动画执行

动画执行，animation： name duration timing-function delay iteration-count direction;
name，动画的名称
duration，动画的持续时间
​
timing-funciton，动画效果的速率
    ease，逐渐变慢（默认）
    linear，匀速
    ease-in，加速
    ease-out，减速
    ease-in-out，先加速后减速
​
delay，动画的开始时间（延时执行）
​
iteration-count，动画的循环次数，infinite为无限循环
​
direction，动画播放的方向
    normal，向前播放
    alternate，在偶数次向前播放，在奇数次反方向播放
​
animation-play-state，播放状态：running代表播放，paused代表暂停(停止播放)
​
切换背景颜色案例：
<div class="animation"></div>
.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blueviolet;
    }
}
​
呼吸效果案例：
<div class="box"></div>
.box {
    width: 500px;
    height: 400px;
    margin: 40px auto;
    background-color: #2b92d4;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe {
    0% {
        opacity: .2;
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1)
    }
    50% {
        opacity: .5;
        box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76)
    }
    100% {
        opacity: 1;
        box-shadow: 0 1px 30px rgba(59, 255, 255, 1)
    }
}

媒体查询

meta标签，使用设备的宽度作为视图宽度并禁止初始的缩放，在<head>标签加入meta标签
<meta name="viewport" content="width=device-width, 
    initial-scale=1,maximum-scale=1, user-scalable=no">
1.width = device-width, 宽度等于当前设备的宽度
2. initial-scale, 初始的缩放比例（默认设置为1.0）
3. maximum-scale, 允许用户缩放到的最大比例（默认设置为1.0）
4. user-scalable, 用户是否可以手动缩放（默认设置为no）
​
@media screen and (max-width: 768px) {
    /* 设备小于768px加载样式 */
    body{
        background-color: red;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
     /* 设备小于768px但小于992px加载样式  */
     body{
        background-color: pink;
     }
}
@media screen and (min-width: 992px) {
    /* 设备大于992px加载样式 */
    body{
        background-color: green;
    }
}

雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去
优点：1. 减少图片的字节 2. 减少网页的http请求，从而大大的提高页面的性能
原理：1. 通过background-image引入背景图片,2. 通过background-position把背景图片移动到自己需要的位置
​
<i class="icon1"></i>
<i class="icon2"></i>
.icon1 {
    display: block;
    background-image: url(1.png);
    background-position: -20px 0;
    width: 45px;
    height: 70px;
}
.icon2 {
    display: block;
    background-image: url(1.png);
    background-position: -93px -84px;
    width: 45px;
    height: 70px;
}

字体图标

产生原因：前端经常会用到图标，但经常失真，数量多的时候页面加载很慢；使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

常用字体图标库：阿里字体图标库

优点：

  1. 轻量性：加载速度快，减少http请求
  2. 灵活性：可以利用CSS设置大小颜色等
  3. 兼容性：网页字体支持所有现代浏览器，包括IE低版本

阿里字体图标使用方式：

  1. 注册账号并登录
  2. 选取图标或搜索图标
  3. 添加购物车
  4. 下载代码
  5. 选择font-class引用

示例：

<span class="iconfont icon-add-circle"></span>
<link rel="stylesheet" href="./css/iconfont.css">
.iconfont{
    font-size: 35px;
    color: red;
}
avatar
文章
阅读
粉丝