fe6-1：CSS部分

2024年1月4日 201次阅读 来源: 洛神_醉梦心

一、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元素的标签上
    原文作者：洛神_醉梦心
    原文地址: https://segmentfault.com/a/1190000018890577
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