学习笔记

发布日期: 2022-05-01

更新日期: 2022-05-01

文章字数: 1.9k

阅读时长: 9 分

阅读次数:

CSS速成

CSS速成（Crash Course For Beginners）。教程视频地址：CSS速成。

准备

浏览器：Google Chrome（多浏览器测试）
编辑器：Visual Studio Code

另外，代码平台：CodePen。

什么是CSS

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

CSS组成

<p>Lorem ipsum dolor sit amet</p>

p{
    color: red;
}

Property：color，属性。
Value：red，属性的值。
Selector：p，选择器。
花括号，大括号。
最后一个属性可以不加分号，但最好都加上。

三种方式添加CSS

外部样式表

CSS保存在.css文件中
在HTML里使用<link>引用
用的最多

示例：

在css文件中：

body{
    background-color: #f4f4f4;
    color: #555555;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;

    font: normal 16px Arial, Helvetica, sans-serif;
    line-height: 1.5em;
}

.box1{
    background-color: antiquewhite;
    color: royalblue;

    border: 5px blue solid;
    border-top: 5px red solid;
    border-right: 8px blue solid;
    border-left: 10px green dotted;
    border-bottom: 1px firebrick double;

    border-bottom-width: 8px;
    border-bottom-style: dashed;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

    margin-top: 20px 0;
}

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

}

button:hover{
    background-color: red;
}

button:active{
    background-color: white;
}

.box1 h1{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 1em;
    word-spacing: 2em;
    text-align: center;
}

.box2 h1{
    text-align: center;
}

.box2{
    border: 5px dotted #cccccc;
    padding: 20px;
    margin: 20px 0px;
    border-radius: 35px;
    /* position: absolute;
    top: 30px;
    left: 30px; */
}

.list li{
    /*list-style-image: url('../image/1.webp');*/
    list-style: circle;
}

.container{
    width: 80%;
    margin: auto;
}

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

a:visited{
    color: red;
}

.block{
    float: left;
    width: 33.3%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#main-block{
    float: left;
    width: 70%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
#sidebar{
    float: right;
    width: 30%;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.clearfix{
    clear: both;
}

.list2 li:nth-child(even){
    background-color: gray;
}
.list2 li:first-child{
    background-color: red;
}
.list2 li:nth-child(3){
    background-color: aqua;
}

.position-box{
    width: 500px;
    height: 500px;
    border: 1px solid black;
}
.position-box h1{
    position: absolute;
    top: 50px;
}
.position-box h2{
    position: absolute;
    right: 30px;
}
#fixed{
    position: fixed;
    right: 0;
    bottom: 200px;
}

在html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>CSS Crash Course</title>
</head>
<body>
    <div class="container">
        <div class="box1">
            <h1>Hello World</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda repudiandae neque ut recusandae odio in ullam, officiis sed quis officia illo soluta animi reiciendis rem deserunt pariatur a harum et eaque nesciunt inventore facilis obcaecati. Tempore est saepe corrupti sint, ducimus impedit mollitia tempora cum perspiciatis velit quae! Voluptates voluptatem, qui culpa maiores sint cupiditate! Eius dolorum enim, amet exercitationem autem esse totam atque magni quo deleniti debitis praesentium error repudiandae ad vitae hic mollitia ipsa aut laudantium repellendus accusantium consequuntur cumque eos. Officia corrupti perferendis nam veniam accusamus, nulla, commodi doloremque officiis, magnam nesciunt aspernatur. Debitis eius unde necessitatibus!</p>
        </div>
        <div class="box2">
            <h1>Hello World</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda repudiandae neque ut recusandae odio in ullam, officiis sed quis officia illo soluta animi reiciendis rem deserunt pariatur a harum et eaque nesciunt inventore facilis obcaecati. Tempore est saepe corrupti sint, ducimus impedit mollitia tempora cum perspiciatis velit quae! Voluptates voluptatem, qui culpa maiores sint cupiditate! Eius dolorum enim, amet exercitationem autem esse totam atque magni quo deleniti debitis praesentium error repudiandae ad vitae hic mollitia ipsa aut laudantium repellendus accusantium consequuntur cumque eos. Officia corrupti perferendis nam veniam accusamus, nulla, commodi doloremque officiis, magnam nesciunt aspernatur. Debitis eius unde necessitatibus!</p>
            <button>Button</button>
        </div>
        <div class="list">
            <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li>List 3</li>
                <li>List 4</li>
                <li>List 5</li>
            </ul>
        </div>

    <div class="block">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, numquam.</p>
    </div>
    <div class="block">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, numquam.</p>
    </div>
    <div class="block">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, numquam.</p>
    </div>
    <div class="clearfix"></div>
    <div id="main-block">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam, corrupti.</p>
    </div>
    <div id="sidebar">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam, corrupti.</p>
    </div>
    <div class="clearfix"></div>

    <ul class="list2">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
            <li>List 4</li>
            <li>List 5</li>
    </ul>

    <div class="position-box">
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
    </div>

    <button id="fixed">Button</button>
