CSS学习

2022-04-05 09:01:32 阅读：151 来源： 互联网

标签：h1 color 标签元素学习 background 选择器 CSS

CSS学习

1、我的第一个CSS程序

style.css：

h1{

    color: red;
}
index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写css的代码，每一个声明最好使用分；结尾！
    语法：
        选择器{
          声明1；
          声明2；
          声明3；
        }
    -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>我是标题</h1>
</body>
</html>
2、导入方式
index1：

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

   <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
   <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
<!--外部样式两种写法
1、链接式：
    <link rel="stylesheet" href="css/style.css">
2、导入式：css2.0@-->
    <style>
        h1{
            color: green;
        }
    </style>

</head>
<body>
   <!--优先级：行内样式>内部样式>外部样式
    就近原则，谁离“h1”这个元素最近就用它！
    -->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1style color="read">我是标题</h1style>
</body>
</html>
index2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--外部样式：导入式-->
    <style>
        @import url(css/style.css);
    </style>
</head>
<body>


<h1>狂神说java</h1>
</body>
</html>

3、基本选择器
1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，会选择页面上所有的这个标签的元素*/
        h1{
            color: #a13d30;
            background: #32b578;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
        /*标签选择器的弊端：若只想要第一个h1变色，第二个不变，没有办法分开*/
    </style>
</head>
<body>


<h1>学java</h1>
<h1>学java</h1>
<p>听老师说</p>

</body>
</html>
2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式，  .class的名称{}
        好处，可以多个标签gui归类，是同一个class，可以复用，可跨标签使用。

         */
        .qinjiang{

            color: #1442db;
        }
        .kuangshen{
            color: #af69c9;

            }

    </style>
</head>
<body>


<h1 class="qinjiang">标签1</h1>
<h1 class="kuangshen">标签2</h1>
<h1 class="qinjiang">标签3</h1>
<p class="qinjiang">p标签</p>
</body>
</html>

3.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*id选择器  ：id必须保证全局唯一！
      #id名称{}
      优先级：
      不遵循就近原则，固定的
      id选择器 > class选择器 > 标签选择器
      */
        #qinjiang{
            color: #ff008a;
        }
        .styl1{
            color: #02ff00;
        }
        h1{
            color: #2d1dc1;
        }
    </style>
    
</head>
<body>

<h1 class="styl1" id="qinjiang">标题1</h1>
<h1 class="styl1">标题2</h1>
<h1 class="styl1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>


</body>
</html>

4、层次选择器
index：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/
        /*后代选择器*/
        /*    body （空）p{*/
        /*        background: red;*/
        /*    }*/
        /*子选择器*/
        /*    body>p{*/
        /*        background: #3cbda6;*/
        /*    }*/
        /*相邻兄弟选择器:只有一个，相邻（向下）*/
        /*    .active + p{*/
        /*        background:#a13d30;*/
        /*    }*/
        /*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/
        /*    .active~p{*/
        /*        background: #02ff00;*/
        /*    }*/

    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</ul></body>
</html>

5、结构伪类选择器
index：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用，class，id选择器-->
    <style>
     /*ul的第一个子元素*/
     ul li:first-child{
       background: #02ff00;
     }
     /*ul的最后一个子元素*/
     ul li:last-child{
         background: #ff008a;
     }
     /*选中p1：定位到父元素，选择当前的第一个元素*/
     /*选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效!,顺序*/
     p:nth-child(1) {
         background: #2700ff;
     }
        /*选中父元素，下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: yellow;
        }
        /*a:hover{*/[鼠标指上去才有颜色，产生动画效果]
        /*    background: #a13d30;*/
        /*}*/
    /*    伪类有个动作*/

    </style>
</head>
<body>
<!--<a href="">312331</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li id="qinjiang">li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

标签：h1,color,标签,元素,学习,background,选择器,CSS
来源： https://www.cnblogs.com/LiLi8866/p/16101435.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS学习