CSS基础第2弹 | 青训营笔记

chunchun2020
71 阅读2分钟

CSS基础第2弹 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第3天

image.png

字体

  • 定义

字体样式通过font-family属性设置，一般设置多个，对应不同设备上的字体显示样式

字体样式 font-family

  • 通用字体族：对应多个字体

serif：衬线体，Georgia、宋体

sans-serif：无衬线体，Arial、Helvetica、黑体、微软雅黑

Cursive手写体：cafisch Script、楷体

Fantasy：Comic Sans MS、Papyrus

Monospace等宽字体：Consolas、Courier、中文字体

  • 代码
<h1>卡尔斯巴德洞窟(Carlsbad Caverns)</h1>
<p>卡尔斯巴德洞窟(Carlsbad Caverns)是美国的一座国家公园，位于新
    墨西哥州东南部。游客可以通过天然入口徒步进入，也可通过电梯到达230米的
    洞穴深处。
</p>

<style>
h1{
font-family: Optima,Georgia,serif;
}
body{
    font-family: Helvetica, sans-serif;
}
</style>
  • 演示

image.png

字体大小 font-size

1.设置

关键字：small,medium,large

长度：px,em

百分数：相对于父元素字体大小

2.代码

<section>
    <h2>A web font example</h2>
    <p class="note">Notes:Web fonts ...</p>
    <p>With this in mind, let's build...</p>
</section>

<style>
    section{
        font-size: 20px;
    }

    section h1{
        font-size: 2em;
    }
    section .note{
        font-size: 80%;
        color: orange;
    }
</style>

3.演示

image.png

行高line-height

定义：两行之间的距离高度

示例 image.png

脚本特性white-space

  • 定义

控制空格、换行

  • 具体属性 nomal：多个空格合成一个

nowrap:强制不换行

pre：保留原来的所有，包括空格部分

pre-wrap:一行内显示不下时换行(保留空格)

pre-line:一行内显示不下时换行(不保留空格)

调试CSS

1.右键单击页面选择[检查]

2.使用快捷键

Ctrl+Shift+I(Windows)

Cmd+Opt+I(Mac)

哪条规则生效？

1.例子

标题会显示哪种颜色？

<article>
    <h1 class="title">拉森火山国家公园</h1>
</article>
<style>
    .title{
        color: blue;
    }
    article h1{
        color: red;
    }
</style>

2.演示

image.png

选择器的特异度(Specificity)

定义：css选择器的优先级。当选择不同的选择器，选中同一个元素时并且设置相同的样式时，这样样式之间就会产生冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）来决定，优先级高的优先显示。

计算出优先级大小，优先级大的覆盖优先级小的

image.png

1.代码

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
<!-- (1) -->
.btn{
     background:#e6e6e6;
     color:#333;
 }
 <!-- (2) -->
.btn.primary{
    color #fff;
    background: #218de6;
}
 </style>

2.解释

<button class="btn">显色为（1）

<button class="btn primary">显色为（2），（2）的优先级大于（1）,两者均有时显色为优先级较大者，（2）将（1）覆盖

3.演示

image.png

继承

1.定义

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

2.代码

<p>This is a <em>test</em>
of <strong>inherit</strong>
</p>

<style>
    body{
        font-size: 20px;
    }
    p{
        color: blue;
    }
    em{
        color: red;
    }
</style>

3.解释

<strong>标签并没有设置颜色，继承父标签<p>标签的颜色。

4.演示

image.png

显式继承

使用：属性inherit

*{
    box-sizing:inherit;
}

初始值

1.定义

CSS中，每个属性都有一个初始值

background-color初始值：transparent

margin-left初始值：0

可以用initial关键字显式重置为初始值

显式重置初始值：background-color:initial

avatar
文章
阅读
粉丝