</div>
<div style="margin-top: 1000px;"></div>
</body>
</html>

内部样式表

HTML的<head>部分
不使用外部CSS文件
将CSS放在HTML<style>里，<style>放在<head>里面
可以使用

示例：

<head>
    <style>
        h1{
            color: red;
        }
    </style>
</head>

内联样式表

仅影响一个元素
在HTML元素的style属性中添加
不推荐使用，维护繁琐；除非特殊需求

示例：

<h1 style="color: red;">Hello World</h1>

CSS选择器

三种选择器的方式。

示例：

<p class="paragraph" id="para1">Lorem</p>

第一种选择方式

通过标签选择。

p{
    color: red;
}

第二种选择方式

通过“类”来选择，选择class为paragraph的标签。

.paragraph{
    color: red;
}

第三种选择方式

通过id方式选择，加一个#。要保证id值在HTML文件中是独一无二的。

#para1{
    color: red;
}

CSS的选择器很多，以及更高级的选择器等，参考网址：CSS选择器。

CSS里面的颜色

关键词：black，silver，white等等
十六进制：#ff0000
RGB：rgb(255,0,0)
HSL：hsl(0,100%,50%)；色相，饱和度和亮度（明度）。
RGBA：rgb(255,0,0,0.5)
HSLA：hsl(0,100%,50%,0.5)

Alpha通道。

关于HSL模型

H(Hue)，S(Saturation)，L（Lightness）。对于S，在0%处显示为灰色，在100%位置显示为改颜色的全彩。对于H，在0%处显示为黑色，在100%位置显示为白色。

参考网址：

颜色值列表：color_value。
HSL和RGB转换：hsltorgb

CSS里面的字体

使用font-family属性来指定字体。

示例：如何指定字体？

font-family: Arial, Helvetica, sans-serif，第一个是字体族名，第二个是字体名，第三个表示无衬线，在起始和结束位置比较平直，时尚。有两个字体是因为第一个如果找不到，为考虑第二个字体。
font-family: "Gill Sans", sans-serif，第一个是字体名，加了引号是因为有空格。
font-family: "Times New Roman", serif，少了sans，有衬线，起始和结束位置有一些比较好看的修饰，典雅优美。
font-family: Didot, serif。
font-family: "Andale Mono", monospace。monospace表示等宽字体，每个字都是一样的。一般代码编辑器多数都会使用等宽字体。
font-family: "IBM Plex Mono", monospace。

参考网址：

字体使用。
windows和mac平台字体的占有率情况：cssfontstack。
谷歌免费字体选用平台：fontsGoogle。

如果对字体感兴趣：推荐

TheType。
播客节目：TheType旗下节目“字体畅谈”。
书籍：《西文字体（1-2）》、《西文排版》。

盒子模型/框模型

content：width，height
padding：内边距，内容和border之间的距离。
border：
margin：外边距，当有多个盒子布局在一起时，会取两个盒子中外边距最大的外边距作为两个盒子的外边距。外边距塌陷/合并/重叠。

示例：

p{
    margin-top: 5px;
    margin-buttom: 5px;
    margin-right: 10px;
    margin-left: 10px;
}

其他三种更简单的方式：

/*方式1*/
p{
    margin: 5px 10px 5px 10px;/*上右下左的顺时针方向指定*/
}
/*方式2*/
p{
    margin: 5px 10px;/*上下，左右；如果所有都一样，一个值就OK*/
}
/*方式3*/
p{
    margin: 5px 10px 5px;/*上，左右，下*/
}

注：用完float要清除。

伪类选择器

CSS中的定位器

Position in CSS。

static，静态定位
relative，相对定位
absolute，绝对定位，在没有上下文relative时，是参考当前视窗页面做偏移的。
fixed，固定定位
sticky

后续学习

参考网址：Learn CSS。

W&D

http://example.com/2022/05/01/css-su-cheng/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 W&D !

CSS Web前端

JavaScript速成

JavaScript的学习笔记

2022-05-01 学习笔记

Web前端 JavaScript

HTML速成

HTML的学习笔记

2022-04-30 学习笔记

Web前端 HTML