CSS基础语法

最新推荐文章于 2023-05-16 19:36:46 发布

Wielun

最新推荐文章于 2023-05-16 19:36:46 发布

阅读量316

点赞数

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

本文链接：https://blog.csdn.net/Dream_ya/article/details/84997699

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

一、选择器

在标签上设置style属性,其注释方法：/*内容*/

1、普通设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: red;height: 50px">红色</div>
</body>
</html>

2、id选择器

缺陷id是不能重复的！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: #0f9e60;
            height:50px;
        }
        #i2{
            background-color:#739200;
            height:50px;
        }
    </style>
</head>
<body>
    <div id="i1">dream</div>
    <div id="i2">ya</div>
</body>
</html>

3、class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #0f9e60;
            height:50px;
        }
    </style>
</head>
<body>
    <div class="c1">dream</div>
    <div class="c1">ya</div>
</body>
</html>

4、标签选择器

所有的div标签都改变！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background: green;
            color: wheat;
        }
    </style>
</head>
<body>
    <div class="c1">dream</div>
    <div class="c1">ya</div>
</body>
</html>

5、层级选择器（空格）

可以发现就span下面的div发生的变化！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{
            background: green;
            color: wheat;
        }
    </style>
</head>
<body>
    <div class="c1">dream</div>
    <span>12345
        <div>内联标签</div>
        6789</span>
    <div class="c1">ya</div>
</body>
</html>

6、组合选择器（逗号）

（1）通过id：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2{
            background: green;
            color: wheat;
        }
    </style>
</head>
<body>
    <div id="i1">dream</div>
    <div id="i2">ya</div>
</body>
</html>

（2）通过class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1,.c2{
            background: green;
            color: wheat;
        }
    </style>
</head>
<body>
    <div class="c1">dream</div>
    <div class="c2">ya</div>
</body>
</html>

7、属性选择器

对选择到的标签再通过属性进行筛选！！！

