Python基础（五）

伪类选择器

• s1:hover 当鼠标悬停在s1上时触发css

使用技巧：

s1:hover s2{…}

s1:hover > s2{…}

s1:hover + s2{…}

s1:hover ~ s2{…}

• s1:focus{…} 当s1获取到光标时触发

• s1:first-child{…} 匹配s1父级里面的第一个元素s1

  • 先找到s1的父级
  • 找到父级里面的第一个儿子元素
  • 第一个儿子元素是不是s1

• s1:first-of-type{…} 匹配s1父级里面所有s1中的第一个

  • 先找到s1的父级
  • 找到父级里面的所有s1
  • 找到s1中第一个

• s1:last-child{} 匹配s1父级里面的最后一个元素s1
  s1:last-of-type{} 匹配s1父级里面所有s1中的最后一个

  s1:nth-child(N){} 匹配s1父级里面的第N个元素s1
  s1:nth-of-type(N){} 匹配s1父级里面所有s1中的第N个

伪对象选择器

• s1::before 匹配s1里面的最前面
• s1::after 匹配s1里面的最后面

字体

font-size: 字体大小
font-family: 字体家族
font-weight: 字体加粗 bold normal
font-style: 字体风格 italic normal
line-height: 行高

简写：font: weight style size/line-height family

背景

background-image: 背景图片 url(图片地址)

background-color: 背景颜色

background-repeat: 背景重复 no-repeat

background-position: 背景定位

background-size: 背景大小 设定背景的宽

background-attachment: 背景固定 fixed

简写:
​ background: image color position/size repeat attachment

注意：以上顺序随便颠倒，只有size必须写在position的后面

边框

基本属性：color width style
基本方向: left right top bottom

单边简写
​ border-方向: color width style

四边简写
​ border: color width style

注意:
​ color 和 width 都有默认值, 所以可以省略
​ style 不能省略
​ style常用值:
​ solid 实线
​ none 取消边框

​ double 双线
​ dotted 点线
​ dashed 虚线

圆角:
​ border-上下-左右-radius: % 或 px
​

圆角简写:
​ border-radius: % 或 px

​ 注意: 如果需要最圆, 建议用100%
​
边框合并:
​ border-collapse: collapse

轮廓:
​ outline 常用于 none
​ 常用于 表单

文本

• text-align: 水平对齐方式 left center right
• vertical-align: 垂直对齐方式 top middle bottom
• text-indent: 首行缩进
• text-decoration: 划线
  ​ underline 下划线
  ​ overline 上划线
  ​ line-through 删除线
  ​ none 不要线
• text-shadow: 文字阴影
• text-overflow: 文字溢出