选择器：1.基本选择器
2.包含选择器
3.复合选择器
4.属性选择器
5.伪类选择器
6.结构伪类选择器
7.伪元素选择器
一.基本选择器（div class=“box1” id=“box2”）
1.标签选择器
p
{
color：选择一个颜色；}
2.id选择器
#box2{
color： ；}
3.类选择器
box1{
color： ；}
4.通配符选择器
*{
color： ；}
二.包含选择器
1.子代选择器（选亲儿子）
a>li{
color: ;}
2.后代选择器（选全部后代）
a li{
color: ;}
三.复合选择器 （逗号选择器）
<style>
div,
p,
span{
color: ;}
</style>
四.属性选择器
1.input[type^="te"]{
background-color: ;} (以te开头）
2.input[type$="l"]{
background-color: ;}（包含该属性)
3.input[type*="e"]{
background-color: ;}(结尾）
五.伪类选择器
a:active(点击中）/hover（悬停）/link（点击前）/visited（点击后）{
font-size: ;}
a:hover div{
background: ;}(建立一个盒子）
...
<body>
<a herf="#">去百度</a>
...
</body>
六.结构伪类选择器
<style>
ul li(父元素):选择符（子元素）{
background: ;}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
七.伪元素选择器
<style>
ul li::befor（在选中文字前）/after（后）/placeholder（与input连用，input应在form表单里，修改表单中的提示词）/selection（文字选中时）{
content :"";</style>
<body>
<ul>
<li>1</li>
</ul>
</body>
文本相关样式
<style>
div {
height: 200px;
background-color: pink;
/*缩进 em为字体大小*/
text-indent: 2em;
/* 文本水平对齐方式 */
text-align: center;
/*去除水平线*/
text-fecoration:none;
/*防溢出*/
overflow: auto;
/* 行高 单行文本垂直居中 行高=元素高度*/
line-height: 200px;
}
</style>
list--列表
/*去除无序列表前的标志*/
list-style:none;
/*空心圆*/
list-style:circl;
元素显示模式转换
元素分为:行内元素,块元素,行内块元素
<style>
.box {
/* 行内元素无法设置宽、高 转换为行内块元素 */
/* display: none;隐藏元素，脱离文档流 */
display: none;
/* display: inline-block; 将元素转换为行内块元素 */
/* display: inline; 行内元素 */
width: 300px;
height: 300px;
background-color: pink;
}
span {
display: inline-block;
/* display: block; 块元素 */
width: 300px;
height: 300px;
/*固定*/
backgroundd-attachment:fixed;
/*左上方移动*/
backgroundd-position:top left
background-color: rgb(15, 105, 66);
}
</style>
边框
/*边框宽度*/
border-width: 2px;
/*边框的形状*/
border-style: dashed;
/*边框的颜色*/
border-color: black;
/*边框的幅度*/
border-radius: 10px;
/*合子左上编成50%*/
border-top-left-radius: 50%;
/*合并相邻边框*/
table
{border-collapse: collapse;}
阴影
/*边框阴影*/
box-shadow: 20px 20px 10px 10px black;
/*负值为上方*/
/*字体阴影*/
text-shadow:
轮廓线
outline: none;/*取消轮廓线*/
outline-style: groove;/*轮廓线风格*/
防拖拽
textarea{
resize: none;——防拖拽
vertical-align: top;
vertical-align: middle;——改变文字对齐方式
vertical-align: bottom;
}
隐藏元素
.box1 {
/*脱离文档流，原来的位置不再保留 */
display: none;
visibility: hidden;/*元素隐藏，位置保留 */
opacity: 0;
background-color: pink;
}
定位
/*绝对定位,不保留原来位置子绝父相
父亲没有相对定位，继续向上找，谁有相对定位，
以谁作为参考移动如果都没找到，则相对于浏览器进行定位*/
position:absolute:
/*相对于浏览器距离*/
top: left:
/* 固定定位:相对于可视区域进行定位 */
position: fixed;
/*粘性定位*/
.one {
position: sticky;
top: 0;
background-color: pink;
}
<body>
<p class="one">xxxxxx</p>
4911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
