ife2018 零基础学院 day 3

ife2018 零基础学院 第三天:让简历有点色彩

什么是CSS,CSS是如何工作的!

摘自CSS如何工作

什么是CSS

CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。
文档通常是用标记语言结构化的文本文件 — HTML 是最常用的标记语言, 但你依然可以遇见一些其他的标记语言,比如 SVG 或者 XML。

CSS如何工作

当浏览器显示文档时,它必须将文档的内容与其样式信息结合。它分两个阶段处理文档:
1. 浏览器将 HTML 和 CSS 转化成 DOM (文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
2. 浏览器显示 DOM 的内容。
CSS工作流程图

CSS的基本语法是怎样的

摘自CSS 语法

属性和值组成一个声明,多个声明构成声明块,声明块和选择器构成完整的CSS规则

从最基本的层次来看,CSS是由两块内容组合而成的:
* 属性(Propertie):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等。
* 属性值(Value):每个指定的属性都需要给定一个值,这个值表示你想把那些样式特征修改成什么样,例如,你想把字体,宽度或背景颜色改成什么。
与值配对的属性被称为CSS声明。CSS声明会被放置在一个CSS声明块中。最后,CSS声明块与选择器相结合形成一个CSS规则集(或CSS规则)。

CSS声明

属性和属性值之间,用英文半角冒号 (:) 隔离,如下图所示。
CSS声明

CSS声明块

声明按分组,每一组声明都用一对大括号包裹,用 ({) 开始,用 (}) 结束。
声明块里的每一个声明必须用半角分号(;)分隔,否则代码会不生效(至少不会按预期结果生效)。声明块里的最后一个声明结束的地方,不需要加分号,但是最后加分号是个好习惯,因为可以防止在后续增加声明时忘记加分号。
CSS声明块

CSS 选择器和规则

我们的拼图还少了一块——我们需要讨论一下如何告知我们的声明块:哪些元素是它们需要应用的。通过在每个声明块前加上选择器(selector)来>完成这一动作,选择器是一种模式,它能在页面上匹配一些元素。这将使相关的声明仅被应用到被选择的元素上。选择器加上声明块被称为规则集>(ruleset),通常简称规则(rule)。
CSS 选择器和规则

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

CSS选择器是什么概念

摘自CSS 选择器参考手册

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

摘自CSS 语法 - CSS 选择器和规则

选择器是一种模式,它能在页面上匹配一些元素。选择器加上声明块被称为规则集ruleset),通常简称规则(rule)。

简单选择器是什么

摘自简单选择器

简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。

属性选择器是什么

摘自属性选择器

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

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

参考自基本文本和字体样式

用于样式文本的 CSS 属性通常可以分为两类。
* 字体样式: 作用于字体的属性,会直接应用到文本中,比如使用哪种字体,字体的大小是怎样的,字体是粗体还是斜体,等等。
* 文本布局风格: 作用于文本的间距以及其他布局功能的属性,比如,允许操纵行与字之间的空间,以及在内容框中,文本如何对齐。

字体

颜色

参考
CSS的值和单位 - 颜色
<color>
HTML 颜色

color 属性设置选中元素的前景内容的颜色

