文章目录
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 可将英文网站站点转为中文网站站点