前端学习随笔3 在线简历美化

一心得体会

今天的任务是通过给简历加样式来初步了解css的语法、选择器、层叠与继承以及其是怎样运作的等等，在此次课程中，我们不要求记牢每个css特性，但是我们需要对其有个初步的概念。与此同时，我们应该检查教程的版本，力争看到的是最新的版本，因为前端技术更新迭代十分迅速，以前很多属性都已弃用，新的版本也新增了许多属性，因此学习最新课程十分有必要。当前css版本为css3，推荐去MDN观看最新文档，书籍的话可以看看《css权威指南第三版》。
编程时有一点十分重要：一定要多写注释！一定要多谢注释！一定要多谢注释！（重要的事情所三遍）刚开始写代码的时候你可能知道当前写的是什么东西，代表什么含义，但是到写到后面经常会忘掉前面写的内容以及当时的思路，同时初学者也还没形成规范统一的编程风格，所以注释就显得十分重要，尽管写注释会花一些时间，但是却很有必要！

二相关知识点

问题1 什么是CSS，CSS是如何工作的

css全称cascading style sheets，中文译名层叠样式表，通过css中的选择器、属性及属性值来修改html中元素的默认样式，得到我们预想的样式。其工作原理如下图

css.png

问题2 内联样式内部样式表外部样式表的联系与区别以及优缺点

内联样式：存在于开始标签中，样式属性键值对最为属性style的值，仅作用于当前标签。


示例

内部样式表：存在于当前文档中，存放在中的




示例

外部样式表：样式单独保存为一个文件，以.css为文件类型，HTML文档需要通过链接引入该文件才能生效，可作用于多个文档。


div {
  color:blue; 
  font-size:20px;
}



  


  示例

各自优缺点见下表

样式类型	优点	缺点
内联样式	不影响其他元素的样式	后期需单独维护，十分不便（十分不推荐）
内部样式表	在不能修改.css文件时修改方便	不同页面更新时需要修改多个位置
外部样式表	方便维护	全局样式可能会引起不必要的样式修改

问题3 CSS的基本语法是怎样的

这里我们需要搞清楚三个概念：选择器，属性，属性值。

选择器就是选择需要修改样式的元素
属性就是需要修改的样式名称，例如width，color，padding等
属性值就是样式的值，例如width的值可能时200px或者100%等

MDN给了一个图示很好的解释了css的基本语法

css语法.png

问题4 CSS选择器是什么概念，有哪些类型

选择器就是选择需要修改样式的元素。那么问题来了，我们以什么标准来选择与之匹配的元素呢？继续往下看。

简单选择器：基于元素类型（或其class或id）直接匹配文档中的一个或多个元素。
这是我们用的最多的选择器类型。
一般来说，元素类型选择器（直接使用元素如p做选择器）适合基础性样式的修改，用来重置默认样式；class选择器（以.class名做选择器）适合需要使用相同样式的元素，这也是最长使用的选择器；id选择器（以#id名做选择器）适合唯一需要使用该样式的元素，通常我们不是很推荐这种使用方式，跟不推荐内联样式一样。
注：还有一个通用选择器（以*做选择器），其允许给页面中每一个元素添加样式，尽量不要使用，因为其会使页面加载变慢，影响页面性能。
属性选择器：通过元素的属性来匹配文档中的一个或多个元素。
其有以下三种方式：

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

伪类及伪元素
伪类以冒号(:)作为前缀，添加在选择器后面，再特定状态下样式生效，下面是一个例子


点击跳转

/*链接标签初始样式*/
a{
  color: blue;
  font-weight: bold;
}
/*链接悬停时样式*/
a：hover{
  color: yellow;
}
/*链接访问过后样式*/
a：visited{
  color: green;
}

在这里不全部展现所有伪类，仅展示其用法。
伪元素语法跟伪类有一点像，只不过其使用两个冒号(::)，其有个特殊的用法是可以添加一个不存在的元素，使用::after或者::before实现。

组合选择器：用过以上选择器组合使用
组合选择器也是我们经常使用的，用于不同的样式需求。值得注意的时相邻兄弟选择器和通用兄弟选择器的细微区别，这两个组合选择器虽然不常用，但是在特定情境下效果显著。

css选择器组.png

问题5 文本样式都有哪些相关属性，对应哪些值？

文本样式就是text styles，其包含两个部分：字体属性和文本属性。
字体属性针对于每个字，主要属性有：

font-family: serif; (字体)
font-size:18px; (大小)
font-style:italic; (样式/斜体)
font-weight:bold; (字重/粗)
line-height:20px; (行高)

文本属性针对于当前文本段落，主要属性有：

text-indent:5px; (缩进)
text-align:center; (水平对齐)
direction:rtl; (文本方向/right to left)
text-decoration:underline; (文本描述)
letter-spacing:2px; (字母间距)
word-spacing:4px; (字间距)
text-transform:capitalize; (大小写转换/每个单词首字母大写)
white-space:nowrap; (空白符处理/不换行)
text-overflow:ellipsis; (文本超出显示形式)
text-shadow:3px 3px 3px blue; (文本阴影/水平偏移，竖直偏移，模糊值，颜色)

问题6 超出框的文本显示省略号如何实现？


.box {
    width:300px;
    height: 100px;
    border: 1px solid #000;
    overflow: hidden;     /*超出部分隐藏*/
    white-space: nowrap;    /*不换行*/
    text-overflow:ellipsis; /*超出部分以省略号表示*/
}


    测试超出框文本便省略号（括号内容为测试内容把啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦）

测试效果如下图：

css测试.png

前端学习随笔3 在线简历美化

一 心得体会

二 相关知识点