描述color值的方式有颜色名(色彩关键字)、Color HEX(RBG十六进制数,例如#000000对应黑色)、Color RGB(rgb(0,0,0))

色彩关键字

色彩关键字是不区分大小写的标识符,它表示一个具体的颜色,例如 red, blue, brown, lightseagreen

rgb()

颜色可以使用红-绿-蓝(red-green-blue (RGB))模式的两种方式被定义:
十六进制符号 #RRGGBB 和 #RGB
* “#” 后跟6位十六进制字符(0-9, A-F)
* “#” 后跟3位十六进制字符(0-9, A-F)。
三位数的 RGB 符号(#RGB)和六位数的形式(#RRGGBB)是相等的。
例如, #f03 和 #ff0033 代表同样的颜色。
函数符 rgb(R,G,B)
rgb” 后跟3个<integer> 或3个 <percentage>值。
整数 255 相当于 100%,和十六进制符号里的 F 或 FF 。

/* These examples all specify the same RGB color: */

#f03


#F03


#ff0033


#FF0033

rgb(255,0,51)
rgb(255, 0, 51)
rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */
hsl()

颜色也可以使用 hsl() 函数符被定义为色相-饱和度-明度(Hue-saturation-lightness)模式。HSL 相比 RGB 的优点是更加直观:你可以估算你想要
的颜色,然后微调。它也更易于创建相称的颜色集合。(通过保持相同的色相并改变明度/暗度和饱和度)。

色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。这个角度作为一个无单位的 <number> 被给出。定义 red=0=360,其它颜色分散于圆环,所以 green=120, blue=240,以此类推。作为一个角度,它隐含像 -120=240 和 480=120 这样的回环。

饱和度和明度由百分数来表示。
100% 是满饱和度,而 0% 是一种灰度。
100%明度是白色,0% 明度是黑色,而 50% 明度是“一般的”。

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */ 
rgba()

颜色可以使用 rgba() 函数符在红-绿-蓝-阿尔法(RGBa)模式下被定义。RGBa 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。
* a *表示透明度:0=透明;1=不透明;

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */ 
hsla()

颜色可以使用 hsla() 函数符在色相-饱和度-明度-阿尔法(HSLa)模式下被定义。HSLa 扩展自 HSL 颜色模式,包含了阿尔法通道,可以规定一个颜色的透明度。
a 表示透明度:0=透明;1=不透明;

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */ 
字体种类

要在你的文本上设置一个不同的字体,你可以使用 font-family 属性,这个允许你为浏览器指定一个字体 (或者一个字体的列表),然后浏览器可以将这种字体应用到选中的元素上。

p {
  font-family: arial;
}

字体栈 : 由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack),这样的话,浏览器就有多种字体可以选择了。

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}
字体大小
  • px (像素): 将像素的值赋予给你的文本。这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的。
  • em : 1em 等于我们设计的当前元素的父元素上设置的字体大小
  • rem : 这个单位的效果和 em 差不多,除了 1rem 等于 HTML 中的根元素的字体大小, (i.e. <html>) ,而不是父元素。
字体样式,字体粗细,文本转换和文本装饰

CSS 提供了 4 种常用的属性来改变文本的样子:
* font-style: 用来打开和关闭文本 italic (斜体)。
* normal: 将文本设置为普通字体 (将存在的斜体关闭)
* italic: 如果当前字体的斜体版本可用,那么文本设置为斜体版本;如果不可用,那么会利用 oblique 状态来模拟 italics
* oblique: 将文本设置为斜体字体的模拟版本,也就是将普通文本倾斜的样式应用到文本中。
* font-weight: 设置文字的粗体大小。
* normal, bold: 普通或者加粗的字体粗细
* lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。100900: 数值粗体值,如果需要,可提供比上述关键字更精细的粒度控制。
* text-transform: 允许你设置要转换的字体。值包括:
* none: 防止任何转型。
* uppercase: 将所有文本转为大写。
* lowercase: 将所有文本转为小写。
* capitalize: 转换所有单词让其首字母大写。
* full-width: 将所有字形转换成固定宽度的正方形,类似于等宽字体,允许对齐。拉丁字符以及亚洲语言字形(如中文,日文,韩文)
* text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为:
* none: 取消已经存在的任何文本装饰。
* underline: 文本下划线.
* overline: 文本上划线
* line-through: 穿过文本的线

文字阴影

你可以为你的文本应用阴影,使用 text-shadow 属性。这最多需要 4 个值,如下例所示:

text-shadow: 4px 4px 5px red;

4 个属性如下:
1. 阴影与原始文本的水平偏移,可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移,除了它向上/向下移动阴影,而不是左/右。这个值必须指定。
3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值,则默认为0,这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units
4. 阴影的基础颜色,可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定,默认为 black.

文本布局

文本对齐

text-align 属性用来控制文本如何和它所在的内容盒子对齐。
* left: 左对齐文本。
* right: 右对齐文本。
* center: 居中文字
* justify: 使文本展开,改变单词之间的差距,使所有文本行的宽度相同。

行高

line-height 属性设置文本每行之间的高,可以接受大多数单位 length and size units,不过也可以设置一个无单位的值,作为乘数,通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。当行与行之间拉开空间,正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍,你可以使用这个:

line-height: 1.5;

字母和字间距

letter-spacingword-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是字与字之间的间距。
它们可以接受大多数单位length and size units

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值