直接在<head>中添加样式
<style>
h1, h2{
font-family: sans-serif;
color: gray;
}
h1{
border-bottom: 1px solid black;
}
p{
color: maroon
}
</style>
如果很多页面都用到同一套样式，可以将样式专门保存为一个.css文件，之后在页面中调用即可，这样只需改动样式文件就可以改变所有的页面样式。
样式文件中没有<style>标记，只包含css，不能包含HTML。
很多属性都能继承。例如，如果<body>元素设置了一个可继承的属性，那么<body>的所有子元素都会继承这个属性。
利用<link>元素来调用外部样式文件，在<head>中使用
<link type="text/css" rel="stylesheet" href="loung.css">
通过类class来为指定的元素设置样式，通过在class中放入多个类名，可以指定一个元素属于多个类，类名之间用空格分隔。
当一个元素匹配多个定义同样属性的类时，匹配规则是：
- 如果一个规则比其他规则更特定具体，则胜出
- 如果每个类定义的属性规则相同，则CSS文件中最后列出的规则（最靠后）胜出
部分样式属性简介
- font-family：设置字体系列，共有5个字体系列（sans-serif（无衬线）、serif（有衬线）、monospace、cursive、fantasy）。serif和sans-serif字体最常用
- @font-face：如果要使用某种字体，而默认情况下用户未安装这种字体，使用@font-face给出字体链接
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
- color ：设置文本元素的字体颜色
- font-weight：控制文本的粗细，可用来设置粗体
- text-decoration：对文本加装饰，包括上划线、下划线、删除线
- left：指定一个元素的左边所在位置
- line-height：设置一个文本元素中的行间距
- font- size：让文本更大或更小
- padding：如果在一个元素边缘和它的内容之间需要有空间，可以使用padding（内边距）
- border：在一个元素周围加边框，可以有一个实线边框、凸起边框、虚线边框...
- background-color：控制元素的背景颜色
- top：控制元素顶部的位置
- text-align：将文本左对齐、居中或右对齐
- letter- spacing：在字母之间设置间距
- font-style：设置斜体文本
- list-style：改变列表中列表项的外观
- background-image：在元素后放置一个图像
字体大小设置
- 直接使用像素值指定大小
body {
font-size: 14px;
}
- 使用比例
body {
font-size: 14px;
}
h1 {
font-size: 150%; //表示为父元素（body）字体的150%
}
h2 {
font-size: 1.2em;//表示为父元素（body）字体的1.2倍
}
- 使用关键字
常用的从小到大依次为：
xx-small, x-small, small, medium, large, x-large, xx-large
浏览器会将关键字转换为对应的像素大小
body {
font-size: small;//一般为 12 像素
}
使用原则：一般在body中使用关键字定义一个默认的文字大小，在子元素中需要单独定义时使用比例，这样当页面缩放时也不影响观感，改变字体大小时只需要改变body的字体大小，其他会按比例缩放。
未指定字体大小时，默认浏览器的body字体大小为16px，<h1>为200%，<h2>为150%, <h3>为120%，<h4>为100%，<h5>为90%， <h6>为60%
改变字体粗细
设置粗体
fong-weight : bold;
去掉粗体样式
font-weight: normal;
设置斜体
为字体增加斜体风格
font-style: italic;
设置倾斜文本
font-style: oblique;
这两种方式没啥大的区别，任选一种使用即可
web颜色
所有的颜色都是红（R）、绿（G）、蓝（B）三种颜色按比例混合而成
三种颜色表示方法：
- 红绿蓝百分数指定
body {
background-color: rgb(80%, 40%, 0%)
}
- 按0-255的红绿蓝分量值指定，红绿蓝每种颜色占用一个字节
用 255×百分比 得到，例：204=255×80%，102=255×40%
body {
background-color: rgb(204, 102, 0)
}
- 十六进制码表示
将上面的分量值转为十六进制数即可，红绿蓝每种颜色占两位，即一个字节
body {
background-color: #cc6600;
}
当每种颜色的两位数都相同，可缩写为 例：#c60
文本装饰
文本装饰为文本增加一些装饰性的效果，如下划线、上划线和删除线。增加一个文本装饰，只需设置元素的text-decoration
使<em>（斜体）元素上有一个从文本中间穿过的横线
em {
text-decoration: line-through;
}
使<em>元素同时有一个下划线和一个上划线
em {
text-decoration: underline overline;
}
如果文本继承了不想要的文本装饰，使用 none 来去除
em {
text-decoration: none;
}
在下边框增加细的虚线，颜色为#888888
h1 {
border-bottom: thin dotted #888888;
}
设置文本行高（行间距）
line-height属性允许指定文本中各行之间的垂直间距量。可以按像素指定行高，也可以使用em或百分数置相对于字体大小来指定。
下例中行高为字体大小的 1.6 倍
body {
line-height: 1.6em;
}
网友评论