学习目标：

学习如何将 web 字体应用到web页面，使用第三方服务，编写自己的代码。
掌握字体溢出处理，和字体方向设置
掌握 CSS 层次选择器，伪类选择器含义和用法
实践并掌握 CSS 的颜色、字体、圆角边框等样式的定义方式
实践并掌握掌握外边距，内边距设置
实践并掌握列表和链接的样式美化。

学习内容：

字体

1.Web字体

web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。

Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。

首先，在CSS的开始处有一个@font-face块，它指定要下载的字体文件：

@font-face {font-family: "myFont";src: url("myFont.ttf");
}

在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

html {font-family: "myFont", "Bitstream Vera Serif", serif;
}

2.CSS布局--溢出

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。

overflow: visible：默认情况下，溢出是可见的(visible)，这意味着它不会被裁剪，而是在元素框外渲染
overflow: hidden：如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏
overflow: scroll：如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）
overflow: auto：auto 值类似于 scroll，但是它仅在必要时添加滚动条
overflow-x 和 overflow-y：overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出

外边距&内边距

1.外边距margin

margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。

语法：

/* 应用于所有边 */
margin: 1em;
margin: -3px;/* 上边下边 | 左边右边 */
margin: 5% auto;/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

margin 属性接受 1~4 个值。每个值可以是 <length>(以固定值为外边距)，<percentage>(相对于包含块的宽度，以百分比值为外边距)，或 auto(让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中)。取值为负时元素会比原来更接近临近元素。

当只指定一个值时，该值会统一应用到全部四个边的外边距上。
指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

Tips：

在现代浏览器中实现水平居中，可以使用 display: flex; justify-content: center;。

不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。

2.内边距padding

padding： CSS 简写属性控制元素所有四条边的内边距区域。

一个元素的内边距区域指的是其内容与其边框之间的空间。

该属性是以下属性的简写：

padding-bottom
padding-left
padding-right
padding-top

语法：

/* 应用于所有边 */
padding: 1em;/* 上边下边 | 左边右边 */
padding: 5% 10%;/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;/* 全局值 */
padding: inherit;
padding: initial;
padding: unset;

padding 属性接受 1~4 个值。每个值可以是 <length>(以固定值为内边距) 或 <percentage>(相对于包含块的宽度，以百分比值为内边距)。取值不能为负。

当只指定一个值时，该值会统一应用到全部四个边的内边距上。
指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。

CSS列表

HTML 列表和 CSS 列表属性

在 HTML 中，列表主要有两种类型：

无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表属性使您可以：

为有序列表设置不同的列表项标记
为无序列表设置不同的列表项标记
将图像设置为列表项标记
为列表和列表项添加背景色

不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

ul.a {list-style-type: circle;
}ul.b {list-style-type: square;
}ol.c {list-style-type: upper-roman;
}ol.d {list-style-type: lower-alpha;
}

图像作为列表项标记

list-style-image 属性将图像指定为列表项标记：

ul {list-style-image: url('sqpurple.gif');
}

定位列表项标记

list-style-position 属性指定列表项标记（项目符号）的位置。

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的：

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：

删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0

ul {list-style-type: none;margin: 0;padding: 0;
}

列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

在使用简写属性时，属性值的顺序为：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

ul {list-style: square inside url("sqpurple.gif");
}

设置列表的颜色样式

我们还可以使用颜色设置列表样式，使它们看起来更有趣。

添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表，而添加到 <li> 标记的属性将影响各个列表项：

ol {background: #ff9999;padding: 20px;
}ul {background: #3399ff;padding: 20px;
}ol li {background: #ffe5e5;padding: 5px;margin-left: 35px;
}ul li {background: #cce5ff;margin: 5px;
}

链接

链接状态

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的伪类来应用样式:

Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。
Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。
Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus() (en-US)) 它可以使用 :focus 伪类来应用样式。
Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。

如果为多个链接状态设置样式，请遵循如下顺序规则：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

样式化链接

text-decoration 属性主要用于从链接中删除下划线；

background-color 属性可用于指定链接的背景色；

组合多个 CSS 属性，将链接显示为框/按钮：

a:link, a:visited {background-color: #f44336;color: white;padding: 14px 25px;text-align: center; text-decoration: none;display: inline-block;
}a:hover, a:active {background-color: red;
}

