css学习笔记

CSS快速入门：

添加CSS的三种方式：

尽量不要使用内联样式，不利于代码维护。

CSS中的选择器

• 通过标签名进行选择
• 通过class类名进行选择
• 通过id名进行选择

class可以不唯一，但是id在html是唯一的。

选择器学习：https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

中文网站： https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors

CSS设置百分比宽度和居中

 <div class="container">
        <div class="box1">
            <h1>Hello World</h1>
            <p>os.makedirs的使用
                os.makedirs(dir_name2, exist_ok=True)：功能和os.mkdir一样也是用于新建文件夹，但是使用起来更方便，功能也更多一点
                os.makedirs：可以递归的创建多个文件夹
                os.makedirs：的exist_ok参数设置为True时，可以自动判断当文件夹已经存在就不创建
                如下，是递归的新建目录：images/imgs2
            </p>
        </div>
    </div>

.box1{
    background-color: hwb(42 31% 1%);
    /* 更改文字颜色 */
    color:rgb(23, 234, 234);   
}

.container{
    /* 宽度设置80% */
    width: 80%;
    /* 设置居中 */
    margin: auto;
}
/* text-align:center适用于文字居中，这个是div盒子居中	*/

CSS中的颜色

颜色值：https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

HSL、RGB、HEX相互转换：https://serennu.com/colour/hsltorgb.php

CSS中的字体

monospace:等宽字体

字体基础：https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

各种字体在Win/Mac上的占有率统计：https://www.cssfontstack.com

字体选用平台：https://fonts.google.com/

字体样式：

body{
    /* 设置页面背景颜色 */
    background-color: #f4f4f4;
    /* 设置字体颜色 */
    color: #d579d8;
    /* 更改页面字体 */
    font-family: Arial, Helvetica, sans-serif;
    /* 更改字体大小，默认16px */
    font-size: 16px;
    /* 字体加粗 */
    font-weight: bold;
    /* 也可通过下面的方式进行简写 */
    font:bold 16px arial, Helvetica, sans-serif;
    /* 行高 */
    line-height: 1.5em;
}

.box1{
    background-color: hwb(42 31% 1%);
    /* 更改文字颜色 */
    color:  #d579d8;   
}
/* 修改box1下的h1标签的字体样式 */
.box1 h1{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    font-style: italic;
    /* 下划线 */
    text-decoration:underline;
    /* 大写 */
    text-transform: uppercase;
    /* 字间距 */
    letter-spacing: 1rem;
    /* 词间距 */
    word-spacing: normal;
}

.container{
    /* 宽度设置80% */
    width: 80%;
    /* 设置居中 */
    margin: auto;
}

盒子模型：

单盒模型

多个div盒子的布局

多个div盒子的布局----不采用这种外边距相加的形式

多个div盒子的布局----取邻近的盒子的最大外边距

margin、padding、border设置

margin：外边距 padding：内边距 border: 边框

.box1{ 
    /* 给盒子加一个边框 */
    border: 5px solid #d579d8;
     /* 边框加上圆角 */
    border-radius: 35px;
    /* 指定盒子的内边距 */
    padding: 10px;
    /* 给盒子加一个上外边距 */
    margin-top: 50px;
}

列表：

列表中的每列标志设置

.list li{
    list-style-type:square;
}

按钮：

button {
    background-color: white;
    color: greenyellow;
    /* margin: 0 10px; */
    padding: 10px;
    /* 将元素显示为块级元素             button是行块元素（inline-block）*/ 
    display: block;
    margin: 0 auto;


}

/* 当鼠标移动到按钮上触发 */
button:hover {
    background-color: rgb(25, 174, 238);
}

/* 当鼠标按下按钮触发 */
button:active {
    background-color: blueviolet;
}

居中按钮：

这个是常用方式

/*	step1：: 将元素显示为块级元素             button是行块元素（inline-block）*/ 
display: block;
/* step2: 调整外边距*/ 
margin: 0 auto;

还可以通过div包裹button来设置居中：

 <div style="text-align:center">  
 <button>按钮居中</button>                      
 </div>

浮动:

/* 相同class，不同div盒子添加浮动*/
.block {
    float: left;
    width: 33.3%;
}
/*通过id给不同div盒子加浮动 */
#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;
}

定位：

relative：相对定位，所设置的参数都是相对于邻近的div盒子而言。

absolute：绝对定位，所设置的参数是相对于整个页面而言。

.box{
    position: relative;
    top:10px;
    left:10px;
}

当父节点盒子设置为positive后，子节点的absolute偏移是相对于父节点而言的！

否则就是参考当前视窗页面做偏移！

固定容器位置：

/* 固定按钮位置----右下角 */
#fixed{
    position: fixed;
    background-color: red;
    right: 0;
    bottom: 0;
}

学习网站推荐：

CSS学习网站，有许多例子和练习题: https://developer.mozilla.org/en-US/docs/Learn/CSS

颜色值：https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

HSL、RGB、HEX相互转换：https://serennu.com/colour/hsltorgb.php

选择器学习：https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

中文网站： https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors

per.mozilla.org/en-US/docs/Web/CSS/color_value

HSL、RGB、HEX相互转换：https://serennu.com/colour/hsltorgb.php

选择器学习：https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

中文网站： https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors

en->zh,US->CN 可将英文网站站点转为中文网站站点