CSS基础

妖狐艹你老母 2021-11-10 13:44 375阅读 0赞

### CSS简介 ###

`CSS` = 层叠样式表(Cascading Style Sheets)

用于定义HTML内容在浏览器内的显示样式:字体大小,颜色,字体加粗等

优势:极大地提高了工作效率

### CSS代码语法 ###

selector{
    	property:value
    	}

`selector`: 选择器,选择对哪一个进行显示样式的设置

`property`: 属性

`value`: 属性值

#### 修改样式的简单实例 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> p{ font-size: 50px; color: blue; font-family: "微软雅黑" } </style>
    </head>
    <body>
        <p>哈哈</p>
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bThzdTVxdDFqMzBjcTA1a3Q4ay5qcGc][]

> 分析

在中建立了

#### 修改样式的实例2\_多个一起修改 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> div,p,h1{ width: 100px; height: 100px; background-color: antiquewhite; } </style>
    </head>
    <body>
        <p>哈哈</p>
        <div>哈哈</div>
        <h1>哈哈</h1>
    </body>
    </html>

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bTh5ejl1cmxqMzBsOTBkc3EyeS5qcGc][]

div,p,h1{
    }

这样就对`div,p,h1`都设置了一样的显示样式

### CSS注释代码 ###

快捷方式: `CTRL+?`

### CSS引入方式 ###

1.  内部样式
2.  行内样式
3.  外部样式
4.  导入样式

> 推荐使用内部样式和外部样式,行内样式尽量少用

#### 内部样式 ####

`div,p,h1` 放在了

#### 行内样式 ####

哈哈

\`\`\`

> 结果

![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bTlsc2dmaXBqMzBjNDA1bDc0NS5qcGc][]

#### 四种方式的优先级 ####

> 行内样式>内部样式>外部样式>导入样式

内部样式>外部样式的前提是: 内部样式的css样式的位置在外部样式的后面

[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bThzdTVxdDFqMzBjcTA1a3Q4ay5qcGc]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bThzdTVxdDFqMzBjcTA1a3Q4ay5qcGc
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bTh5ejl1cmxqMzBsOTBkc3EyeS5qcGc]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bTh5ejl1cmxqMzBsOTBkc3EyeS5qcGc
[aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bTlsc2dmaXBqMzBjNDA1bDc0NS5qcGc]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc1bTlsc2dmaXBqMzBjNDA1bDc0NS5qcGc