（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type='text']{
            width: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background: green;
            color: wheat;
        }
        .c1[user='dream']{
            width: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="c1" user="dream">dream</div>
    <div class="c1" >dream</div>
    <input class="c1" type="text" user="dream">
    <input class="c1" type="text">
</body>
</html>

（2）

css优先级：标签上style优先，head中的style的编写顺序越下面，优先级越高！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2{
            width: 50px;
            background-color: red;
        }

        .c1{
            width: 50px;
            background-color: wheat;
        }

    </style>
</head>
<body>
    <div class="c1 c2" style="background-color: aqua">dream</div>
</body>
</html>

在浏览器取消掉style，会先显示c1的颜色！！！

二、其它操作

1、css样式写在单独的文件

### HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
</head>
<body>
    <div class="c1">dream</div>
    <div class="c2">yayay</div>
</body>
</html>

### commons.css（CSS文件，同级目录）：
.c2{
    width: 50px;
    background-color: red;
}
.c1{
    width: 50px;
    background-color: wheat;
}

2、边框

border：我们可以调节显示为上下边框，solid：实线；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 10px solid bisque;">dream</div>
</body>
</html>

3、常用属性

height：                高度，百分比（一般不这么写，因为高度是无限的）
width：                 宽度，像素，百分比
line-height：           设置行间的距离（行高）
text-align：center      水平方向居中
color：                 字体颜色
font-size：             字体大小
font-weight：           字体加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 50px;
    width: 60%;
    border: 10px solid blanchedalmond;
    text-align: center;
    line-height: 10px;
    color:rebeccapurple;
    font-size: 10px;
    font-weight: bold;
    ">dream
</div>
</body>
</html>

4、 float

让标签漂浮起来，实现块级标签也可以进行堆叠！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 20%;background-color: #0f9e60;">dream</div>
    <div style="width: 80%;background-color: #b3d271">ya</div>
    <div style="width: 20%;background-color: #0f9e60;">dream</div>
    <div style="width: 90%;background-color: #b3d271;float: right">ya</div>
    <div style="width: 20%;background-color: #0f9e60; float: left">dream</div>
    <div style="width: 80%;background-color: #b3d271;float: left">ya</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header {
            height: 38px;
            background-color: #9cc2cb;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div style="float:left">收藏本站</div>
    <div style="float:right">
        <a>登陆</a>
        <a>注册</a>
    </div>
</div>
<div style="width:300px;border: 2px solid mediumvioletred">
    <div style="width:90px;height:30px;border:2px solid blueviolet;float: left;"></div>
    <div style="width:90px;height:30px;border:2px solid blueviolet;float: left;"></div>
    <div style="width:90px;height:30px;border:2px solid blueviolet;float: left;"></div>
    <div style="width:90px;height:30px;border:2px solid blueviolet;float: left;"></div>
    <div style="width:90px;height:30px;border:2px solid blueviolet;float: left;"></div>
    <div style="width:90px;height:30px;border:2px solid blueviolet;float: left;"></div>
    <div style="width:90px;height:30px;border:2px solid blueviolet;float: left;"></div>
    <div style="width:90px;height:30px;border:2px solid blueviolet;float: left;"></div>
    <!--清除同行元素，不允许其它元素与之在一行内-->
    <div style="clear: both;"></div>
</div>
</body>
</html>

5、display

行内标签：无法设置高度、宽度、padding、margin
块级标签：可以设置高度、宽度、padding、margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span style="background: blue;height: 50px;width: 60px;">dream</span>
    <div style="background: blue;height: 50px;width: 60px;">dream</div>
</body>
</html>

display: none;                   ###让标签消失 
display: inline;                 ###变为行内标签
display: block;                  ###变为块级标签
display:inline-block;            ###具有inline，默认自己有多少占多少；具有block，可以设置高度，宽度，padding，margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="background-color: #b3d271">dream</div>
<span style="background-color: aqua">ya</span>
<br/>
<!--通过block把行内标签变为块级标签-->
<span style="background-color: aqua;display: block;">ya</span>
<!--通过inline把div变为行内标签-->
<div style="background-color: #b3d271;display: inline;">dream</div>
<span style="background-color: aqua">ya</span>

<br/>
<!--通过inline-block把行内标签可以改变大小-->
<span style="display:inline-block;background: blue;height: 50px;width: 60px;">dream</span>
<span style="background: blue;height: 50px;width: 60px;">dream</span>

</body>
</html>

6、padding（内边距）、margin（外边距）

padding:10px;                ###4个内边距都是10px
padding:5px 10px;            ###上下内边距是5px，右左内边距是10px
padding:5px 10px 15px;       ###上内边距是5px，右左内边距是10px，下内边距是15px
padding:5px 10px 15px 20px;  ###上内边距是5px，右内边距是10px，下内边距是15px，左内边距是20px

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border: 1px solid rebeccapurple;height: 50px;">
    <div style="background: blue;height: 30px;margin-top: 10px"></div>
</div>
<br/>
<div style="border: 1px solid rebeccapurple;height: 50px;">
    <div style="background: blue;height: 30px;padding-top: 10px"></div>
</div>
</body>
</html>

7、position

fixed：固定在页面的某个位置
relative+absolute：做出相对定位
    <div style="position: relative;">
        <div style="position:absolute;"></div>
    </div>
opacity：透明度；从 0.0 （完全透明）到 1.0（完全不透明）
z-index：层级顺序，大的在上面

8、fixed

通过fixed属性我们可以完成标题的固定！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:30px;
            background-color: blue;
            color:brown;
            position:fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: bisque;
            height: 100000px;
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div class="pg-header">标题</div>
    <div class="pg-body">内容</div>
</body>
</html>

9、relative+absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div style="position: relative;width: 300px;height: 150px;border: 2px solid rebeccapurple;margin: 0 auto">
        <div style="position:absolute;left:0;bottom: 0;width: 50px;height: 50px;background-color: blue;"></div>
    </div>
    <div style="position: relative;width: 300px;height: 150px;border: 2px solid rebeccapurple;margin: 0 auto">
        <div style="position:absolute;right:0;bottom: 0;width: 50px;height: 50px;background-color: blue;"></div>
    </div>
    <div style="position: relative;width: 300px;height: 150px;border: 2px solid rebeccapurple;margin: 0 auto">
        <div style="position:absolute;right:0;top: 0;width: 50px;height: 50px;background-color: blue;"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div style="z-index:10;position: fixed;background-color: white;
top:50%;left:50%;margin-left: -200px;margin-top: -100px;height: 200px;width: 400px;"></div>

<div style="z-index:9;position: fixed;background-color: #00a0e9;
top:0;bottom: 0;right: 0;left: 0;opacity:0.5"></div>

<div style="height: 10000px;background-color: red;">
    dreamya
</div>
</body>
</html>

10、overflow二种

（1）hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;width:500px;overflow: hidden">
    <img src="test.jpg">
</div>
</body>
</html>

（2）auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;width:500px;overflow: auto">
    <img src="test.jpg">
</div>
</body>
</html>

11、hover

选择鼠标指针浮动在其上的元素，并设置其样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            height: 48px;
            right: 0;
            left: 0;
            top:0;
            background-color: #00a0e9;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width:900px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding:0 10px;
            color: white;
        }
        /*当鼠标移动到此标签上时，才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a>LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">图片</a>
        </div>
    </div>
    <div class="pg-body">aa</div>
</body>
</html>

12、background

background-image:url();          ###默认，图片重复显示
background-repeat: repeat-x;    ###x轴（横向）重复
background-repeat: repeat-y;    ###y轴（向下）重复

###指定显示位置
background-positon-x:10px; 
background-positon-y:10px;
等效于：background-positon:10px 10px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <li>background-color</li>
    <div style="background-color: red;">&nbsp;</div>
    <li>background-image</li>
    <div style="background-image: url('background.png');height: 80px;"></div>
    <li>background-repeat</li>
    <div style="background-image: url('background.png');background-repeat: repeat-x;height: 80px;"></div>
    <br/>
    <div style="background-image: url('background.png');background-repeat: repeat-y;height: 160px;"></div>
    <div style="background-image: url('background.png');height:10px;width:10px;background-position-x: 10px;background-position-y: 10px;"></div>
    <div style="background-image: url('background.png');background-position: 10px;"></div>
</body>
</html>