【CSS详解】一文掌握CSS基础用法

小新要变强

已于 2022-10-20 19:52:07 修改

阅读量4.3k

点赞数 4

分类专栏： JavaWeb 文章标签： css css3 前端

于 2022-09-27 15:30:00 首次发布

本文链接：https://blog.csdn.net/qq_42146402/article/details/127061284

版权

JavaWeb 专栏收录该内容

22 篇文章 7 订阅

订阅专栏

前言

本文为CSS基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

一、CSS的概念

1.什么是CSS

CSS：Cascading Style Sheet 层叠样式表。
CSS：表现（美化网页）。
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。

2.CSS的发展史

CSS 1.0
CSS 2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页简单，SEO
CSS 2.1 浮动，定位
CSS 3.0 圆角，阴影，动画…浏览器兼容性~

3.CSS的优势

内容与表现分离
网页结构表现统一，可以实现复用
样式十分丰富

二、CSS的导入方式

1.行内样式

<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aquamarine">CSS3测试</h1>

2.内部样式

<!--内部样式-->
<style>
    h1{
        color: yellow;
    }
</style>

3.外部样式

链接式

<!--外部样式——链接式-->
<link rel="stylesheet" href="css/style.css">

导入式

<!--外部样式——导入式-->
<!--CSS2.1-->
<style>
    @import url("css/style.css");
</style>

三、CSS的选择器

1.基本选择器

标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    /*标签选择器会选择页面上所有的对应标签*/
    h1{
        color: #c134b5;
        background: black;
    }
</style>
<style>
    p{
        background: aquamarine;
        color: red;
        font-size: 80px;
    }
</style>
    <h1>王小姐</h1>
    <h1>夏先生</h1>
    <p>蜗牛小姐</p>
</body>
</html>

类选择器 class：选择所有class属性一致的表情，跨标签.类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--类选择器格式：.class的名称{}
    好处：可以选择一组类，类名一致
    -->
<style>
    .girl{
        color: #c134b5;
    }
</style>
<style>
    .boy{
        color: blue;
    }
</style>
<h1 class="girl">王小姐</h1>
<h1 class="boy">夏先生</h1>
<h2 class="girl">蜗牛小姐</h2>
<p class="girl">王苡辰</p>
</body>
</html>

ID选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--id选择器 : id必须保证全局唯一
    #id 名称{}
    不遵循就近 原则，固定的
    优先级： id选择器 > class选择器 > 标签选择器
    -->
<style>
    #girl{
        color: #c134b5;
    }
</style>
<style>
    #boy{
        color: blue;
    }
</style>
<h1 id="girl">王小姐</h1>
<h1 id="boy">夏先生</h1>
<h2 class="girl">蜗牛小姐</h2>
<p class="girl">王苡辰</p>
</body>
</html>

2.层次选择器

后代选择器：在某个元素的后面

/*后代选择器*/
body p{
    background: #c134b5;
}

子选择器一代面

/*子选择器*/
body>p{
    background: #c134b5;
}

相邻兄弟选择器（对下不对上）

/*兄弟选择器： 只有一个，向下*/
.active +p{
    background: #c134b5;
}

通用选择器

/*通用兄弟选择器， 当前选中元素的向下所有的兄弟元素*/
.active~p{
    background: #c134b5;
}

3.结构伪类选择器

伪类：条件

/*ul的第一个子元素*/
ul li:first-child{
    background: #24ff33;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: red;
}
/*选中p1: 定位到父元素，选择当前的第一个元素
  选择当前p元素的父级元素，选中父级元素的第一个
  并且是当前元素才生效！
  */
p:nth-child(2){
    background: #67e4ff;
}
/*选中父元素下的p元素的第二个，类型 */
p:nth-of-type(2){
    background: yellow;
}

4.属性选择器

