CSS概念

css的使用是让网页具有统一美观的页面，css层叠样式表，简称样式表，文件后缀名.css

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

选择器：通常是需要改变的HTML元素

声明：由一个属性和一个值组成，每个属性有一个值，属性和值使用类似key：value的形式（如下方h1就是选择器，color就是属性，rebeccapurple就是值，属性和值成为一条声明）

<!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>Document</title>

    <style>

        h1{

            color: rebeccapurple;

            font-size: 10px;

        }

    </style>

</head>

<body>

    <h1>Welcome CSS</h1>

</body>

</html>

CSS的引入

行内样式：在需要改变的标签内使用style属性，让style属性包含任何css的属性

注：缺点是缺乏整体统一性，不利于维护

 <h1 style="background-color: blueviolet; font-size: 20px;">Welcome CSS</h1>

内部样式，在单个文档需要的特殊样式，如上方css概念中的例子，在文档头部使用style标签增加样式

注：可以让单个页面css代码具有统一性，但多个页面容易混乱

外部样式：当样式应用于多个页面，外部样式在每个需要使用的页面通过link标签链接到样式表。link标签在文档头部

建立一个public.css文件，写外部样式

p{

    color: aquamarine;

    font-size: 20px;

}
<!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>Document</title>

    <link rel="stylesheet" href="./public.css">

</head>

<body>

    <p>产品</p>

</body>

</html>

 选择器

全局选择器：优先级最低，一般做初始化样式

*{

    color: blue;

}

用通配符 *

元素选择器：选择页面所有相同类型标签，用于描述这些类型的共性，无论这个标签藏的多深都能被选择上

HTML文档中的p、div、img等等标签

p{

    color: blue;

}

类选择器：用圆点.来定义，针对相同类的标签，类名不能用数字开头，同一个标签可以使用多个类选择器，用空格隔开

<!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>Document</title>

    <style>

        .classone{

            color: red;

            font-size: 30px;

        }

        .classtwo{

            background-color: black;

            height: 100px;

        }

    </style>

</head>

<body>

    <h1 class="classone classtwo">标题</h1>

</body>

</html>

ID选择器：针对特定id标签来使用，只能使用一次，用#来定义，不能用数字开头

<!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>Document</title>

    <style>

        #mytext{

            color: red;

        }

    </style>

</head>

<body>

    <p id="mytext">文本</p>

</body>

</html>

合并选择器：多个标签提取共同样式，减少重复代码

<!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>Document</title>

    <style>

        #mytext,.mytitle{

            color: red;

        }

        .mytitle{

            background-color: black;

        }

    </style>

</head>

<body>

    <p id="mytext">文本</p>

    <h1 class="mytitle">标题</h1>

</body>

</html>

选择器优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器

字体属性

包括颜色、大小、加粗、文字样式

颜色

<p style="color: red;">字体颜色</p>

<p style="color: #fff000;">字体颜色</p>

<p style="color: rgb(0,0,0);">字体颜色</p>

<p style="color: rgba(0, 0, 0, 1);">字体颜色</p>

大小

<p style="color: red;font-size: 30px;">字体颜色</p>

粗细

数值范围100-900，400是默认值，700等同于bold

<p style="font-weight: bold;">字体颜色</p>

<p style="font-weight: bolder;">字体颜色</p>

<p style="font-weight: lighter;">字体颜色</p>

<p style="font-weight: 900;">字体颜色</p>

文字样式

<p style="font-style: normal;">字体颜色</p>

<p style="font-style: italic;">字体颜色</p>

<p style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;">字体颜色</p>

背景属性

属性 值
background-color
 背景颜色
background-image
 背景图片
background-positio
 图片位置
background-repeat
 图片填充
background-size
 图片大小
 
 
 
 
 
 
 
 
background-repeat
属性 值
repeat 默认值
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
no-repeat 不平铺

