CSS

第一个CSS程序

  • index.html
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>title</h1>

</body>
  • css.style
/*
css语法：
选择器{
    声明1;
    声明2;
}
 */

h1{
    color:red;
}

基本选择器

  • 标签选择器
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color:darkcyan;
        }
    </style>
</head>
<body>
<h1>java</h1>
</body>
  • 类选择器
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .java{
            color:darkcyan;
        }
    </style>
</head>
<body>

<h1 class="java">java</h1>

</body>
  • id选择器
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #java{
           color:darkcyan;
       }
   </style>
</head>
<body>
<h1 id="java">java</h1>
</body>

层次选择器

  • 后代选择器
body p{
            background: green;
        }
  • 子代选择器 一代
body>p{
            background: green;
        }
  • 兄弟选择器
.a + p{
            background: green;
        }
  • 通用选择器
.a~p{
            background: green;
        }

结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{
 background:red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background:red;
}
/*选中父元素下的p元素的第二个*/
p:nth-of-type(1){
background:red;
}
  • 鼠标移动变色
a:hoverf{
  background:red;
}

属性选择器（重要）

  • 存在id属性的元素
a[id]{

}
  • id=first的元素
a[id=first]{

}
  • class中有links的元素
a[class*="links"]{

}
  • 选中href中以http开头的元素
a[href^=http]{

}
  • 选中href中以http结尾的元素
a[href$=jpg]{

}

span标签：重点突出的字

#title1{
  xxx;
}
欢迎学习<span id="title1">java</span>
posted @ 2022-12-14 10:20  Benny1799  阅读(49)  评论(0)    收藏  举报