CSS基础语法

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wielun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值