原创:itsOli @前端一万小时
本文首发于公众号「前端一万小时」
本文版权归作者所有,未经授权,请勿转载!
本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」
❗️❗️❗️以下链接为本文最新勘误篇章——《CSS 给盒子、背景、链接、列表、表单、表格等加样式》
1. 让一个元素“看不见”有几种方式?有什么区别?
2. 单行文本溢出加 ... 如何实现?
3. 如何在页面上实现一个圆形的可点击区域?
4. 解释下面代码的作用?字体里 5b8b4f53 代表什么?
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif;
}
5. 如何去除列表元素的默认样式前面的点 · ?
✅ list-style: none;
❌ text-decoration: none;
❌ opacity: 0;
❌ default-type: none;
上方面试题“参考答案详解”,请点击此处查看获取方式!
前言: 通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。
这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。
本篇的所有知识点为必掌握项,我们学习的时候可以先自己按要求写出样式,然后参照我的代码,把一行行全部弄懂。
1 CSS 实现如下边框效果
参考代码:
源码及效果展示
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p class="box1">
“UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
<p class="box2">
“UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
<p class="box3">
“UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
<p class="box4">
“UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
</body>
</html>
CSS
body {
width: 600px;
margin: 0 auto;
}
p {
margin-top: 30px;
line-height: 1.5;
padding: 18px 16px;
}
.box1 {
border: 1px solid #ccc;
border-radius: 3px;
/* 我们用 border-radius 给边框加“圆角” */
}
.box2 {
background-color: #ffe7e7;
border-left: 6px solid #f44336;
border-right: 7px solid #f44336;
}
.box3 {
background-color: #ffffd7;
border-top: 6px solid #ffeb3b;
border-bottom: 7px solid #ffeb3b;
}
.box4 {
background-color: #e7ffe7;
border: 1px solid #4CAF50;
border-bottom: 7px solid #4CAF50;
}
2 CSS 实现如下边框、按钮效果
参考代码:
源码及效果展示
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul class="btn">
<li><a class="btn-s" href=""> steal</a></li>
<li><a class="btn-y" href=""> yellow</a></li>
<li><a class="btn-o" href=""> orange</a></li>
<li><a class="btn-r" href=""> red</a></li>
<li><a class="btn-g" href=""> green</a></li>
</ul>
</body>
</html>
CSS
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
/*
以上这种常用的设置是为了把浏览器默认样式——margin、padding 所产生的缝隙给去掉,
以便后边我们自己加样式。
*/
ul {
list-style: none;
}
/* 这个是为了把列表前边的“小黑点”或“数字”去掉 */
a {
text-decoration: none;
}
/* 这个可以把 a 链接下边默认的”下划线“去掉” */
body {
text-align: center;
}
.btn>li {
display: inline-block;
/* 使列表变成“行内盒子”,让它展示成“一行” */
margin-top: 30px;
}
a {
display: inline-block;
/* 使“块盒子”显示为“行内盒子”,让它展示成“一行”。 */
padding: 8px 10px;
color: #000;
border-radius: 3px;
}
a:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*
隐藏或者透明元素的方法:
1. opacity: 0; 透明度为 0,整体都看不见了;
2. visibility: hidden; 这个和上边类似;
3. display: none; 消失,不占用位置;
4. background-color: rgba(0, 0, 0, 0.2); 只是背景色透明。
*/
.btn-s {
background-color: #009688;
color: #fff; /* 表示“白色” */
}
.btn-y {
background-color: #ff9800;
}
.btn-o {
background-color: #ffeb3b;
}
.btn-r {
background-color: #f44336;
color: #fff;
}
.btn-g {
background-color: #4CAF50;
color: #fff;
}
3 CSS 实现如下两个表格效果
参考代码:
源码及效果展示
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>前端一万小时</title>
</head>
<body>
<table class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>Bo</td>
<td>Nilsson</td>
<td>50</td>
</tr>
<tr>
<td>Mike</td>
<td>Ross</td>
<td>35</td>
</tr>
</tbody>
</table>
<table class="display display-1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>Bo</td>
<td>Nilsson</td>
<td>50</td>
</tr>
<tr>
<td>Mike</td>
<td>Ross</td>
<td>35</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS
body {
font-family: arial;
width: 600px;
margin: 0 auto;
/* 把 margin 设置为 0 auto,是我们让“块级元素”居中最常用的方法。 */
}
table {
margin-top: 30px;
}
.display {
border-collapse: collapse;
/*
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:
-- separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;
-- collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;
-- inherit:规定应该从父元素继承 border-collapse 属性的值。
*/
border-spacing: 0;
width: 100%;
border: 1px solid #ccc;
}
.display th {
color: #fff;
background-color: #4CAF50;
padding: 8px 8px;
font-weight: bold;
}
.display tr {
border-bottom: 1px solid #ddd;
text-align: left;
}
.display tr:nth-child(even) {
/* ❗️❗️❗️这里的”结构选择器“请看下边注释详解 */
background-color: #f1f1f1;
}
.display td {
padding: 8px 8px;
}
.display.display-1 {
border: none;
}
.display.display-1 th {
background-color: #fff;
color: #000;
}
❗️❗️❗️注释:结构选择器第一类:
1️⃣ 选择其父元素的第一个子元素。
E:first-child
2️⃣ 选择其父元素的最后一个子元素。
E:last-child
3️⃣ 选择父元素下第 n 个元素或奇偶元素,n 的值为:数字/odd/even。
E:nth-child(n)
第二类:
1️⃣ 选择父元素下使用同种标签的第一个标签元素。
E:first-of-type
2️⃣ 选择父元素下使用同种标签的最后一个标签元素。
E:last-of-type
3️⃣ 选择父元素下使用同种标签的第 n 个标签元素。n 的值为:数字/odd/even。
E:enth-of-type(n)
❓(用例子讲解):试着运行以下代码,并对结果作出解释。 源码及效果展示
HTML
<div class="container">
<div class="box">div.box</div>
<p class="box">p.box</p>
<div class="box">div.box</div>
<div class="box">
<div class="item">div.item</div>
<p class="item">p.item</p>
</div>
<p class="box"></p>
</div>
CSS
.box:first-child {
color: red;
}
.box:first-of-type {
background: blue;
}
.box :first-child {
font-size: 30px;
}
.box :first-of-type {
font-weight: bold;
}
答,以上 HTML 结构为:
1.
.box:first-child {
color: red;
}
匹配类名为 box 的元素的父元素的第一个子元素,为 ①,使其字体颜色为 red。① 生效;
2.
.box:first-of-type {
background: blue;
}
匹配类名为 box 的元素的父元素下使用“同种标签”的“第一个”标签元素。①③④ 使用的是 <div>
,②⑤ 使用的是 <p>
标签。故选同种标签的第一个,① ② 生效;
3.
.box :first-child {
font-size: 30px;
}
选择类名为 box 的后代元素的第一个子元素,加样式。 故 ⑥ 生效;
4.
.box :first-of-type {
font-weight: bold;
}
选择类名为 box 的后代元素同标签的第一个标签元素加样式。故 ⑥ 和 ⑦ 生效。
4 CSS 实现如下三角形
参考代码:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>前端一万小时</title>
</head>
<body>
<div class="t0"></div>
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="t4"></div>
<div class="t5"></div>
<div class="t6"></div>
</body>
</html>
CSS
- t0:
源码及效果展示
/*
CSS 画三角形原理:
边框颜色 border-color 四个值默认的加载方向是(上、右、下、左) top right bottom left。
*/
.t0 {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 100px;
border-color: blue yellow green red;
}
- t1:
源码及效果展示
.t1 {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 100px; /*
通过将 bottom 的 width 值设置为 0 来把多余的位置
去掉!
*/
border-color: blue transparent transparent transparent;
}
- t5:
源码及效果展示br/> 分析
以绿色的三角形为例,它的“高度”就是 CSS 中设置的 100px。而它的底边长则为:
我们可以看到,在绿色三角形中,从它的顶点垂直下来一条线将绿色三角形分为两个小的三角形:
1️⃣左边小三角形受 left 影响;
2️⃣右边小三角形受 right 影响。
由此,我们可以画出 t5 这个三角形的形状:
.t5 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 0; /* 由上边的图可以很清晰的得出各个边应该是多少 px! */
border-color: transparent transparent red transparent;
}
5 CSS 对边框做圆角、圆形
源码及效果展示
参考代码:
HTML
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
CSS
.circle-1 {
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 15px; /* border-radius 用于画圆角! */
}
.circle-2 {
margin-top: 30px;
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 10px 8px 6px 2px;
}
.circle-3 {
margin-top: 30px;
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 50px;
/* 大于等于宽高的一半 50px;或者为方便,直接 50%; */
}
6 CSS 给盒子加个“背景”
6.1 需要注意的
加个“背景”就是加个图片,这个图片是背景图片,背景图片相当于:这个元素是一个窗口,而背景图片就是这个窗口后的风景。
- 假如这个窗口没有了,那这个背景图片也可能看不到,比如没有 height,就没有窗口:
HTML
<div class="box"></div>
CSS
.box {
width: 200px;
height: 200px;
border: 1px solid;
background-image: url(https://qdywxs.github.io/css-images/css09-img01.jpg)
}
- 还有一个明显的例子:对于 span 它这个里边没有内容就代表着它没有宽度。当然就什么也没有。你稍微加一点文字,也会显示出来。
HTML
<span class="box"></span>
CSS
.box {
width: 200px;
height: 200px;
border: 1px solid;
background-image: url(https://qdywxs.github.io/css-images/css09-img01.jpg);
}
6.2 对于 background-size 需要知道的
background-size 的设置是去拉伸背景图片(给图片加一个长度的范围)以适应给定的“宽高”尺寸。
- ① 设置绝对长度值。
HTML
<div class="box"></div>
CSS
.box {
width: 200px;
height: 200px;
border: 1px solid;
background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;
background-size: 200px 200px;
}
- ② 设置为 50%,就代表窗口宽度的一半。
.box {
width: 500px;
height: 200px;
border: 1px solid;
background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;
background-size: 50%;
}
- ③ 设置为 contain,缩放背景图片以完全装入背景区,可能背景区部分空白。代表不管你背景图片多么的异型,我们这个窗口都可以把你给包围起来。
.box {
width: 500px;
height: 200px;
border: 1px solid;
background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;
background-size: contain;
}
- ④ 设置 cover,缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
.box {
width: 600px;
height: 200px;
border: 1px solid;
background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;
background-size: cover;
}
6.3 css sprite 精灵图
css sprite 指将不同的图片、图标合并在一张图上。使用 css sprite 可以减少网络请求,提高网页加载性能——实质上,就是使用“背景图片”的方式来展示这些放在一张图上的小图标。
但由于图片的“可维护性”很差,现在一般都会选择用“字体图标”——在文章 《CSS 给文本加样式:① 字体属性》中有详细讲解。
制作精灵图的网站:CSS Sprites Generator
图片压缩网站:tinypng
TinyPNG 使用智能有损压缩技术来减少 PNG 文件的文件大小,提高网站加载性能。
7 CSS 如何实现:单行文本溢出加 ...
7.1 前置知识:CSS 中的 overflow 属性
p {
overflow: 值;
}
7.2 代码实现
源码及效果展示
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>前端一万小时</title>
</head>
<body>
<div class="card">
<img src="https://qdywxs.github.io/css-images/css09-img02.jpg">
<h3><a href="#">Hello, Oli 的前端一万小时。</a></h3>
<p>“UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
</p>
</div>
</body>
</html>
CSS
.card{
width: 150px;
border: 1px solid #ccc;
font-size: 12px;
margin: 0 auto;
}
.card>img {
width: 150px;
}
.card>h3 {
padding: 0 10px;
white-space: nowrap; /* 1️⃣首先,强制文本不换行; */
overflow: hidden; /* 2️⃣其次,隐藏溢出; */
text-overflow: ellipsis; /* 3️⃣最后,对溢出的文本用 ellipsis 省略号代替。 */
}
/* 上边的三个属性必须连用才生效——单行文本溢出加 … */
.card>h3>a {
text-decoration: none;
color: red;
}
.card>p {
padding: 0 10px;
color: #666;
}
8 动手写出下边的页面
参考代码:br/> 源码及效果展示
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1 class="title">Oli's 前端一万小时</h1>
<p class="description">理论不懂就实践,实践不会就学理论</p>
<ul class="tab-ct">
<li><a class="btn" href="#">项目 1</a></li>
<li><a class="btn" href="#">项目 2</a></li>
<li><a class="btn" href="#">项目 3</a></li>
<li><a class="btn" href="#">项目 4</a></li>
<li><a class="btn" href="#">项目 5</a></li>
</ul>
<img class="work-img" src="https://qdywxs.github.io/css-images/css09-img03.jpg" alt="">
<ul class="operate-ct">
<li><a class="btn" href="#">查看源代码</a></li>
<li><a class="btn" href="#">使用说明</a></li>
</ul>
<p class="footer">
作者:<a href="#">Oli</a>
</p>
</body>
</html>
CSS
body,h1,h2,h3,h4,h5,h6,ul,li,p {
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul {
list-style: none;
}
body{
font-family: 14px/1.4 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', '5FAE8F6F96C59ED1', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;
/* 这里的 '5FAE8F6F96C59ED1' 就是“微软雅黑”这四个字的 Unicode 码 */
/*
我们怎么知道一个“字体”的 Unicode 码?
我们可以右键检查元素,然后点击 console,然后输入 escape(`黑体`),就可以弹出相应的码。
然后把 %u 换成 。
*/
background: #fff;
text-align: center;
}
.work-img {
width: 250px;
}
.btn {
display: inline-block;
padding: 4px 6px;
color: #fff;
background-color: #72b890;
border-radius: 3px;
}
.btn:hover {
opacity: 0.7;
/*
隐藏或者透明元素的方法:
1️⃣ opacity: 0; 透明度为 0,整体都看不见了;
2️⃣ visibility: hidden; 这个和上边类似;
3️⃣ display: none; 消失,不占用位置;
4️⃣ background-color: rgba(0,0,0,0.2); 只是背景色透明。
*/
}
.btn:active {
opacity: 1;
}
.title {
color: #87968e;
font-size: 35px;
margin-top: 30px;
}
.description {
color: #aaa;
margin-top: 10px;
opacity: 0.6;
}
.tab-ct {
margin-top: 30px;
}
.tab-ct>li {
display: inline-block;
margin: 0px 4px;
}
.work-img {
margin-top: 40px;
}
.operate-ct {
margin-top: 40px;
}
.operate-ct>li {
display: inline-block;
margin: 0 4px;
}
.footer {
color: #aaa;
margin: 30px;
}
a{
color: #72b890;
}
后记: CSS 能做的事情还有很多,上边介绍的都是实际工作中的高频用法,属于必掌握。至于其他用法,我们要抱有敬畏之心去细水长流地认真学习,不必一蹴而就。
祝好,qdywxs ♥ you!