id + class 结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            line-height:50px;
            font: bold 20px/50px Arial;
        }
        /*
        属性名,属性名 = 属性值（正则）
              = 表示绝对等于
             *= 表示包含
             ^= 表示以...开头
             $= 表示以...结尾
             存在id属性的元素
                a[]{}
         */
        a[id]{
            background: deeppink;
        }
        a[id=first]{
            /*
            id=first的元素
            */
            background: greenyellow;
        }
        a[class*="links"]{
            /*
            class 中有links的元素
            */
            background: green;
        }
        a[href^=http]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
        a[href$=pdf]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a>
    <a href="" class="links item active" target="_blank " title="test">链接</a>
    <a href="img/hello.html" class="links item">网页</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">链2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>
</p>
</body>
</html>

四、美化网页元素

1.为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮才能吸引客户
凸显页面的主题
提高用户的体验

/*
 span标签：重点要突出的字，使用span标签套起来
 */
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>美化网页</title>
   <style>
       #title{
           font-size: 25px;
       }
   </style>
</head>
<body>
编程语言:<span id="title">Java</span>
</body>
</html>

2.字体样式

font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: "Arial Black";
            color: dodgerblue;
        }
        h1{
            font-size: 25px;
        }
        .p1{
            font-weight: 600;
            color: chocolate;
        }
    </style>
</head>
<body>
<h1>标题</h1>
<p>正文6699</p>
<p class="p1">正文4444444</p>
<p>Study English and Computer</p>
</body>
</html>

3.文本样式

颜色：color:agb / rgba()
文本对齐方式：text-align：center
首行缩进：text-indent：2em
行高：line-height：300px
下划线：text-decoration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent:2em;
        }
        .p3{
            line-height:300px;
            background: mediumaquamarine;
            height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="">4399-7k7k</a>
<p class="l1">123123123</p>
<p class="l2">123123123</p>
<p class="l3">123123123</p>
<h1>概述</h1>
<p class="p1">
    夸克一词是盖尔曼取自詹姆斯·乔伊斯的小说《芬尼根的守灵夜》的词句“向麦克老人三呼夸克（Three quarks for Muster Mark）”。无非是指一个质子中有三个夸克。另外夸克在该书中具有多种含义，其
    中之一是一种海鸟的叫声。他认为，这适合他最初认为“基本粒子不基本、基本电荷非整数”的奇特想法，同时他也指出这只是一个笑话，这是对矫饰的科学语言的反抗。另外，也可能是出于他对鸟类的喜爱。 [7]
    盖尔曼原本想用鸭的叫声来命名夸克。开始时他并不太确定自己这个新词的实际拼法，直到他在詹姆斯·乔伊斯小说《芬尼根守灵夜》里面找到“夸克”这个词
</p>
<p>
    在1963年，我把核子的基本构成命名为“夸克”（quark），我先有的是声音，而没有拼法，所以当时也可以写成“郭克”（kwork）。不久之后，在我偶尔翻阅詹姆斯·乔伊斯所著的《芬尼根守灵夜》时，我在“向麦克老大三呼夸克”这句中看到夸克这个词。由于“夸克”（字面上意为海鸥的叫声）很明显是要跟“麦克”及其他这样的词押韵，所以我要找个借口让它读起来像“郭克”。但是书中代表的是酒馆老板伊厄威克的梦，词源多是同时有好几种。书中的词很多时候是酒馆点酒用的词。所以我认为或许“向麦克老大三呼夸克”源头可能是“敬麦克老大三个夸脱”，那么我要它读“郭克”也不是完全没根据。再怎么样，字句里的三跟自然中夸克的性质完全不谋而合。
</p>
<p class="p3">
    茨威格则用“埃斯”（Ace）来称呼他所理论化的粒子，但是在夸克模型被广泛接纳时，盖尔曼的用词就变得很有名。很多中国物理学家则称夸克为“层子”，在台湾地区亦曾翻译“亏子”，但并不普遍使用。
</p>
</body>
</html>

4.阴影

/*阴影的颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: deepskyblue 10px 10px 2px;
}

5.超链接伪类

/*默认的颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的状态（只需要记住）*/
a:hover{
    color: orange;
    font-size: 50px;
}

6.列表

/*ul li*/
/*circle 空心圆
  decimal 数字
  square 正方形*/
/*ul li*/
ul {
    background: grey;
}
ul li{
    height: 30px; /*行高*/
    list-style: none; /*去掉圆点*/
    text-indent: 1em;
}

7.背景

背景颜色：background

background-image:url(""); /* 默认是全部平铺的 */
background-repeat:repeat-x; /* 水平平铺 */
background-repeat:repeat-y; /* 垂直平铺 */
background-repeat:no-repeat; /* 不平铺 */

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/ceshi.jpeg");
            /*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

8.渐变

渐变背景网址：https://www.grabient.com
径向渐变、圆形渐变

body{
     background-color: #0cd7f3;
     background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
       body{
            background-color: #08AEEA;
            background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
        }
        div{
            width: 500px;
            height: 200px;
            border: 1px solid mediumaquamarine;
            background-image: url("img/str.png");
            /* 默认是全部平铺的 */
        }
        /*水平平铺*/
        .div1{
            background-repeat: repeat-x;
        }
        /*垂直平铺*/
        .div2{
            background-repeat: repeat-y;
        }
        /*不平铺*/
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

