HEAD FIRST CSS NOTE

2018-11-29 本文已影响0人向着远方奔跑

直接在<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;
}