百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第三天

作者李博课程第三天:让简历有点色彩326次浏览02019-05-23 16:50

1.什么是CSS,CSS是如何工作的

CSS指的是层叠样式表,其中样式定义了如何显示html元素,而层叠是指将多重样式层叠为一个,每个样式表都是由一系列规则组成的。

在浏览器显示文档(网页)的时候,它必须要把文档(网页)的内容和它的样式相结合,然后再转化为DOM。最后浏览器显示 DOM 的内容。

2.CSS的基本语法是怎样的

规则结构都有两个基本部分:选择器声明块

选择器定义了将影响文档中的哪个部分。

声明块由一个或多个声明组成,每个声明都是一个属性-值对

3.CSS选择器是什么概念,简单选择器和属性选择器是什么

选择器:用来选择我们想要样式化的HTML元素标签。

简单选择器:通过元素的类型、class或者id 匹配一个或多个元素。

属性选择器:通过 属性 / 属性值 匹配一个或多个元素。

4.文本样式都有哪些相关属性,对应哪些值

color 属性,设置文本颜色

color_name 规定颜色值为颜色名称的颜色(比如 red)。

p{color: red;}

hex_number 规定颜色值为十六进制值的颜色(比如 #ff0000)。

p{color: #ff0000}

rgb_number 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。

p{color: rgb(255,0,0)}

direction 属性,设置文本方向。

ltr 默认。文本方向从左到右。

rtl 文本方向从右到左。

div{direction: rtl}

line-height 属性,设置行高

normal 默认。设置合理的行间距。

number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。

p{line-height: 2}

length 设置固定的行间距。

p{line-height: 10px}

% 基于当前字体尺寸的百分比行间距。

p{line-height: 90%}

letter-spacing ,设置字符间距:

normal 默认。规定字符间没有额外的空间。

length 定义字符间的固定空间(允许使用负值)。

h1{letter-spacing: 2px}
h2{letter-spacing: -3px}

text-align 属性,对齐元素中的文本

left 把文本排列到左边。默认值:由浏览器决定。

h2{text-align: left}

right 把文本排列到右边。

h3{text-align: right}

center 把文本排列到中间。

h1{text-align: center}

justify 实现两端对齐文本效果。

h3{text-align: justify}

text-decoration 属性,向文本添加修饰

none 默认。定义标准的文本。

underline 定义文本下的一条线。

h3{text-decoration: underline}

overline 定义文本上的一条线。

h1{text-decoration: overline}

line-through 定义穿过文本下的一条线。

h2{text-decoration: line-through}

blink 定义闪烁的文本。

h4{text-decoration: blink}

text-indent 属性,缩进元素中文本的首行

length 定义固定的缩进。默认值:0。

p{text-indent: 1cm}

% 定义基于父元素宽度的百分比的缩进。

p{text-indent: 10%}

text-transform 属性,控制元素中的字母

none 默认。定义带有小写字母和大写字母的标准的文本。

capitalize 文本中的每个单词以大写字母开头。

 p{text-transform: capitalize}

uppercase 定义仅有大写字母。

h1{text-transform: uppercase}

lowercase 定义无大写字母,仅有小写字母。

p{text-transform: lowercase}

white-space 属性,设置元素中空白的处理方式

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre>标签。

p{white-space: pre}

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

p{white-space: nowrap}

pre-wrap 保留空白符序列,但是正常地进行换行。

p{white-space: pre-wrap}

pre-line 合并空白符序列,但是保留换行符。

p{white-space: pre-line}

word-spacing 属性,设置字间距

normal 默认。定义单词间的标准空间。

length 定义单词间的固定空间。

p{word-spacing: 10px;}
p{word-spacing: -0.5em;}
0条评论