(9)CSS 给盒子、背景、链接、列表、表单、表格等加样式

本知识学习用时:5小时,总第47/10000小时

前言:通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。不止 10 个大佬曾说过:整个前端的学习, HTML 和 CSS 才是最难学的,后边的 JS 等虽“号称”是真正意义上的编程,但学习过程却是呈“线性”平滑上升的。CSS 则不然,他总是给你一种:“哎哟,我掌握了哦,很简单嘛!”、“我**,怎么会这样,水太深了!”、“哦哦,原来是这个原理,我就说嘛!”……如此周而复始,虽不能说“生生不息”,但 CSS 的学习真的是一件细水长流的事。

那这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。

这篇的所有知识点为必掌握项,我们学习的时候可以先自己按要求写出样式,然后参照我的代码,把一行行全部弄懂。

一、CSS 实现如下边框效果

参考代码:

html

css

二、CSS 实现如下边框、按钮效果

参考代码:

html

css

三、CSS 实现如下两个表格效果

参考代码:

html

css

⚠️注释:结构选择器

第一类:

第二类:

❓例:试着运行以下代码,并对结果作出解释。

html

css

答:

以上 html 结构为

1.

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

2.

匹配类名为 box 的元素的父元素下使用“同种标签”的“第一个”标签元素。①③④ 使用的是

,②⑤ 使用的是

标签。故选同种标签的第一个,① ② 生效;

3.

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

4.

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

四、CSS 实现如下三角形

参考代码:

html

css

五、CSS 对边框做圆角、圆形

参考代码:

html

css

六、CSS 给盒子加个“背景”

-- 需要注意的:

加个“背景”就是加个图片,这个图片是背景图片,背景图片相当于这个元素是一个窗口,而背景图片就是这个窗口后的风景。

假如这个窗口没有了,那这个背景图片也可能看不到,比如没有 height ,就没有窗口:

html

css

还有一个明显的例子:对于 span 他这个里边没有内容就代表着他没有宽度。当然就什么也没有。你稍微加一点文字,也会显示出来。

html

css

-- 对于 background-size 需要知道的:

background-size 的设置是去拉伸背景图片(给图片加一个长度的范围)以适应给定的“宽高”尺寸。

① 设置绝对长度值。

html

css

② 设置为 50% ,就代表窗口宽度的一半。

③ 设置为 contain ,缩放背景图片以完全装入背景区,可能背景区部分空白。代表不管你背景图片多么的异型,我们这个窗口都可以把你给包围起来。

④ 设置 cover ,缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。

-- css sprite 精灵图

css sprite 指将不同的图片、图标合并在一张图上。使用 css sprite 可以减少网络请求,提高网页加载性能——其实就是使用“背景图片”的方式来展示这些放在一张图上的小图标。

但由于图片的“可维护性”很差,现在一般都会选择用“字体图标”——在文章 《

(5)CSS 给文本加样式——① 字体属性》中有详细讲解。

制作精灵图的网站:CSS Sprites Generator(谷歌直接搜索)

图片压缩网站:tinypng (谷歌直接搜索)——————TinyPNG 使用智能有损压缩技术来减少 PNG文件的文件大小,提高网站加载性能。

七、CSS 如何实现:单行文本溢出加 ...

html

css

后记:CSS 能做的事情还有很多,上边介绍的都是实际工作中的高频用法,属于必掌握。至于其他用法,我们要抱有敬畏之心去细水长流地认真学习,不必一蹴而就。

下篇,我们做一个小页面,把这之前学到的基础知识统统活用起来。加油!

欢迎继续关注下文 :

(10)CSS 做个小页面

(本文版权归 “公号 | Oli的前端一万小时” 所有,转载需说明来源)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180616G1KMD100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券