css标签选择器,类选择器

一,类选择器


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-css类选择器.htmltitle>
    
    <style>
        .p1{
            color: red;
        }
        .p2{
            color: burlywood;
        }
        .p3{
            color: greenyellow;
        }
        .p4{
            color: cyan;
        }
        .para1{
            color: green;
        }
        .para2{
            font-size:50px;
        }
    style>
head>
<body>
<h1>成功法则h1>
<p class="p1">迟到毁一生p>
<p class="p2">早退穷三代p>
<p class="p3">按时上下班p>
<p class="p4">终成高富帅p>
<br>
<p class="para1 para2">我是段落p>
body>
html>

二,id类选择器和class选择器的比较


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-cssid选择器和class选择器.htmltitle>
    

    <style>
        /*
        .para1{
            color: red;
            font-size: 30px;;
        }
        .para2{
            font-size: 30px;
            text-decoration: underline;
        }
        .para3{
            color: red;
            text-decoration: underline;
        }*/

        .coloR{
            color: red;
        }
        .size30{
            font-size: 30px;
        }
        .line{
            text-decoration: underline;
        }
    style>
head>
<body>





<p class="coloR size30">第一段文字p>
<p class="size30 line">第二段文字p>
<p class="coloR line">第三段文字p>
body>
html>

你可能感兴趣的:(前端基础语言从学习)