web前端day-05css样式

最新推荐文章于 2023-07-26 04:36:05 发布

weixin_52368930

最新推荐文章于 2023-07-26 04:36:05 发布

阅读量258

点赞数 1

本文链接：https://blog.csdn.net/weixin_52368930/article/details/115708959

版权

本文详细介绍了CSS的基础知识，包括W3C的结构、表现和行为概念，以及CSS的四种引入方式：嵌入式、内部样式表、外部样式表和@import。接着，重点讲解了各种选择器的用法，如通配符选择器、标签选择器、类选择器、ID选择器、派生选择器（后代、子、相邻选择器），并举例说明了它们的显示效果和使用场景。此外，还讨论了选择器的优先级和元素间的共用问题，以及如何设置字体样式和文本属性。

摘要由CSDN通过智能技术生成

W3C组成
结构html，表现css，行为javascript
css基本语法
一、建立与css的联系

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test1.css">
    
</head>
<body>

在css里面设置格式

在这里插入图片描述
二、css的四种引入方式
<!-1.嵌入式（行嵌式）,写在标签内–>

p style="color:red;font-size: 30px;">欢迎来到羊驼老师课堂</p>

<!-2.内部样式表：一般写在中的title后面，必须将样式包含在中–>

    <style>

        .p2{
   
            color:blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p class="p2">欢迎来到羊驼老师课堂</p>

<!-3.外部样式表：–>

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/p3.css">
   
</head>
<body>
<p class="p3">欢迎来到羊驼老师课堂</p>

<!-4.@import引入–>本质上与第三种相像

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css/p4.css";

 
    </style>
</head>
<body
<p class="p4">欢迎来到羊驼老师课堂</p>
</body>
</html>

三、css选择器

<style>
        * { /*初始化，盒模型会讲到*/
            padding: 0;  
            margin: 0;
        }
        </style>

1.通配符选择器*匹配所有标签，慎用
2.标签选择器 p div a…

<head>
 <style>
 p {
   
            color: red;
            font-size: 30px;
        }
 </style>
 </head>
 <body>
<p>欢迎来到羊驼老师课堂</p>        
</body>

3.类选择器

<head>
 <style>
 .p1 {
   
            color: red;
            font-size: 30px;
        }
 </style>
 </head>
 <body>
<div class="p1">我是p1</div>      
</body>

4.id选择器

<head>
 <style>
 #p1 {
   
            color: red;
            font-size: 30px;
        }
 </style>
 </head>
 <body>
<p class="p1" id="p1">我是pppppppp</p>
</body>

5.派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
分为三种：后代选择器，子选择器，相邻选择器
①后代选择器

 <style>
   
     div.p2{
      !*找到类为p1的p标签*!*/
            color:red;
        }


    </style>
</head>
<body>

<div class="p1">
    <p class="p3">jalkjdgkljagl</p>
    <p class="p2">dagljlagjkla</p>
    <div class="p4">dagljlagjkla</div>
</div>
<div class="p2">
    dew
</div>

</body>