116-html选择器_html116-CSDN博客

本文链接：https://blog.csdn.net/qq_33781658/article/details/84885549





id选择器
元素的id是不能重复的
所以一个id选择器只能对应一个id,也就是一个标签
id名一般都是给程序使用的
所以一般不用id选择器
#box{
	background: red;
}

<div id="box">abc</div>
所以其实呢id选择器一般只做定位
不用来做一些样式




组选择器
多个选择器,如果有同样的样式设置
.box1, .box2, .box3{
	background: red;
}




伪类选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上的状态
比如
.box1{
	background: red;
}
.box1:hover{
	background: yellow;
}
这样,鼠标放上去的时候,背景颜色就会变化





CSS显示特性
display属性是用来设置元素的类型以及隐藏的
1.none 元素隐藏且不占位置
2.inline 元素以行内元素显示
3.block 元素以块元素显示




<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
    <style type="text/css">
    li {
        display: inline;
    }
    </style>
</head>

<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
    </ul>
</body>
</html>


这样可以让li都横向排列开来





CSS元素溢出
1.visible 内容不会被修剪,直接超出父级
2.hidden  其余内容不可见,只显示父级范围内
3.scroll  浏览器显示滚动条,可以查看剩余内容
4.auto    需要滚动条的时候才显示滚动条

overflow: visible;






我们用快捷方法来创建表格
table> (tr>td*5) *5

然后按tab键
这样我们就创建了5行5列的表格

.table{
	width: 500px;
	height: 300px;
	border: 1px solid black;
}

.table td{
	border: 1px solid black;
}


我们可以设置一下边线合并

.table {
	width: 500px;
	height: 300px;
	border: 1px solid black;
	border-collapse: collapse;
}

这样边框的线条都合并了



把文字都居中一下
.table td{
	text-align: center;
}