当前位置：首页 > news >正文

一篇文章快速学会CSS

news 来源：原创 2025/6/19 5:27:23

一篇文章快速学会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; */
}

在这里插入图片描述