一、HTML中使用CSS

CSS 用于控制网页的样式和布局。单独使用CSS是没有意义的，它需要在html中使用，使用css有3种方式：

CSS代码：

/*index.css*/

h2 {
    font-size: 30px;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <style>
    h1 {
        font-size: 16px;
    }
    </style>
</head>
<body>
<a href="#" style="font-size: 50px; cursor: auto;">点我</a>
<h1>我是h1</h1>
<h2>我是h2</h2>
</body>
</html>

运行效果：

二、选择器

id选择器

在html中，id这个属性是唯一的，不可以重复，id不能为纯数字；使用 #id 选择标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
  <style>
    #s1 {
        font-size: 60px;
    }
    /*单个*/
    #s2 {
        font-size: 30px; /*字体大小*/
    }
    /*多个，逗号隔开*/
    #s1,#s2{
        background-color: aqua; /*背景颜色*/
        cursor: cell; /*鼠标样式*/
    }
</style>
</head>
<body>

<a href="#" id="s1">这是s1的样式</a>
<br><br><br>
<a href="#" id="s2">这是s2的样式</a>

</body>
</html>

运行效果：

class选择器

类选择器，就是选择同一种类型的标签。使用 .class_name 选择标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
        #s1 {
            font-size: 60px;
        }

        /*单个*/
        #s2 {
            font-size: 30px; /*字体大小*/
        }

        .cla{
            text-decoration: none;
            /* 取消a标签的下划线   */
        }
        /*多个逗号隔开*/
        .cla,.jys{
            width: 100px;
            height: 100px;
            background-color: #00ffcc;
        }
    </style>
</head>

<body>

<a href="#" id="s1" class="cla">这是s1+cla的样式</a>
</br>
<a href="#" id="s2" class="cla">这是s2+cla的样式</a>
</br>
<button class="jys">这是一个按钮是jys的样式</button>
</body>
</html>

运行效果：

？标签选择器

选择一个或多个标签来加样式，同类型所有的标签都会影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #s1 {
            font-size: 60px;
        }

        /*单个*/
        #s2 {
            font-size: 30px; /*字体大小*/
        }
        a{
            text-decoration: none;
            /* 取消a标签的下划线   */
        }
        /*多个逗号隔开*/
        a,button{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<a href="#" id="s1" class="qdxhx">点我</a>
</br>
<a href="#" id="s2" class="qdxhx">点我2</a>
</br>
<button class="jys">我是一个按钮</button>
</body>
</html>

运行效果：

组合选择器

组合选择器可以把上面几种选择器组合起来使用

<!DOCTYPE html>
<!--声明html类型-->
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
        /*多个逗号隔开*/
        #div1 {
            width: 200px;
            /*宽度*/
            height: 200px;
            /*高度    */
            background-color: aqua;
        }
        #div2 {
            width: 200px;
            /*宽度*/
            height: 200px;
            /*高度    */
            background-color: green;
        }
        /*div1 下面的a标签*/
        #div1 a {
            cursor: cell;
        }
        #div2 .qdxhx {
            text-decoration: none;
        }

        /*属性选择器*/
        button[type]{
            height: 50px;
        }
        button[type=submit]{
            background-color: red;
        }

    </style>
</head>
<body>
<div id="div1">
    <a href="#" >点这里</a>
    </br>
</div>
<br>
<br>
<br>
<div id="div2">
    name:<input type="text">
    </br>
    <a href="#" >点我</a>
    </br>
    <button type="submit">我是一个按钮</button>
    <button type="reset">我是一个按钮reset</button>
</div>
</body>
</html>

运行效果：

三、css常用属性

所有属性查询文档 CSS 教程 | 菜鸟教程

名称	作用	值	备注
width	宽	Npx
height	高	Npx
border	边框	Npx，边框类型	CSS Border(边框) \| 菜鸟教程
background-color	背景颜色	颜色代码
background-image	背景图片	图片url
background-size	背景图片大小	两个值宽和高的px
margin	外边距	Npx，可以传1个，可以传4个	CSS margin(外边距) \| 菜鸟教程
margin-left、margin-right、margin-bottom、margin-top	上下左右外边距	Npx
padding	内边距	Npx，可以传1个，可以传4个	CSS padding（填充） \| 菜鸟教程
padding-left、padding-right、padding-bottom、padding-top	上下左右内边距	Npx
font-size	字体大小	Npx
text-align	文字对齐方式	right、left、center
line-height	行高	Npx、百分比
display	改变元素类型	none、block、inline、inline-block
position	元素定位	absolute、fixed、relative
z-index	显示优先级	整数/负数，数字越大优先级越高
overflow	控制内容溢出元素框时显示的方式	hidden、scroll、auto
float	块级元素浮动	left、right