内容简介:前言:通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。本篇的所有知识点为必掌握项,我们学习的时候可以先自己按要求写出样式,然后参照我的代码,把一行行全部弄懂。
本文推荐 PC 端阅读~ 本文同步更新于: - 「公众号:前端一万小时」 - 「知乎:Oli's 前端一万小时」 本文版权归 “前端一万小时” 所有,未经授权,请勿转载! 复制代码
css_09 复制代码
前言:通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。
这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。
本篇的所有知识点为必掌握项,我们学习的时候可以先自己按要求写出样式,然后参照我的代码,把一行行全部弄懂。
1 CSS 实现如下边框效果
参考代码:
HTML
<p class="box1"> “UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬! </p> <p class="box2"> “UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬! </p> <p class="box3"> “UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬! </p> <p class="box4"> “UI设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬! </p> 复制代码
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; /*:rocket:我们用 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> 复制代码
CSS
body,h1,h2,h3,h4,h5,h6,ul,li,p { margin: 0; padding: 0; } /*:rocket:以上这种常用的设置是为了把浏览器默认样式——margin、padding 所产生的缝隙给去掉, 以便后边我们自己加样式*/ ul { list-style: none; } /*:rocket:这个是为了把列表前边的“小黑点”或“数字”去掉*/ a { text-decoration: none; } /*:rocket:这个可以把 a 链接下边默认的”下划线“去掉” */ body { text-align: center; } .btn>li { display: inline-block; /*:rocket:使列表变成“行内盒子”,让它展示成“一行”*/ margin-top: 30px; } a { display: inline-block; /*:rocket:使“块盒子”显示为“行内盒子”,让它展示成“一行”*/ 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); } /*:trophy:隐藏或者透明元素的方法: 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; /*:rocket:表示“白色”*/ } .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; /*:rocket:把 margin 设置为 0 auto ,是我们让“块级元素”居中最常用的方法*/ } table { margin-top: 30px; } .display { border-collapse: collapse; /*:rocket: 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) { /*:rocket:这里的”结构选择器“请看下边注释详解*/ background-color: #f1f1f1; } .display td { padding: 8px 8px; } .display.display-1 { border:none; } .display.display-1 th { background-color: #fff; color: #000; } 复制代码
:warning: 注释: 结构选择器
第一类:
:one: 选择其父元素的第一个子元素。 E:first-child :two: 选择其父元素的最后一个子元素。 E:last-child :three: 选择父元素下第 n 个元素或奇偶元素,n 的值为:数字/odd/even。 E:nth-child(n) 复制代码
第二类:
:one: 选择父元素下使用同种标签的第一个标签元素。 E:first-of-type :two: 选择父元素下使用同种标签的最后一个标签元素。 E:last-of-type :three: 选择父元素下使用同种标签的第 n 个标签元素。n 的值为:数字/odd/even。 E:enth-of-type(n) 复制代码
:question:(用例子讲解):试着运行以下代码,并对结果作出解释。
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; } 复制代码
:bulb:答:
以上 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:
/*:trophy: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; /*:rocket:通过将 bottom 的 width 值设置为 0 来达到把多于的位置去掉!*/ border-color: blue transparent transparent transparent; } 复制代码
- t5:
:trophy:分析
以绿色的三角形为例,它的“高度”就是 css 中设置的 100px 。而它的底边长则为:
我们可以看到,在绿色三角形中,从它的顶点垂直下来一条线将绿色三角形分为两个小的三角形:
:one:左边小三角形受 left 影响;
:two:右边小三角形受 right 影响。
由此,我们可以画出 t5 这个三角形的形状:
.t5 { width: 0; height: 0; boder-width: 0 100px 100px 0; /*:rocket:由上边的图可以很清晰的得出各个边应该是多少 px !*/ border-color: transparent transparent green 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; /*:rocket: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; /*:rocket:大于等于宽高的一半 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://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) } 复制代码
- 还有一个明显的例子:对于 span 它这个里边没有内容就代表着他没有宽度。当然就什么也没有。你稍微加一点文字,也会显示出来。
html
<span class="box"></span> 复制代码
css
.box { width: 200px; height: 200px; border: 1px solid; background-image: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg); } 复制代码
6.2 对于 background-size 需要知道的
background-size 的设置是去拉伸背景图片(给图片加一个长度的范围)以适应给定的“宽高”尺寸。
- ① 设置绝对长度值。
html
<div class="box"></div> 复制代码
css
.box { width: 200px; height: 200px; border: 1px solid; background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat; background-size: 200px 200px; } 复制代码
- ② 设置为 50% ,就代表窗口宽度的一半。
.box { width: 500px; height: 200px; border: 1px solid; background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat; background-size: 50%; } 复制代码
- ③ 设置为 contain ,缩放背景图片以完全装入背景区,可能背景区部分空白。代表不管你背景图片多么的异型,我们这个窗口都可以把你给包围起来。
.box { width: 500px; height: 200px; border: 1px solid; background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat; background-size: contain; } 复制代码
- ④ 设置 cover ,缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
.box { width: 600px; height: 200px; border: 1px solid; background: url(https://ws1.sinaimg.cn/large/006tNc79gy1g1xw4ao9vnj30e20d20zg.jpg) 0 0 no-repeat; background-size: cover; } 复制代码
6.3 css sprite 精灵图
css sprite 指将不同的图片、图标合并在一张图上。使用 css sprite 可以减少网络请求,提高网页加载性能——实质上,就是使用“背景图片”的方式来展示这些放在一张图上的小图标。
但由于图片的“可维护性”很差,现在一般都会选择用“字体图标”——在文章 《CSS——CSS 给文本加样式:① 字体属性》 中有详细讲解。
:bulb:制作精灵图的网站: CSS Sprites Generator
:bulb:图片压缩网站: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://ws4.sinaimg.cn/large/006tNc79gy1g1xwmg3rfsj30u00uykjl.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; /*:rocket::one:首先,强制文本不换行*/ overflow: hidden; /*:rocket::two:其次,隐藏溢出*/ text-overflow: ellipsis; /*:rocket::three:最后,对溢出的文本用 ellipsis 省略号代替*/ } /*:rocket:上边的三个属性必须连用才生效——单行文本溢出加 … */ .card>h3>a { text-decoration: none; color: red; } .card>p { padding: 0 10px; color: #666; } 复制代码
8动手写出下边的页面
:bulb:参考代码:
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://ws2.sinaimg.cn/large/006tNc79gy1g2dz1zw5faj30j60j60zj.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; /*:rocket:这里的 '\5FAE\8F6F\96C5\9ED1' 就是“微软雅黑”这四个字的 unicode 码*/ /*:rocket:我们怎么知道一个“字体”的 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; /*:rocket:隐藏或者透明元素的方法: :one: opacity: 0; 透明度为 0 ,整体都看不见了; :two: visibility: hidden; 这个和上边类似; :three: display: none; 消失,不占用位置; :four: 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 能做的事情还有很多,上边介绍的都是实际工作中的高频用法,属于必掌握。至于其他用法,我们要抱有敬畏之心去细水长流地认真学习,不必一蹴而就。
加油!
以上所述就是小编给大家介绍的《CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。