网站优化难吗网络营销推广服务商
一篇文章快速学会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-xy平铺 repeat-y*/width: 474px;height:669px;background-position: 0px 0px; /* 背景位置 xpx ypx top left .....*/background-size: 474px 669px ; /* 背景大小w hcover 将图片扩展完全覆盖整个区域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; */
}
谷歌调试工具
多用即可