2019-09-11 / 前端学习成长记录

记录前端学习----第十天

学习内容

结构伪类选择器（CSS3）
占位符选择器（CSS3）
属性选择器（CSS3）
CSS 书写顺序
CSS 初始化
项目页面头部的一些必要属性
@Web字体（拓展）
字体图标
项目的准备工作

1、结构伪类选择器

结构伪类选择器是 CSS3 的特性，其提供了更多的选择方法，但是为了保持兼容性，并不会经常使用。

E:first-child
选择父元素的第一个子元素E
E:last-child
选择父元素的最后一个子元素E
E:nth-child(n)
匹配父元素的第n个子元素E，假设该子元素不是E，则选择器无效。
E:nth-last-child(n)
匹配父元素的第n个子元素E，假设该子元素不是E，则选择器无效
E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E。
该选择器总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E。

2、占位符选择器（CSS3）

语法：E::placeholder, 修改占位符样式
用法示例如下：

<style>
	.test::placeholder {
		color: red;
	}
</style>
<body>
	<input type="text" class="test" placeholder="我是来占位置的" >
</body>

3、属性选择器（CSS3）

可以通过元素的属性进行选择，也是CSS3的特性
示例代码如下：

/*通过属性来选择标签*/
a[href] {
	color: red;
}
div[class] {
	color: pink;
}
/*通过完整的属性值，来选择标签*/
[href="abc.html"] {
	font-size: 50px;
	color: yellow;
}
[type="text"] {
	font-size: 30px;
	border: 1px solid red;
}
/*通过属性后边的值以某些字符开头来选择标签*/
[href^="a"] {
	font-size: 30px;
	color: orange;
}
/*通过属性后边的值以某些字符结尾来选择标签*/
[href$="1] {
	font-size: 50px;
	color: orange;
}
/*通过属性后边的值包含某些字符来选择标签*/
[href*="b"] {
	color: red;
	font-size: 100px;
}

4、CSS 书写顺序

.box {
	/*1、布局定位属性：display / position / float / clear / visibility / overflow （建议 display 第一个写，因为其与关系模式有关）*/
	display: inline-block;
	position: relative;
	float: left;
	/*2、自身属性：width / height / margin / padding / border / background */
	width: 300px;
	height: 300px;
	background-color: #ccc;
	/*3、文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word */
	color: red;
	font: 12px 'simsun';
	/*4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient ... */
	border-radius: 50%;
}

5、CSS 初始化

CSS 初始化的目的是统一结构，而且好处是可以预先定义一些常用样式，方便元素直接调用，减少工作和代码量。
一般需要初始化的标签有:

清除内外边距，body、ul、ol、dt、p、h1-h6、input 等
li默认列表符号 a标签默认下划线 img标签默认边框下边有几个像素空白缝隙的问题
input、textarea 等默认的轮廓线
设置版心，背景颜色，文字大小，浮动，清除浮动等常用属性

初始化内容可参考此文章，初识内容也会不定时增加更新CSS样式初始化

6、项目页面的一些必要头部属性

① 标题（搜索引擎关注点之一）用来设置一个网页的标题
<title>你好，世界</title>
② 网页描述（搜索引擎关注点之一）

<meta name="description" content="这是一个页面，是创造主的第一步">

③ 关键字（搜索引擎关注点之一）

<meta name="keywords" content="娱乐，游戏，开心，放松，益智">

④ 链入 icon 图标

<link rel="icon" href="favicon.ico">

⑤ 链入初始化文件

<link rel="stylesheet" href="css/base.css">

⑥ 链入头部和底部样式

<link rel="stylesheet" href="css/common.css">

⑦ logo 优化

logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1 里面在放一个连接，给链接一个大小和 logo 的背景图片
连接里面要放文字，但是文字不要显示出来，要用 text-indent 移到盒子外面（text-indent: -9999px）然后 overflow: hidden
最后给链接一个 title 鼠标悬浮提示文字

7、@Web字体（拓展）

字体格式：
不同浏览器所支持的字体是不一样的，一下有几个字体格式：

TureType(.ttf)格式
OpenType(.otf)格式
Web Open Font Format(.woff)格式
Embedded Open Type(.eot)格式
SVG(.svg)格式

8、字体图标（iconfont）

图片是由诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http"请求，这都会大大降低网页的性能，更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。
字体图标优点

可以做出跟图片一样可以做的事情，改变透明度、旋转度等。。。
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等...
本身体积更小，但携带的信息并没有削减。
几乎支持所有浏览器
移动端设备必备良药..

字体图标使用流程

总的来说字体图片如下流程：

① 设计字体图标
UI 设计人员会将设计好的图片保存为svg格式。
② 上传生成字体包
当UI设计完的svg文件时，需要转换成页面能使用的字体，而且需要生成的是兼容性的适合各个浏览器的。
推荐网站：http://icomoon.io

icomoon 字库
IcoMoon 成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，遗憾的是这是外国的服务器，速度比较慢
推荐网站：http://www.iconfont.cn/
阿里 icon font 字库
http://www.iconfont.cn/
这是阿里妈妈M2UX的一个icon font 字体图标字库，包含了淘宝图标库和阿里妈妈图标库，可以使用 AI 制作图标上传生成。免费的！

③ 下载兼容字体包
上传完毕后，网站会给我们吧UI做好的svg图片转换为需要的字体格式，然后下载就行。也可直接跳过前面步骤直接从网站上搜索需要的图标下载即可。

④ 字体引入到HTML
得到压缩包之后，最后一步也是最总要的一步引入步骤如下：

首先把以下4个文件放入到 fonts 文件夹里面。通俗的做法

第一步：在样式里面声明字体：告诉别人我们自己定义的字体

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

第二步：给盒子使用字体

span {
	font-family: "icomoon";
}

第三步：盒子里面添加结构

<span>&#xe648;</span>

9、项目的准备工作

要实现结构和样式相分离的设计思想
目录文件夹

名称	说明
项目文件夹	项目的名称
样式类图片文件夹	img
样式文件夹	css
产品类图片文件夹	upload
字体类文件夹	fonts
脚本文件夹	js

样式文件的分类

初始化 CSS 让浏览器风格统一公共样式
css 初始化文件，推荐使用 normalize.css
把一些公共的样式放入 common.css 里面。

(ﾟдﾟ)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃

昔洛的个人博客

Bug不空，誓不成佛