WEB7.8
选择器
/<p> 输入内容</p>
/<div id="box1"> </div>
/<div class="box2"> </div>
-
标签选择器:
/<style> p{
color:
}
</style>
-
id选择器:
#box1{
color:
}
-
类选择器
.box2{
color:
}
-
通配符选择器
*{
/*background-color:
}
-
包含选择器
-
复合选择器
div,
p,
span{
color:red
}
-
属性选择器
div[id]{
width:
height:
background-color:
}
type^="te"----指type值中te开头的
type*=----指type中包含的
伪类选择器
<style></style>
-
a:link{
color: ;
}
-
a:visited{
color
}
-
a:hover//鼠标悬停{
cursor:cell;//鼠标样式
font-size:40px;
}
-
a:active{
font-size:70px;
}
结构伪类选择器
ul>li*7//构建7个无序
-
ul li:nth-child( ){
background-color:
}
父元素 子元素:nth-child(n) :父元素第n个子元素
even:偶数 odd:奇数
child:看的是第几行(编码所有子元素)
-
ul li:nth-of-type(n){
background-color:
}
of-type:选择li子元素进行涂色
伪元素选择器
-
ul li::before{
content:"(内容前加东西)"
}
-
ul li::after{
content:“(内容后面加东西)”
}
文体外观
/<style>
p{
fond-size:20px;
fond-indent:2em; em----当前字体大小
}
</style>
-
文本水平对齐方式
text-align:center;//文本水平对齐方式
line-height:200px;//单行文本垂直居中
-
文本装饰
text-decoration:
-
list
list-style:none;//去掉前面符号
-
元素显示模式转换(行内元素无法设置宽高 转换为行内块 元素)
display:none; //隐藏元素
display:inline-block; //将元素转化为行内块元素
display:inline; //行内元素
-
背景
-attachment:fixed //保持背景面不动下滑
-position:top //所处位置
-
边框
border-width: //设置边框宽度
border-style:solid //边框样式
border:4px solid black
border-top-left-radio:40%
-
合并相邻边框
border:5px solid red; //边框红色
-
阴影
box-shadow:2px 2px 10px 10px black
2px:横坐标偏移量
2px:纵坐标偏移量
-
轮廓线
outline-style -width -color
-
防拖拽
resize:none; //防止拖拽
vertical-align:top/middle/bottom; //改变文字对齐方式
-
隐藏元素
display:none; //隐藏第一个box,下一个顶替后面跟 display:block
visibility:none; //隐藏第一个,但位置保留
-
绝对定位
position:relative //相对定位
position:absolute //绝对定位,不保留原来位置
-
固定定位
position:fixed; //相对于可视区域进行定位
-
粘性定位
position:sticky //开始滑动后,到达某一指定段落,开始跟着滑动