这是我参与「第五届青训营」伴学笔记创作活动的第 5 天

前言

前提：学过HTML内容

参考教程：【为初学者准备的：CSS 速成】

深入学习 Learn to style HTML using CSS - Learn web development | MDN (mozilla.org)

初识什么是CSS

Cascading Stylesheets (层叠样式表）
不是编程语言
告诉浏览器如何指定样式、布局等

基础样式

三种方法添加CSS

外部样式表✔️

CSS 保存在 .css 文件中
在 HTML 里使用
引用

<!-- 外联样式 -->
<link rel="stylesheet" href="./css/style.css">

内部样式表✔️

不使用外部 CSS 文件
将 CSS 放在 HTML里

<!-- 内部样式表 -->
    <style>
        h1 {
            color: aqua;}
    </style>

内联样式❌

仅影响一个元素
在 HTML 元素的 style属性中添加

<!-- 内联样式 -->
<h2 style="color: red;">Hello World</h2>

选择器

参考文档：developer.mozilla.org/en-US/docs/…
p 头选择器 p { }
class 类 .plas { }
id 唯一 #abc { }

CSS里的颜色

关键词
black, silver, white
RGB
rgb(255, 0, 0)
RGBA
rgb(255, 0, 0,0.5)
。十六进制值
#ff0000
HSL
hsl(0,100%,50%)
HSLA
hsl(0,100%,50%, 0.5)

developer.mozilla.org/en-US/docs/… 文档
serennu.com/colour/hslt… 颜色转换

字体样式

Arial, Helevetica 优先级
A > B
"Times New Roman" 多单词字体名
sans-serif 无衬线体
serif 衬线体
monospace 等宽字体

参考源

developer.mozilla.org/en-US/docs/… 参考用法
www.cssfontstack.com 字体占有率参考
fonts.google.com 免费字体使用

字体设计、排印案例学习： thetype.com "字谈字畅”
书籍：《西文字体》《西文字体2》《西文排版》

Box 模型

margin 外边距
border 边框
padding 内边框
content 内容高宽

很多个box并列，外边距只有一个最大值

边距值的指定

外边距 margin: 上右下左
上右
上右/左下
内边距 padding：

边框

border：
border-right：
border-left：
border-top：
border-bottom：
border-bottom-width:
border-bottom-stlye:
border-radius:
5px
blue
solid 实线
dotted 点虚线
double 双线
dashed

列表Tips 快捷技巧

<div class="list">
            <ul></ul>
</div>

更改图标

.list li {
    list-style-image: none;
    list-style-image: url('../image/check.png');
}

按钮

Button

button {
    background-color: #444444;
    color: #fff;
    padding: 10px 15px;
}


button:hover {
    background-color: red;
}


button:active { 
    background-color: #fff;
}

超链接

a {
    text-decoration: none;
    color: #555555;
}


a:hover {
    color: cyan;
}


/* a:visited {
    color: red;
} */

浮动分栏

<div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, ea. Possimus, sapiente laudantium minus minima ipsum doloribus exercitationem laborum?</p>
        </div>
<div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, ea. Possimus, sapiente laudantium minus minima ipsum doloribus exercitationem laborum?</p>
        </div>
<div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, ea. Possimus, sapiente laudantium minus minima ipsum doloribus exercitationem laborum?</p>
        </div>
        <div class="clearfix"></div> 
        <!-- 消除float -->

<div id="main-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo iusto unde deleniti beatae deserunt mollitia obcaecati cumque nulla ipsam incidunt. Praesentium sed, nisi expedita dicta quasi inventore voluptatem quod eum veniam eligendi repellat vel magnam, modi debitis at reiciendis eius consectetur nihil aut quis in? Numquam fugit dolorum explicabo consectetur.</p>
        </div>
        <div id="sidebar">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo iusto unde deleniti beatae deserunt mollitia obcaecati cumque nulla ipsam incidunt. Praesentium sed, nisi expedita dicta quasi inventore voluptatem quod eum veniam eligendi repellat vel magnam, modi debitis at reiciendis eius consectetur nihil aut quis in? Numquam fugit dolorum explicabo consectetur.</p>
        </div>
        <div class="clearfix"></div>

.block {
    float: left;
    width: 33.3%;
    border: 1px solid #cccccc;
    /* 多了1px 下面调整 */
    box-sizing: border-box;
}


#main-block {
    float: left;
    width: 70%;
    border: 1px solid #cccccc;
    box-sizing: border-box;
}


#sidebar {
    float: right;
    width: 30%;
    border: 1px solid #cccccc;
    box-sizing: border-box;
}

控制器列表伪类

<ul class="list2">
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>

.list2 li:nth-child(even) {
    background-color: grey;
}


.list2 li:first-child {
    background-color: red;
}


.list2 li:nth-child(3) {
    /* 数字序列从1开始，与编译语言从0开始不同 */
    color: cyan
}

定位 Position in CSS

static -
静态定位
relative -
相对定位
absolute -
绝对定位
fxed -
固定定位
sticky

position:static;
    top: 30px;
    left: 30px;

absolute 在没有上下文 relative 时，是参考当前是视窗页面做偏移的。

<div class="position-box">
            <h1>Heading1</h1>
            <h2>Heading2</h2>
        </div>

.position-box {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    position: relative;
}


.position-box h1 {
    position: absolute;
    top: 50px
}


.position-box h2 {
    position: absolute;
    left: 30px;
}
/* 偏移量基于上下文有relative属性的内容 */

小图标