一篇文章快速学会CSS

注：适合有一定编程基础的来快速掌握

语法规范

选择器 + { 一条或者n条说明 }

html 复制代码

<!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

HTML 复制代码

    <p style="color:green" >bit</p>

外部样式表

将CSS写在外部文件里

HTML 复制代码

<link rel="stylesheet" href="demo02.css">

选择器

基础选择器

标签选择器

css 复制代码

p {
    color: rgb(255, 0, 123);
    font-size: 40px;
}

类选择器

HTML 复制代码

<p class="CSS">CSS</p>
<p class="HTML">HTML</p>
<p class="JS">JS</p>

css 复制代码

.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选择器

HTML 复制代码

    <p id="xie">谢</p>
    <p id="shi">施</p>

css 复制代码

#xie {
    color: rgb(255, 14, 231);
    font-size: 40px;
}

#shi {
    color: rgb(0, 255, 76);
    font-size: 40px;
}

通配符选择器

实际开发中用来针对页面中所有元素的默认样式进行消除，主要消除边距

CSS 复制代码

* {
    background-color: black;
}

复合选择器

将基础选择器进行组合

后代选择器

元素1 元素2 { 样式声明 }

HTML 复制代码

   <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>

css 复制代码

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;
}

伪类选择器

用来定义元素状态的

HTML 复制代码

<a class="aa" href="#">鼠标悬停展示绿色，按下但未弹起来展示粉色</a>

CSS 复制代码

.aa {
    color: rgb(25, 60, 217);
    font-size: 40px;
}

.aa:hover {
     color: rgb(14, 247, 80);
}

.aa:active {
     color: rgb(220, 22, 141);
}

常用元素属性

字体属性

css 复制代码

#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; /* 行高 */
}

背景属性

css 复制代码

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 左右留白
     */ 
}

圆角矩形

css 复制代码

#jvxin {
    width: 400px;
    height: 200px;
    border: 2px green solid; /* 边框 */
    border-radius:50px; /* 圆角 */
}

#yuan {
    width: 200px;
    height: 200px;
    border: 2px green solid; /* 边框 */
    border-radius:100px; /* 圆角 */

}

元素的显示模式

盒模型

边框

CSS 复制代码

.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 */
}

弹性布局

CSS 复制代码

.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; */
}

谷歌调试工具

多用即可