web前端day-05css样式

最新推荐文章于 2024-03-11 16:18:08 发布

weixin_52368930

最新推荐文章于 2024-03-11 16:18:08 发布

阅读量241

点赞数 1

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

版权

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>

显示效果：在这里插入图片描述
②子选择器

最低0.47元/天解锁文章

weixin_52368930

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端day-05css样式

W3C组成结构html，表现css，行为javascriptcss基本语法一、建立与css的联系 <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/test1.css"> </head><body> 在css里面设置格式二、css的四种引入方式&
复制链接

扫一扫