一篇文章快速学会CSS
注：适合有一定编程基础的来快速掌握
语法规范
选择器 + { 一条或者n条说明 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
// css
<style>
p {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>Holle word</p>
</body>
</html>
引入方式
内部样式表
将CSS通过style标签嵌套在HTML中
行内样式表
将CSS通过属性写入HTML
<p style="color:green" >bit</p>
外部样式表
将CSS写在外部文件里
<link rel="stylesheet" href="demo02.css">
选择器
基础选择器
标签选择器
p {
color: rgb(255, 0, 123);
font-size: 40px;
}
类选择器
<p class="CSS">CSS</p>
<p class="HTML">HTML</p>
<p class="JS">JS</p>
.CSS{
color: rgb(0, 255, 76);
font-size: 40px;
}
.HTML{
color: rgb(255, 0, 123);
font-size: 40px;
}
.JS{
color: rgb(37, 0, 245);
font-size: 40px;
}
ID选择器
<p id="xie">谢</p>
<p id="shi">施</p>
#xie {
color: rgb(255, 14, 231);
font-size: 40px;
}
#shi {
color: rgb(0, 255, 76);
font-size: 40px;
}
通配符选择器
实际开发中用来针对页面中所有元素的默认样式进行消除，主要消除边距
* {
background-color: black;
}
复合选择器
将基础选择器进行组合
后代选择器
元素1 元素2 { 样式声明 }
<ul class="ul">
<li>xuan</li>
<li>xuan</li>
<li><a href="#">xuan</a></li>
</ul>
<ol>
<li>xuan</li>
<li>xuan</li>
<li>xuan</li>
</ol>
ol li {
color: rgb(25, 60, 217);
font-size: 40px;
}
.ul li {
color: rgb(234, 4, 27);
font-size: 40px;
}
.ul a {
color: rgb(181, 15, 164);
font-size: 40px;
}
伪类选择器
用来定义元素状态的
<a class="aa" href="#">鼠标悬停展示绿色，按下但未弹起来展示粉色</a>
.aa {
color: rgb(25, 60, 217);
font-size: 40px;
}
.aa:hover {
color: rgb(14, 247, 80);
}
.aa:active {
color: rgb(220, 22, 141);
}
常用元素属性
字体属性
#ziti {
font-family: '宋体'; /* 字体 */
font-size: 30px; /* 大小 */
color: aquamarine; /* 颜色 */
font-weight:700; /* 粗细 */
font-style: italic; /* 样式 */
}
#text {
color: aquamarine;
font-size: 30px;
text-align: left; /* 靠左 right 靠右 center 居中 */
text-indent: 2em; /* 缩进 em 两个文案的长度 */
text-decoration:underline; /* 文本装饰 下划线 */
line-height: 20px; /* 行高 */
}
背景属性
body div {
background-image:url(img/OIP-C.jfif) ; /* 背景图 */
background-repeat: no-repeat;
/* 图片平铺
平铺 repeat
不平铺 no-repeat
x平铺 repeat-x
y平铺 repeat-y
*/
width: 474px;
height:669px;
background-position: 0px 0px;
/* 背景位置
xpx ypx top left .....
*/
background-size: 474px 669px ;
/* 背景大小
w h
cover 将图片扩展完全覆盖整个区域
contain 左右留白
*/
}
圆角矩形
#jvxin {
width: 400px;
height: 200px;
border: 2px green solid; /* 边框 */
border-radius:50px; /* 圆角 */
}
#yuan {
width: 200px;
height: 200px;
border: 2px green solid; /* 边框 */
border-radius:100px; /* 圆角 */
}
元素的显示模式
盒模型
边框
.he {
width: 300px;
height: 300px;
border-color: aqua;/*边框颜色 */
border-style: solid; /*边框样式 */
border-width: 10px; /*边框粗细 会撑大盒子 */
border: aque solid 10px; /* 可以把样式写在一个里面 */
box-sizing: border-box; /* 解决撑大 */
}
内外边距
.nei {
width: 200px;
height: 100px;
border: green solid 10px;
/* padding-left: 5px;
padding-top: 5px; */
padding:5px 5px 5px 5px; /* 上右下左 */
/* 外边距 margin */
}
弹性布局
.tanxin {
width: 700px;
height: 700px;
background-color: rgba(59, 252, 130, 0.916);
display: flex; /* 设置弹性布局模式 */
justify-content: space-between; /* 横轴设置 */
align-items: start; /* 竖轴设置 */
}
.tanxin span {
width: 100px;
height: 100px;
background-color: rgba(252, 59, 59, 0.916);
/* display: flex; */
}
谷歌调试工具
多用即可