在链接中包含图标

<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

body {width: 300px;margin: 0 auto;font-family: sans-serif;
}p {line-height: 1.4;
}a {outline: none;text-decoration: none;padding: 2px 1px 0;
}a:link {color: blue;
}a:visited {color: purple;
}a:focus, a:hover {border-bottom: 1px solid;
}a:active {color: red;
}a[href*="http"] {background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;background-size: 16px 16px;padding-right: 19px;
}

层此选择器

1.CSS后代选择器

后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

2.CSS子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

3.CSS相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

<div><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol>
</div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

4.通用兄弟选择器

兄弟选择符，位置无须紧邻，只须同层级，A~B选择A元素之后所有同层级B元素。

语法：

former_element ~ target_element { style properties }

示例

p ~ span {color: red;
}

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>

效果

This is not red.

Here is a paragraph.

Here is some code.And here is a span.

学习产出：

1.用 writing-mode 进行创意排布布局,实现类似报纸排版的文章

<hr class="firstLine"><div class="moby"><h2>Title Loomings</h2><div class="box"><p>Call me Ishmael. Some years ago- never mind how long precisely- having little or no money in my purse,andnothing particular to interest me on shore, I thought I would sail about a little and see the waterypart ofthe world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I findmyself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I findmyself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet;andespecially whenever my hypos get such an upper hand of me, that it requires a strong moral principle toprevent me from deliberately stepping into the street, and methodically knocking people's hats off-then, Iaccount it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With aphilosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothingsurprising in this. If they but knew it, almost all men in their degree, some time or other, cherishverynearly the same feelings towards the ocean with me.</p><p>There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs-commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extremedowntown isthe battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previouswere out of sight of land. Look at the crowds of water-gazers there.</p></div></div>

@font-face {font-family: "myFont";src: url("ArchitectsDaughter-Regular.ttf");
}
.firstLine{border: 0.5px solid rgb(77, 178, 236);
}
.moby{font-family: "myFont", serif;display: flex;flex-direction: row;justify-content: center;
}
.moby h2{color: rgb(77, 178, 236);writing-mode: vertical-rl;width: 40px;height: 450px;font-size: 60px;
}
.box p{width: 480px;
}
p + p{/* margin-left: 140px; */width: 480px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;
}

2.自己编码练习，利用链接结合伪类选择器生成如下图所示图形

<div id="content"><h1>CSS TEMPLATES using border radius</h1><div class="linkBox"><div class="blue">Blue</div><div class="triangle"><span class="text">TRIANGLE</span></div><div class="ex"><div class="in">Red</div></div></div>
</div>

#content{width: auto;border: 1px solid black;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
#content h1{font-size: 25px;
}
.linkBox{margin: 0px 50px;display: flex;flex-direction: row;justify-content: space-between;
}
.blue{width: 200px;height: 200px;border-radius: 50%;margin-right: 50px;margin-bottom: 20px;background-color: rgb(77, 178, 236);display: flex;align-items: center;justify-content: center;color: white;
}
.triangle{width:0;height:0;border: 100px solid;border-color: red yellow green blue;margin-bottom: 20px;margin-right: 50px;display: flex;align-items: center;justify-content: center;color: white;
}
.ex{width: 200px;height: 200px;background-color: red;border-radius: 50%;
}
.in{width: 100px;height: 100px;border-radius: 50%;background-color: white;position: relative;top: 50px;left: 50px;display: flex;align-items: center;justify-content: center;/* margin-right: 50px; */
}

3.自己编码练习，利用链接结合伪类选择器生成按钮

<div class="btnBox"><a href="#" class="default">Default</a><a href="#" class="danger">Danger</a><a href="#" class="success">Success</a><a href="#" class="info">Info</a><a href="#" class="warning">Warning</a><a href="#" class="primary">Primary</a>
</div>