background-size ：可以使用数值设置宽度和高度，也可以使用百分比，最常用的是两个值cover（保持图片横纵比将图片覆盖背景最小大小），contain（保持图片横纵比将图片覆盖背景最大大小）

<!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>Document</title>

    <style>

        .box1,.box2{

            width: 600px;

            height: 600px;

        }

        .box1{

            background-image: url(./u=1175012548\,1449685026&fm=253&fmt=auto&app=138&f=JPEG.webp);

            background-repeat: no-repeat;

            background-size: cover;

        }

        .box2{

            background-color:rebeccapurple;

            background-position: left top;

        }

    </style>

</head>

<body>

    <div class="box1">背景1</div>

    <div class="box2">背景2</div>

</body>

</html>

文本属性

文本对齐方式：居中、靠左、靠右

<h1 style="text-align: center;">h1</h1>

<h2 style="text-align: left;">h2</h2>

<h3 style="text-align: right;">h3</h3>

文本添加下划线、上划线和删除线

<h1 style="text-decoration: underline;">h1</h1>

<h2 style="text-decoration: overline;">h2</h2>

<h3 style="text-decoration: line-through;">h3</h3>

文本大小写

<h1 style="text-transform: capitalize;">h1</h1>

<h2 style="text-transform: uppercase;">h2</h2>

<h3 style="text-transform: lowercase;">h3</h3>

首行文本缩进

<h1 style="text-transform: capitalize; text-indent: 100px;">h1</h1>

表格边框、颜色、边框折叠

<!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>Document</title>

    <style>

        table,td{

            border: 1px solid red;

        }

        table{

            border-collapse: collapse<!-- 折叠边框 -->;

            padding: 20px;

        }

    </style>

</head>

<body>

    <table>

        <tr>

            <td>单元格</td>

            <td>单元格</td>

            <td>单元格</td>

        </tr>

        <tr>

            <td>单元格</td>

            <td>单元格</td>

            <td>单元格</td>

        </tr>

        <tr>

            <td>单元格</td>

            <td>单元格</td>

            <td>单元格</td>

        </tr>

    </table>

</body>

</html>

关系选择器

后代选择器：所有所有被A包含的B元素，用空格分开A B{ }

<!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>Document</title>

    <style>

        ul li{

            color: #fff000;

        }

    </style>

</head>

<body>

    <ul>

        <li>A</li>

        <li>B</li>

    </ul>

</body>

</html>

子代选择器：只对所有A标签的直接子标签B起作用，A>B{ }

<!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>Document</title>

    <style>

        div>span{

            color: #fff000;

        }

    </style>

</head>

<body>

    <div>

        <span>A</span>

        <h1><span>B</span></h1>

        <span>C</span>

    </div>

</body>

</html>

相邻兄弟选择器：选择紧跟A标签后的B元素，选择向下相邻的第一个兄弟元素， A+B{ }

<!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>Document</title>

    <style>

        span+p{

            color: #fff000;

        }

    </style>

</head>

<body>

    <div>

        <span>A</span>

        <p>B</p>

        <p>C</p>

    </div>

</body>

</html>

通用兄弟选择器：选择A之后的所有兄弟元素B作用多个，A~B{ }

<!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>Document</title>

    <style>

        span~p{

            color: #fff000;

        }

    </style>

</head>

<body>

    <div>

        <span>A</span>

        <p>B</p>

        <p>C</p>

    </div>

</body>

</html>

盒子模型

css的盒子包括外边距（margin），边框（border），内边距（padding），实际内容（content）

<!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>Document</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: yellow;

            padding: 50px 10px;

            border: 5px solid red;

            margin: 80px;

        }

    </style>

</head>

<body>

    <div>

        content

    </div>

</body>

</html>

弹性盒子模型

弹性盒子是由弹性容器和弹性子元素组成，弹性容器通过设置display属性值为flex来定义弹性容器，弹性盒子只对弹性子元素生效

通过flex-direction来设置子元素在容器中的位置（默认水平排列）row左对齐；row-reverse翻转右对齐；column纵向排列；column-reverse翻转纵向排列

