css_09 | CSS——CSS 给盒子、背景、连接、列表、表单、表格等加样式

时间 2019-11-06

标签 css 盒子背景连接列表表单表格样式栏目 CSS 繁體版

原文原文链接

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

css_09
复制代码

1. 让一个元素“看不见”有几种方式？有什么区别？
2. 单行文本溢出加 ... 如何实现？
3. 如何在页面上实现一个圆形的可点击区域？
4. 解释下面代码的做用？字体里 \5b8b\4f53 表明什么？
    body{
      font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    }

5. 如何去除列表元素的默认样式前面的点 · ？
  ✅ list-style: none;
  ❌ text-decoration: none;
  ❌ opacity: 0;
  ❌ default-type: none;
复制代码

前言： 经过前 8 篇文章基础知识的铺垫，咱们也算是见识了 CSS 的“神通广大”。css

这篇文章，咱们就把实际工做中最高频用到的“CSS 加样式”挨个列一列，用一行行代码来展现 CSS 是如何给“盒子”、“背景”、“连接”、“列表”、“表单”、“表格”等加样式的。html

本篇的全部知识点为必掌握项，咱们学习的时候能够先本身按要求写出样式，而后参照个人代码，把一行行所有弄懂。前端

1 CSS 实现以下边框效果

参考代码：
🔗源码及效果展现
HTMLgit

<p class="box1">
  “UI设计”和“前端代码实现”在实际工做中既像“冤家”又像“情人”。此号目的：把“冤家”、“情人”变成“内人”。前期我们聊基础，后期我们聊提升。 一切从零开始，一点一点到一万，一步一步作大佬！
</p>
<p class="box2">
  “UI设计”和“前端代码实现”在实际工做中既像“冤家”又像“情人”。此号目的：把“冤家”、“情人”变成“内人”。前期我们聊基础，后期我们聊提升。 一切从零开始，一点一点到一万，一步一步作大佬！
</p>
<p class="box3">
  “UI设计”和“前端代码实现”在实际工做中既像“冤家”又像“情人”。此号目的：把“冤家”、“情人”变成“内人”。前期我们聊基础，后期我们聊提升。 一切从零开始，一点一点到一万，一步一步作大佬！
</p>
<p class="box4">
  “UI设计”和“前端代码实现”在实际工做中既像“冤家”又像“情人”。此号目的：把“冤家”、“情人”变成“内人”。前期我们聊基础，后期我们聊提升。 一切从零开始，一点一点到一万，一步一步作大佬！
</p>
复制代码

CSSgithub

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面试

<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>
复制代码

CSSapi

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

<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>
复制代码

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;
}
复制代码

⚠️注释：结构选择器
第一类：bash

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 结构为

.box:first-child {
   color: red;
}
复制代码

匹配类名为 box 的元素的父元素的第一个子元素，为 ①，使其字体颜色为 red 。① 生效；

.box:first-of-type {
   background: blue;
}
复制代码

匹配类名为 box 的元素的父元素下使用“同种标签”的“第一个”标签元素。①③④ 使用的是 <div> ，②⑤ 使用的是 <p> 标签。故选同种标签的第一个，① ② 生效；

.box :first-child {
   font-size: 30px;
}
复制代码

选择类名为 box 的后代元素的第一个子元素，加样式。故 ⑥ 生效；

.box :first-of-type {
   font-weight: bold;
}
复制代码

选择类名为 box 的后代元素同标签的第一个标签元素加样式。故⑥ ⑦ 生效。

4 CSS 实现以下三角形

参考代码：
html

<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>
复制代码

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：

🏆分析

以绿色的三角形为例，它的“高度”就是 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 给文本加样式：① 字体属性》中有详细讲解。

💡制做精灵图的网站：CSS Sprites Generator

💡图片压缩网站：tinypng
TinyPNG 使用智能有损压缩技术来减小 PNG 文件的文件大小，提升网站加载性能。

7 CSS 如何实现：单行文本溢出加 ...

7.1 前置知识：CSS 中的 overflow 属性

p {
  overflow: 值;
}
复制代码

值	属性
visible	默认值。内容不会被修剪，会呈如今元素框以外。
hidden	内容会被修剪，而且其他内容是不可见的。
scroll	内容会被修剪，但浏览器会显示滚动条以便查看其他的内容。
auto	若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

7.2 代码实现

🔗源码及效果展现
html

<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>
复制代码

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 动手写出下边的页面

💡参考代码：
🔗源码及效果展现
html

<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>
复制代码

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', '\5FAE\8F6F\96C5\9ED1', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;

/*🚀这里的 '\5FAE\8F6F\96C5\9ED1' 就是“微软雅黑”这四个字的 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！