.btnBox{width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 20px;
}
.default{text-decoration: none;border: 1px solid rgb(204, 203, 203);color: gray;width: 200px;height: 80px;border-radius: 10px;display: flex;justify-content: center;align-items: center;
}
.default:hover{background-color: rgb(204, 203, 203);text-decoration: underline;
}
.danger{text-decoration: none;background-color: red;color: white;width: 200px;height: 80px;border-radius: 10px;display: flex;justify-content: center;align-items: center;
}
.danger:active{background-color: rgb(170, 38, 38)
}
.success{text-decoration: none;background-color: rgb(67, 98, 201);color: white;width: 200px;height: 80px;border-radius: 10px;display: flex;justify-content: center;align-items: center;
}
.success:active{background-color: blue;
}
.info{text-decoration: none;border: 1px solid rgb(34, 194, 146);color: rgb(24, 148, 111);width: 200px;height: 80px;border-radius: 10px;display: flex;justify-content: center;align-items: center;
}
.info:hover{background-color: rgb(34, 194, 146);
}
.warning{text-decoration: none;border: 1px solid rgb(218, 154, 18);color: rgb(185, 135, 26);width: 200px;height: 80px;border-radius: 10px;display: flex;justify-content: center;align-items: center;
}
.warning:hover{background-color: rgb(218, 154, 18)
}
.primary{text-decoration: none;background-color: rgb(23, 190, 135);color: white;width: 200px;height: 80px;border-radius: 30px;display: flex;justify-content: center;align-items: center;
}
.primary:active{background-color: rgb(28, 134, 95);
}

4.实现导航栏TAB切换效果

<div class="box"><ul class="nav"><li class="navI"><input class="navI-radio" name="nav" type="radio" id="kc" checked><label class="navI-tit" for="kc">课程</label>            <p class="navI-txt">课程内容</p></li><li class="navI"><input class="navI-radio" name="nav" type="radio" id="xx"><label class="navI-tit" for="xx">学习计划</label>            <p class="navI-txt ml1">学习计划内容</p></li><li class="navI"><input class="navI-radio" name="nav" type="radio" id="jn"><label class="navI-tit" for="jn">技能图谱</label>            <p class="navI-txt ml2">技能图谱内容</p></li></ul>
</div>

ul{margin: 0;padding: 0;list-style: none;
}
input{margin: 0;width: 0;
}
.box a{text-decoration: none;color:inherit;
}
.box{width: 572px;border: 1px solid #999;overflow: hidden;margin-top: 20px;
}
.nav{margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;
}
.navI{float: left;width: 33.333%;box-sizing: border-box;
}
.navI-tit{display:block;line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;
}
.navI-txt{position:relative;width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;margin: 0px;
}
.ml1{margin-left: -100%;
}
.ml2{margin-left: -200%;
}
/*重点代码*/
.navI-radio{display:none;
}
.navI-radio:checked + .navI-tit{background:#fff;border-bottom:none;
}
.navI-radio:checked ~ .navI-txt{z-index:1;
}

CSS基础--美化视觉效果相关推荐

CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
CSS基础必备知识点01
CSS基础必备知识点 CSS(Cascading Style Sheme), 层叠样式表或级联样式表,简称样式表.它的作用是给HTML网页设置外观或者样式.其中外观或者样式指的是:HTML网页中的文字 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
前端笔记 | CSS基础
CSS基础一.CSS简介 1.1 HTML的局限性 1.2 CSS的作用 1.3 CSS语法规范 1.4 CSS代码风格二.CSS基础选择器 2.1 CSS选择器的作用 2.2 选择器的分类 2. ...
全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式行内样式内部样式外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...
CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}
1.CSS的作用: 通过css达到美化网页的效果 2.选择器: ✔ 基础选择器(重点) ◆标签选择器(重点学习) ◆类选择器(重点学习) ◆ID选择器 ◆通配符选择器 ✔ 复合选择器(重点) ◆后代选 ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表学习目标理解 css的目的作用 css的三种引入方式应用 css三种引用方式的书写通 ...
H5前端学习之一HTML和CSS基础认识
前言我是一个转行的前端小白,大专非计算机专业毕业,所以对计算机很不擅长,但是对信息技术的好奇,让我对技术党尤为崇拜,既然好奇代码和崇拜技术,不如成为它!所以我来学习了当前教主流的--前端.初学前端, ...
js给html设置背景音乐,最简单最快的方法给H5页面添加背景音乐播放（css样式美化）...
看了很多场景应用,右上角总是会有一个音频按钮,会播放音乐,现在通过简单几步就可以实现这个功能. 1.先上基础的html,定位用了fixed(source 标签里面对应的音频链接换为自己的音频连接) 2 ...

CSS基础--美化视觉效果