【零基础入门】 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。
【零基础入门】 css学习笔记（1）字体颜色样式等

2，text-aligh：center;
是块元素的一个属性，用来将这个块元素中的所有内容在水平方向上对齐，可居中、左对齐、右对齐。若直接在内联元素上（如img）上使用，则不起作用。该属性可继承。

【零基础入门】 css学习笔记（1） 字体颜色样式等

一、基础介绍

二、字体和颜色样式

三、其它常用属性

相关推荐

【零基础入门】 css学习笔记（1）字体颜色样式等