子元素可以通过flex来分配空间

<!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>Document</title>

    <style>

        .container{

            width: 500px;

            height: 500px;

            background-color: black;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .box1,.box2,.box3{

            width: 100px;

            height: 100px;

        }

        .box1{

            background-color: red;

            flex: 10%;

        }

        .box2{

            background-color: yellow;

            flex: 30%;

        }

        .box3{

            background-color: blue;

            flex: 60%;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

    </div>

</body>

</html>

浮动

增加一个浮层来放置内容

float的值 值描述
left 向左浮动
right 向右浮动

浮动以后相当于在页面增加一个浮层来放置内容

<!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>Document</title>

    <style>

        .box1{

            width: 100px;

            height: 100px;

            background-color: red;

            float: left;

        }

        .box2{

            width: 200px;

            height: 200px;

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

清除浮动

浮动元素会造成父元素高度塌陷，如下方例子，不设置父元素的高度，浮动就无法把父元素撑起来

<!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>Document</title>

    <style>

        .box1{

            width: 200px;

            background-color: red;

        }

        .box2{

            width: 100px;

            height: 100px;

            background-color: yellow;

            float: left;

        }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2"></div>

    </div>

</body>

</html>

解决方案可以设置父元素的高度，也可以通过清除浮动，通过在父标签加overflow：fidden

.box1{

    width: 200px;

    background-color: red;

    overflow: hidden;

    clear: both;

}

除了造成父元素塌陷，同样也会影响后续元素，例子如下，我们同样无法看到box3，因为被浮动的box2遮挡

<!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>Document</title>

    <style>

        .box1{

            width: 200px;

            background-color: red;

            overflow: hidden;

            clear: both;

        }

        .box2{

            width: 100px;

            height: 100px;

            background-color: yellow;

            float: left;

        }

        .box3{

            width: 100px;

            height: 100px;

            background-color: black;

        }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2"></div>

        <div class="box3"></div>

    </div>

</body>

</html>

解决方法就是，在需要处理的地方加上clear:both

.box3{

    width: 100px;

    height: 100px;

    background-color: black;

    clear: both;

}

定位

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

设置后可以通过left、top、right、bottom来调整，每用一个position就会增加一个浮层：

固定定位是不会随着页面移动变动位置的，永远在固定位置

相对定位和绝对定位是根据具有定位的父元素进行定位的，如果父级没有定位就会根据页面来定位

相对定位是不脱离文档流的，绝对定位和固定定位都是脱离文档流的

<!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>Document</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: red;

            position: relative;

            left: 100px;

            top: 100px;

        }

        .box1{

            width: 100px;

            height: 100px;

            background-color: black;

            position: absolute;

            left: 100px;

            top: 300px;

        }

    </style>

</head>

<body>

    <div></div>

    <div class="box1"></div>

</body>

</html>

调整位置顺序通过z-index，如下方例子，原本是黑色遮盖红色，如果想调整为红色在上，只需要增加z-index

<!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>Document</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: red;

            position: relative;

            left: 100px;

            top: 100px;

        }

        .box1{

            width: 100px;

            height: 100px;

            background-color: black;

            position: absolute;

            left: 100px;

            top: 100px;

        }

    </style>

</head>

<body>

    <div></div>

    <div class="box1"></div>

</body>

</html>

z-index大的值在上方

div{

    width: 100px;

    height: 100px;

    background-color: red;

    position: relative;

    left: 100px;

    top: 100px;

    z-index: 2;

}

.box1{

    width: 100px;

    height: 100px;

    background-color: black;

    position: absolute;

    left: 100px;

    top: 100px;

    z-index: 1;

}

CSS必知必会的更多相关文章

  1. 2015 前端[JS]工程师必知必会

    2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...

  2. [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)

    http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...

  3. 读书笔记汇总 - SQL必知必会（第4版）

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  4. 读书笔记--SQL必知必会--建立练习环境

    书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL in 10 Minutes - Fourth Edition> MyS ...

  5. 读书笔记--SQL必知必会12--联结表

    12.1 联结 联结(join),利用SQL的SELECT在数据查询的执行中联结表. 12.1.1 关系表 关系数据库中,关系表的设计是把信息分解成多个表,一类数据一个表,各表通过某些共同的值互相关联 ...

  6. 读书笔记--SQL必知必会18--视图

    读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...

  7. 《MySQL 必知必会》读书总结

    这是 <MySQL 必知必会> 的读书总结.也是自己整理的常用操作的参考手册. 使用 MySQL 连接到 MySQL shell>mysql -u root -p Enter pas ...

  8. 《SQL必知必会》学习笔记(一)

    这两天看了<SQL必知必会>第四版这本书,并照着书上做了不少实验,也对以前的概念有得新的认识,也发现以前自己有得地方理解错了.我采用的数据库是SQL Server2012.数据库中有一张比 ...

  9. SQL 必知必会

    本文介绍基本的 SQL 语句,包括查询.过滤.排序.分组.联结.视图.插入数据.创建操纵表等.入门系列,不足颇多,望诸君指点. 注意本文某些例子只能在特定的DBMS中实现(有的已标明,有的未标明),不 ...

  10. .NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查（实战）

    Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为必知必会.尽管这一系列是使用.NET/C# ...

随机推荐

  1. 解决vuex“状态管理调用报错”报错为："Uncaught ReferenceError: mapactions is not defined"

    报错: 源码: <script> import Vuex from 'vuex'; import {mapActions,mapGetters} from 'vuex'; // conso ...

  2. python读取Excel文件的操作

    ①通过xlutils在已有表中写数据(这种方法会改变excel的样式) import xlrd,xlwt from xlutils.copy import copy 将已存在的Excel表格赋值给变量 ...

  3. css 径向渐变实现渐变小圈

    效果如下图: 代码如下: .b-list .ceil .line { height: 20px; width: 100%; margin: 0 auto; background: radial-gra ...

  4. JS中Promise

    Promise的作用: Promise是异步微任务,解决了异步多层嵌套回调的问题,让代码的可读性更高,更容易维护. Promise如何使用: Promise是ES6提供的一个构造函数,可以使用Prom ...

  5. 项目实训 DAY17-18

    第一天,与后端的同学交接,先跟他说了怎么安装依赖库,弄完后他那边运行有些问题. 第二天,后端的同学说可以运行但无法部署,我思考后一起商量着只做静态模型(本身不同的两张图片只有input有区别),然后添 ...

  6. 【逆向】使用IDA Python脚本自动化解密字符串数据

    前言 一个肚脑虫(Donot)APT组织的下载器样本,样本中的一些关键字符串数据需要使用指定函数进行动态解密.所以正好借此机会记录下怎么使用IDA Python脚本来解密字符串数据.使用IDA Pyt ...

  7. 微信小程序开发遇到的注意事项及奇怪事

    1.wx.uploadFile上传文件时只支持本地文件(相册或者拍摄的),网络文件不可以,可以将网络文件用wx.downloadFile下载到本地在下载,下载以后会返回一个微信临时地址然后再下载 2. ...

  8. SpringBoot整合其他框架

    SpringBoot整合Junit 实现步骤 搭建SpringBoot工程 引入starter-test起步依赖 编写测试类 添加测试相关注解 @RunWith(SpringRunner.class) ...

  9. Java自增自减运算符

    3.1自增自减运算符 注意事项: ++和--既可以放在变量的后边,也可以放在变量的前边 单独实用的时候,++和--无论是放在变量的前边还是后边,结果是一样的 参与操作的时候,如果放在变量的后边,先拿变 ...

  10. ubuntu安装xface

    Gnome.KDE.XFACE桌面环境安装和卸载 出自Ubuntu中文 安装桌面环境 (一)在终端中运行安装: 1.安装XFACE: sudo apt-get install xubuntu-desk ...