【零基础入门】 css学习笔记（1） 字体颜色样式等
一、基础介绍
1， css：cascading style sheet 层叠式样式表
2， 语法：p {background-color:red; } //整个称为一个规则
- p ： 选择器，表示将样式应用到哪些元素
- {} ： 把p元素的所有样式放在大括号之间
- background-color:red; ：样式的属性:属性值;
3， 把css加入html中：
1） 在<head>元素中增加样式标记
<style>
css规则
</style>2） 创建一个css文件，比如index.css，包含css规则。
在<head>元素中使用<link>元素：<link type=”text/css” rel=”stylesheet” href=”index.css”>
- link是一个void元素，没有结束标记；
- type=”text/css”表示 链入的是css样式表，在html5中可省略不写。
- rel属性指htm文件与所链接的文件之间的关系，链接是的样式表，所以用值stylesheet
4，注释：/* */
5，css有两个性质：继承性，层叠性
二、字体和颜色样式
CSS提供了很多属性对字体外观加以控制。
1， font-family：
例：font-family: Verdana, Geneva, Arial, sans-serif; font-family: ” Times New Roman”, ”宋体”, “黑体”;
- 该属性可以指定多个字体，用逗号隔开。字体名拼写不能错，大小写要一致，最后一个一般放通用的字体系列名。浏览器会查看用户计算机上是否有第一种字体，如果有，就使用这个字体，如果不可用，就使用后面的备用字体。
- 如果字体名包含多个单词，就用引号包围起来。
- font-family设置的字体如果电脑中没有，则会显示宋体。一般页面中，中文用宋体、黑体、微软雅黑，英文使用Arial
、Times New Roman。英文字体要放在最前面，中文字体后面的备选字体用逗号隔开。 - 访问者访问web页面上看到的字体取决于他们自己电脑上安装了哪些字体，除非你使用web字体。
- font-family包含5个字体系列：sans-serif、 serif monospace、 cursive、fantasy，每个字体系列都包含大量字体。
字体介绍：
- sans-serif 包括没有衬线的字体【比如Verdana 、Arial Black、 Arial、Geneva】，通常认为该字体在计算机屏幕上更容易识读
- serif 包括有衬线的字体【比如Times、 Times New Roman、 Georgia】，一般新闻报纸的文字排版是这种字体
- monospace 字体包含固定宽度的字符【比如Courier、 Courier New】，主要用于显示软件代码
- cursive 包括看似手写的字体【比如Comic Sans、 Apple Chancery】，有时标题会使用这些字体
- fantasy：包含有某种风格的装饰性字体
2， color 文本颜色
web颜色原理：按红、绿、蓝三个分量所占数量指定。
1）4种指定颜色的方法：
color:silver;使用颜色名，css中有16个基本颜色，以及150种扩展颜色名color:rgb(80%, 40%, 0%);按红、绿、蓝 相对百分比表示color:rgb(204, 102, 0);按0-255的红、绿、蓝分量指定color:#cc6600;用十六进制表示，最常用的方法， cc表示红色，66表示绿色。如果每一组分量中两位数字都相同，可简写为color:#c60，如果为color:#cc6610;，则不能简写。
2）rgb(255,255,255)是白色， rgb(0,0,0)是黑色。
3， font-size 字体大小
1）有4种表示方法：
font-size:14px;font-size:150%;从父元素继承的一个属性，是相对于父元素字体大小的百分比font-size:1.2em;也是相对度量单位，是父元素字体大小的1.2倍font-size:small;用关键字指定大小。small大约为12像素。【xx-small、 x-small、 small、 medium 、large、 x-large、 xx-large】
2）使用建议：
选择一个关键字（small或medium）作为body的字体大小，相当于页面的默认字体大小。使用百分数或em，相对于body字体大小指定其它元素的字体大小
好处：若想改变页面的字体大小，只需改变body的字体大小，其它元素都会按比例改变。
4， 其它修饰样式
1）font-weight:bold; 文本加粗；【normal】
2）font-style:italic; 文本倾斜
3）文本装饰：为文本增加装饰性效果，如下划线、上划线、删除线text-decoration:underline; 下划线text-decoration:underline overline; 有一个下划线和上划线text-decoration:none 没有任何装饰
5， 简写形式
1）font属性：可以将字号、行高、字体一起设置，行高一定要大于字号；
完整形式：font: font-style font-variant font-weight font-size/line-height font-family;
可选属性：font-style font-variant font-weight ，不过它们必须出现在font-size属性前面。 line-height属性是可选的。
必须指定的属性：font-size、font-family。
例：font: 14px/24px “宋体”; ，
等价于：font-size:14px; line-height:24px; font-family:”宋体”;
三、其它常用属性
1，line-height: 行高。
1）指定文本行之间的垂直间距。文字是在行里居中的，为了保证字在行中居中，一般字号、行高都是偶数。该属性可以继承。
2）表示方法：可用像素指定、或使用em或百分数（相对于字体大小指定）。
3）line-height有一点特殊，可直接使用一个数
例：
<style>
#products{ line-height: 1; }
<style>
<div id=”products”>
<h1>…</h1>
<p>..</p>
</div>表示<div>中的各个元素行高是其自己字体大小的1倍，而不是<div>字体大小的一倍。
4）应用：如何让文本在盒子中垂直居中
1，只有一行文本，让行高=盒子高；
2，有多行文本，要设置盒子的padding。
2，text-aligh：center;
是块元素的一个属性，用来将这个块元素中的所有内容在水平方向上对齐，可居中、左对齐、右对齐。若直接在内联元素上（如img）上使用，则不起作用。该属性可继承。
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT