CSS基础知识_博客园css-优快云博客

1.css是什么

css 层叠样式表 ,可以是实现美化页面的效果,能够做到页面的样式和结构分离

2.语法:

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

选择器决定对谁修改,声明决定修改啥

css要写到style标签中

3.引入方式

a.内部样式表

写在style标签中,内嵌到html内部,style一般放到head标签中

行内样式表(通过style属性,指定某个标签的样式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    h1{
        color:blue ;
        font-size:10px;
    }
</style>

</head>
<body>
    我的博客
    <style> 
        p{
            color:blueviolet;
        }
    </style>
    <p style="font-size:20px; color: red;">css内部样式表</p>
    <p>  内部样式表  </p>
    <!-- 行内样式表优先级高 -->
    <h1 style="color:green;" >字体颜色蓝色</h1>

</body>
</html>

b.外部样式表

创建一个css文件,使用link标签在html文件中引入css文件

rel="stylesheet"引入的文件是一个样式表 href="css文件的路径"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <p>hello css</p>

</body>
</html>

4.选择器的种类

选择器分为基础选择器(单个选择器构成)和复合选择器(多种基础选择器综合起来使用)

基础选择器

a.标签选择器(上述内部样式表引入p标签,h1标签)

能快速为同一类的标签都选择出来

b.类选择器

可以让多个标签使用,差异化表示不同标签

类名用.开头 ,一个类可以被多个标签使用,一个标签也可以使用多个类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    .blue{
        color: blue;
        width: 200px;
    }
</style>

<style>
    .red{
        
        color: red;
    }
    .green{
        
        background-color: green;
    }
    .box{
     font-size:20px ;
    }
 </style>

</head>
<body>
    
<div class="blue">这个是蓝色的</div>
<div>这个是蓝色的吗?</div>
<!-- 使用多个类名 -->
 
    <div class="box red">
        <span>这个是红色的字吗</span>
    </div>
    <div class="box green">
        <span>这个是绿色的背景吗</span>
    </div>
</body>
</html>

c. id选择器

css中使用#开头表示id选择器

id选择器的值和html中某个元素的id值相同

html的元素id值不用带#号

/*id是唯一的,不能被多个标签使用*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">


<style>
    #he{
        color:green;
        font-size:60px ;
        background-color: red;
    }
</style>

</head>
<body>
    <p>hello css</p>

    <div id="he">我爱学习</div>
    <div id="he">学习使我快乐</div>
    <p id="he">hahahah</p>
</body>
</html>

d.通配符选择器

使用*定义,选取所有的标签


<style>
    #he{
        color:green;
        font-size:60px ;
        
    }
    * {
        background-color: yellow;
        color: red;
    }
</style>

</head>
<body>
    <p>hello css</p>

    <div id="he">我爱学习</div>
    <div>学习使我快乐</div>
    <div>前端后端</div>

    <p id="t">hahahah</p>
</body>
</html>