web笔记

选择器
/<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 //开始滑动后，到达某一指定段落，开始跟着滑动

定位补充

z-index： //显示优先级
————————————————
版权声明：本文为CSDN博主「wzw_______」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wzw_______/article/details/131632296