fe6-1:CSS部分

CoderChang 2019-07-01

一、CSS 的使用:
内联(inline style attribute)
<head> 标签内的 <style> 标签
<link> 标签中的外联
二、三种主要的选择器(应用CSS)
元素选择器
class 选择器
id 选择器
三、display 属性:block、inline、inline-block
block 的内容独占一行,默认 block 的标签有:div p ul ol li h1 h2 h3 h4 h5 h6
inline 只占 content 的尺寸(标签的内容收缩在一起)
inline-block 可以设置自身的宽高
四、盒模型
内容:padding、border、margin
inline 元素没有盒模型

//一、

//内联
<h1 style='background:red;'>内联(inline style attribute)</h1>

//标签
<style>
    h1 {
        background: blue;
       }
</style>
<h1>head 内的 style 标签内的 css</h1>

//外联
<link rel="stylesheet" href="fe6.css">

//二、

//元素选择器
<style>
    h1 {
        background: blue;
       }
</style>
//花括号的属性将会附加到所有带有h1元素的标签上

//class选择器
<style>
    .green {
        background: green;
    }
 </style>
<h1 class="green">E = MC<dududu class="square">2</dududu> 质能公式</h1>
<h2 class="green">class 选择器</h2>
//花括号的属性将会附加到所有带有green元素的标签上

//id选择器
<style>
    #id-button-test {
        background: lightblue;
    }
 </style>
<button class=test-button id="id-button-test">按钮 1</button>
<button class=test-button>按钮 2</button>
//花括号的属性只会附加到含id-button-test元素的标签上

相关推荐

aSuncat / 0评论 2020-08-18