CSS样式基础样式选择器(案例+代码实现+效果图)

news2024/10/5 19:31:50

目录

1.css样式的规则

2.引入css样式的方式

1)行内式

2)内嵌式

3)外链式

1-link导入

2-@import导入

4)总

3.css基础选择器

1)标签选择器

案例：使用标签选择器编写一个圆

1.代码

2.效果

2)类选择器

案例：使用类选择器为div添加背景色

1.代码

2.效果

3)id选择器

案例使用id选择器做一个三角形

1.代码

2.效果

1.css样式的规则

css的作用是对页面的样式进行修改,这就需要我们能够找到对应的标签，引入选择器概念，选择器作用就是标记标签，标记之后可以用css进行对标签进行修饰

注: div是盒子模型,color属性是控制字体的颜色，font-size是控制字体的大小

2.引入css样式的方式

1)行内式

通过style属性设置标签样式.

2)内嵌式

将css写在head标签中，并且使用style标签

效果图:

3)外链式

1-link导入

通过link标签引入外部的css样式对标签进行修改

效果图

2-@import导入

在style标签通过 @import 导入外部文件

<style type="text/css">

@import "css路径"

</style>

<style type="text/css">

@import url(css路径)

</style>

4)总

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Css引入的方式</title>

<style>

p{

color: blue;

}

</style>



<link rel="stylesheet" href="./style.css"></link>

</head>

<body>



<h2>内联式</h2>

<div style="

width: 200px;

height: 200px;

background-color: cadetblue;

">

</div>

<hr color="red" size="5" />



<p >这是内嵌式的p标签</p>

<hr color="green" size="5" />



<h1>这是外联式的标签h1</h1>

</body>

</html>

h1{

color: aqua;

}

效果图

3.css基础选择器

1)标签选择器

通过标签名字进行标记，并且进行修饰

案例：使用标签选择器编写一个圆

1.代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>标签选择器</title>

<style>

div{

background-color: aqua;

border: 50%;

width: 200px;

height: 200px;

}

</style>

</head>

<body>

<div >

</div>

</body>

</html>

注： border-radius: 50%; 这个是边框的弯曲程度

background-color这个属性是标签的背景颜色

2.效果

2)类选择器

通过标签的class属性进行标注

案例：使用类选择器为div添加背景色

1.代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>类选择器</title>

<style>

.myBox{

width: 200px;

height: 200px;

background-color: cadetblue;

}

</style>

</head>

<body>



<div class="myBox">

</div>

</body>

</html>

2.效果

3)id选择器

通过标签的id属性进行选择标注

注：id选择器使用#进行标识，后面是名字

案例使用id选择器做一个三角形

1.代码

注: border-left 是左边的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #myDiv {
            width: 0px;
            height: 0px;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-top: 200px solid rgb(25, 128, 231);
        }

        #myDiv2 {
            width: 0px;
            height: 0px;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 200px solid rgb(25, 128, 231);
        }
        #myDiv3{
            width: 0px;
            height: 0px;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent; 
            border-left: 200px solid rgb(248, 129, 32);
        }

        #myDiv4{
            width: 0px;
            height: 0px;
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent; 
            border-right: 200px solid rgb(248, 129, 32);
        }

    </style>
</head>
<body>
    <!-- 倒三角 -->
    <div id="myDiv">
    </div>
    <!-- 正三角 -->
     <div id="myDiv2">
    </div>

    <!-- 左三角 -->
     <div id="myDiv3"></div>
    
     <!-- 右三角 -->
      <div id="myDiv4"></div>
</body>
</html>