css样式表的使用方式

一、css的三种引入方式：

1、行内样式

<p style="background-color: red">行内样式</p>

2、内部样式表

<head>
    <meta charset="UTF-8">
    <title>基本选择器详解</title>

    <style>
        /*基本选择器*/
        /*标签选择器：选择页面上所有的标签*/
        h1{
            color: red;
            background-color: grey;
            /*文本对齐方式*/
            text-align: center;
            /*圆角*/
            border-radius: 10px;
        }
        /*类选择器   .class的名称*/
        .qinjiang{
            color: green;
            background-color: gold;
            /*文本对齐方式*/
            text-align: center;
            /*圆角*/
            border-radius: 20px;
            font-family: 楷体;
            font-size: 50px;
        }



        /*id选择器  #id名称*/
        #qin{
            color: darkorange;
            background-color: brown;
        }

        /*id选择器>类选择器>标签选择器*/
    </style>
</head>

内部样式表是将css样式写在head标签内的style标签中。

3、外部样式表

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <link rel="stylesheet" type="text/css" href="../css/属性选择器.css">
</head>
<body>

 

 在外部新建一个css文件，通过在head标签中过的link标签引入外部样式表，这里使用的是相对路径。

 

样式表的优先级：行内样式>内部样式，行内样式>外部样式。

内部样式和外部样式谁起作用主要在于谁在head标签中的位置更靠前，谁的优先级就更高。

 

posted @ 2023-01-17 12:19  😂😂幺力儿园毕业😂😂  阅读(235)  评论(0)    收藏  举报