五、盒子模型

1.什么是盒子模型

margin：外边距
padding：内边距
border：边框

2.边框

边框的粗细
边框的样式
边框的颜色

/* 边框大小 边框样式 边框颜色 */
border: 1px solid #000000;

3.内外边距

margin：外边距
padding：内边距

/*
    当margin/padding
    有一个参数，上下左右，都有边距
    有二个参数，上下，左右，表示
    四个参数时，上，右，下，左，表示
*/
 margin：0 1px 2px 3px;

盒子的计算方式：元素到底多大？

margin+border+padding+内容宽度

4.圆角边框

4个角

div{
    width: 100px;
    height: 50px;
    margin: 30px;
    border: 2px solid red;
    border-radius: 50px 50px 0px 0px; /* 和边距的参数一样，左上，右上，右下，左下 */
}

5.阴影

/*
h-shadow    必需。水平阴影的位置。允许负值。
v-shadow    必需。垂直阴影的位置。允许负值。
blur    可选。模糊的距离。
color    可选。阴影的颜色。
*/
text-shadow: h-shadow v-shadow blur color;

六、浮动

1.标准文档流

块级元素：独占一行

<!-- h1-h6 p div ... -->

行内元素：不独占一行

<!-- span a img strong ... -->

注意：块级元素可以存在行内元素。

2.display

block：块元素；
inline：行内元素；
inline-block：是块元素，但是可以内联，在一行；
这也是一种实现行内元素排列的方式，但是我们很多情况用float。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dispaly</title>
    <style>
        /*
        block: 块元素
        inline: 行内元素
        inline-block: 块元素，但是可以内联
        none: 隐藏
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

3.float

左右浮动
浮动的元素会脱离标准流

div{
    float: right;/*向右浮动*/
}

4.父级边框塌陷问题

/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none;  不允许有浮动元素
*/
.text{
    clear:both;
}

解决父级边框塌陷问题：

增加父级元素高度

#body{
    border: 1px #000 solid;
    height: 800px;
}

增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

父类添加一个伪类：after

#body:after{
    content: '';
    display: block;
    clear: both;
}

七、定位

1.相对定位

相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留。

top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */

2.相对定位

定位：基于xxx定位，上下左右
没有父级元素定位的前提下，相对于游览器定位
假设父级元素村咋i定位，我们通常会相对于父级元素进行便宜
在父级元素范围内移动
相对于父级或者游览器的位置，进行指定的偏移，绝对定位后，它仍然在标准文档流中，原来的位置不会被保留

div{
  position: absolute;/*绝对定位*/
  top: -20px;/*相对当前的位置 向上移动，负值相反方向*/
  left: 20px;/*相对当前的位置 向右移动*/
}

3.固定定位

固定定位使元素的位置相对于浏览器窗口来定位
即使窗口是滚动的它也不会移动

div{
    position: fixed;/*固定定位*/
    right: 0;
    bottom: 0;
}

4.z-index

图层，用定位的时候会产生会和其他元素重叠
相当于上一层盖住了下一层的内容

div{
    z-index:2;
}

八、动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s; /* 动画执行时间 */
}
@keyframes myfirst{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>