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中放入多个类名,可以指定一个元素属于多个类,类名之间用空格分隔。
当一个元素匹配多个定义同样属性的类时,匹配规则是:

部分样式属性简介
@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"); 
}
字体大小设置
body {
    font-size: 14px;
}
body {
    font-size: 14px;
}
h1 {
    font-size: 150%; //表示为父元素(body)字体的150%
}
h2 {
    font-size: 1.2em;//表示为父元素(body)字体的1.2倍
}
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%) 
} 
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;
}
上一篇下一篇

猜你喜欢

热点阅读