WEB7.8笔记

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