收藏
批改状态：合格
老师批语：
CSS中常用的三种单位案例
px是像素单位，相对于当前显示器的值
em是元素单位，相对于当前父元素字体的大小，默认1em=16px
rem是跟元素单位，相对于更元素html的字体大小，默认1rem=16px，最小不小于12px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>元素的单位 px,em,rem</h3>
<div class="px">px</div>
<div class="em">em</div>
<div class="rem">rem</div>
<style>
html{
/*font-size: 12px;*/
}
.px{
font-size: 20px;
width: 100px;
height: 100px;
background-color: lightgreen;
line-height: 100px;
text-align: center;
}
.em{
font-size:20px;
width: 5em;
height: 5em;
background-color: lightblue;
line-height: 100px;
text-align: center;
}
.rem{
width: 6.25rem;
height: 6.25rem;
font-size: 1.25rem;
background-color: lightcoral;
line-height: 6.25rem;
text-align: center;
}
</style>
</body>
</html>点击 "运行实例" 按钮查看在线实例
CSS中常用的选择器
（1）id选择器，通过设置元素的id属性来设置
（2）类选择器，通过设置元素的class 属性设置
（3）属性选择器：通过属性名称，属性值，以及属性值中的文本内容进行选择，返回元素的集合
（4）层级选择器：通过doom树的父元素来定位，多个层级通过空格区分
（5）子选择器：根据父元素定位：只隔一个层级
(6) 相邻选择器：根据相邻元素定位，需要找到同级别元素的起点
（7）群组选择器：可以自定义选择某些元素，也可以选择全部元素
（8）伪类选择器：
1.状态标签选择器，例如hover,link,visited等
2.根据元素的位置选择，例如li:first-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
</head>
<style>
ul{
padding: 0;
margin: 0;
width: 500px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after{
content: '';
display: block;
clear: both;
}
ul li{
list-style: none;
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
box-shadow: 2px 2px 2px #888;
background-color: skyblue;
margin: 5px;
border-radius: 50%;
}
/*id选择器*/
#item1 {
background-color: coral;
}
.item2{
background-color: gold;
}
/*类选择器*/
ul li[class]{
background-color: blueviolet;
}
ul li[class^= "cat"]{
background-color: grey;
}
ul li[class$="pig"]{
background-color: red;
}
ul li[class*="t"]{
background-color: green;
}
/*//后代选择器,层级选择器*/
body ul li {
border: 1px solid black;
}
/*子选择器*/
ul > li[class^= "pig"]{
background-color: greenyellow;
}
/*相邻选择器*/
ul li[class$= "pig"] ~ * {
background-color: black;
color: white;
}
/*相邻选择器*/
ul li[class$="pig"] + li
{
background-color: pink;
}
/*群组选择器*/
h1. p{
font-size: 2rem;
font-width: lighter;
margin: 0;
}
a{
font-size: 2rem;
}
/*状态选择器a标签*/
a:link{
color: red;
}
/*访问后*/
a:visited{
color: orange;
}
a:focus{
color: purple;
}
a:hover{
color: green;
}
a:active{
color: blue;
}
/*位置选择器*/
ul li:first-child{
background-color: #efefef !important;
}
ul li:last-child{
background-color: red;
}
ul li:nth-child(5)
{
background-color: red;
}
ul li:nth-child(odd)
{
background-color: purple;
}
ol:only-child{
background-color: lawngreen;
}
ol li:only-child{
background-color: lawngreen;
}
ul li:nth-last-child(3){
background-color: red;
}
ol li:nth-of-type(2){
background-color: wheat;
}
/*空元素操作标签*/
:empty{
width: 220px;
height: 270px;
background-color: orange;
}
:empty:after{
content: "dadadada";
}
</style>
<body>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog pig">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>css选择器大法</h1>
<p>imppppppppp</p>
<a href="http;//www.php.cn">php</a>
<ol>
<li>列表项1</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
