HTML---CSS(基础)

什么是CSS

CSS能够实现美化页面的效果，能够做到页面的样式和式结构分离。就像是日常生活中的化妆。

基本语法

选择器+{一条/N条声明}

复制代码

选择器 {
  属性1: 值1;  /* 声明1 */
  属性2: 值2;  /* 声明2 */
}

    <h1>我是标题h1</h1>
    <style>
        h1{
            color: blue;
            font-size: 50px;
        }
    </style>

CSS的引入方式

行内样式：

在标签内使用style属性，属性值是css属性键值对

复制代码

 <div style="color:green">我是一个div</div>

内部样式：

定义<style> 标签，在标签内定义css样式

复制代码

    <div>我是一个div</div>
    <style>
        div{
            color: rgb(12, 177, 29);
        }
    </style>

外部样式：

定义<link>标签，通过href属性引入外部css文件

规范

冒号后面带空格

选择器和 { 之间也有一个空格

CSS选择器

1.标签选择器

选中指定标签名的所有元素进行修改。

复制代码

标签 { 
    样式声明 
}

    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <style>
        div{
            color: aqua;
        }
        p{
            color: brown;
        }
    </style>

2.class选择器

复制代码

.类名 { 
    样式声明 
}

    <div class="cur">我是一个div</div>
    <div class="cur">我是一个div</div>
    <div class="tem">我是一个div</div>
    <div class="tem">我是一个div</div>
    <style>
        .cur {
            color: blue;
        }
        .tem {
            color: aqua;
        }
    </style>

3.id选择器

复制代码

#id名 { 
    样式声明
}

    <div class="cur" id="one">我是一个div</div>
    <div class="cur" id="two">我是一个div</div>
    <div class="tem" id="three">我是一个div</div>
    <div class="tem" id="four">我是一个div</div>
    <style>
        #one{
            color: aqua;
        }
        #two{
            color: aquamarine;
        }
    </style>

4.复合选择器

后代选择器：

复制代码

祖先元素 后代元素 { 
样式声明 
}

对所有div下的span标签修改

复制代码

    <div>
        <span>直接子元素span</span><br/>
        <p>
            <span>间接子元素span</span>
        </p>
    </div>
    <style>
        div span{
            color: aqua;
        }
    </style>

子选择器：

对直接子元素进行修改

复制代码

<body>
    <div>
        <span>直接子元素span</span><br/>
        <p>
            <span>间接子元素span</span>
        </p>
    </div>
    <style>
        div>span{
            color: aqua;
        }
    </style>

并集选择器：

复制代码

    <h1>我是一个h1</h1>
    <div class="000">我是一个div</div>
    <div class="rue">我是一个div</div>
    <span class="cur">我是一个span</span>
    <style>
        span,.rue{
            color: aqua;
        }
    </style>

可以同时选中多个选择器对应的元素

伪类选择器

作用：选中元素的特定状态

hover:：鼠标悬停时

复制代码

    <input type="button" value="按钮">
    <style>
        input:hover{
            color: brown;
        }
    </style>

当鼠标放在按钮上时，按钮会发生颜色改变

action：点击时

复制代码

    <input type="button" value="按钮">
    <style>
        input:active{
            color: brown;
        }
    </style>

点击的一瞬间按钮发生颜色改变

伪元素选择器

first-letter选中元素的第一个字母

复制代码

    <div>我是一个div</div>
    <style>
        div::first-letter{
            color: aqua;
        }
    </style>

before 在前面插入内容 / after 在后面插入内容

复制代码

    <div>我是一个div</div>
    <style>
        div::before{
            content: "插入的内容";
            color: aqua;
        }
    </style>

5.通配符选择器

对页面全部元素进行修改

复制代码

* { 
    样式声明
}

    <h1>我是一个h1</h1>
    <div class="cur" id="one">我是一个div</div>
    <div class="cur" id="two">我是一个div</div>
    <div class="tem" id="three">我是一个div</div>
    <div class="tem" id="four">我是一个div</div>
    <style>
        *{
            color: brown;
        }
    </style>

常用CSS

color：设置颜色

font-size：设置字体大小

border：设置边框

width / heigh：设置宽度/高度

padding：设置内边距

margin：设置外边距