CSS必知必会
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
|
图片大小 |
| 属性 | 值 |
| 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必知必会的更多相关文章
- 2015 前端[JS]工程师必知必会
2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...
- [ 学习路线 ] 2015 前端(JS)工程师必知必会 (2)
http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaig ...
- 读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 读书笔记--SQL必知必会--建立练习环境
书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL in 10 Minutes - Fourth Edition> MyS ...
- 读书笔记--SQL必知必会12--联结表
12.1 联结 联结(join),利用SQL的SELECT在数据查询的执行中联结表. 12.1.1 关系表 关系数据库中,关系表的设计是把信息分解成多个表,一类数据一个表,各表通过某些共同的值互相关联 ...
- 读书笔记--SQL必知必会18--视图
读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...
- 《MySQL 必知必会》读书总结
这是 <MySQL 必知必会> 的读书总结.也是自己整理的常用操作的参考手册. 使用 MySQL 连接到 MySQL shell>mysql -u root -p Enter pas ...
- 《SQL必知必会》学习笔记(一)
这两天看了<SQL必知必会>第四版这本书,并照着书上做了不少实验,也对以前的概念有得新的认识,也发现以前自己有得地方理解错了.我采用的数据库是SQL Server2012.数据库中有一张比 ...
- SQL 必知必会
本文介绍基本的 SQL 语句,包括查询.过滤.排序.分组.联结.视图.插入数据.创建操纵表等.入门系列,不足颇多,望诸君指点. 注意本文某些例子只能在特定的DBMS中实现(有的已标明,有的未标明),不 ...
- .NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查（实战）
Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为必知必会.尽管这一系列是使用.NET/C# ...
随机推荐
- create-react-app卸载与升级
用create-react-app 创建项目发现报错 You are running `create-react-app` 4.0.3, which is behind the latest rele ...
- POJ 1830 开关问题 异或高斯消元
题目链接 将题目转化为矩乘问题 构建一个 \(n \times n\) 的开关信息矩阵,其中第 \(i\) 列第 \(j\) 行的元素为 \(0 / 1\) 代表在改变开关 \(i\) 的情况下开关 ...
- MySQL-explain详解说明
1.Explain介绍 在日常工作中, 我们会有时会开慢查询去记录一些执行时间比较久的SQL语句, 找出这些SQL语句后我们常常会用explain这个命令来查看一个这些SQL语句的执行计划, 查看该S ...
- 【STM32】NVIC嵌套中断向量控制器与外部中断
两种优先级 抢占优先级PreemptPriority:中断服务函数正在执行时,抢占优先级高的可以打断抢占优先级低的,实现中断的嵌套,相当于51的"高优先级" 响应优先级(子优先级) ...
- CCF 202006-1 线性分类器
#include <iostream> #include <bits/stdc++.h> #include <string> using namespace std ...
- C语言II一作业02
1.作业头 | 这个作业属于哪个课程 | < https://edu.cnblogs.com/campus/zswxy/SE2020-3> | | ---- | ---- | ---- | ...
- TensorFlow架构
Tensorflow基本信息 Tensorflow所需处理器 CPU,GPU,TPU(Google为AI研发的专用芯片) 平台 Windows,Linux,Android,iOS,Raspberry ...
- Tesstwo9.1.0配置步骤
一,配置步骤 环境:Tesstwo9.1.0+Android10(华为)+Android11(模拟器) 1.查看tess-two的最新版本(GitHub - rmtheis/tess-two: For ...
- 解决 vue init webpack 报错问题 报错原因是因为不能执行脚本文件。
解决方案: 运行下面一行代码: set-ExecutionPolicy RemoteSigned
- vue项目中 vscode 保存时自动格式化设置，保持单引号和去除多余分号、逗号
1.settings.json中添加: "prettier.semi": false, // 取消自动加分号 "prettier.singleQuote": t ...