CSS02

CSS02

emment语法

1、快速生成html

  • 包含:ul>li

  • 多个:div*10

  • 兄弟关系:div+p

  • 选择器:默认div生成(.div,#div)
    如果不是div标签(p .nav)

  • 排序:.demo1$*5 默认从1开始排

  • 在标签里显示文字:div{啦啦啦}

2、快速生成css
text-aligh:center
简写成tac

3、快速格式化
shift+alt+f

复合选择器

后代选择器

	元素1 元素2{样式声明}
	2是1的后代,可以一层一层往下查找
	元素可以是任意选择器的组合
	.nav li a{}
	会把所有的儿子孙子重孙全部选出来

子选择器(最近一级)

	必须选择亲儿子
	元素1>元素2

并集选择器

	div,p{样式声明}
	通常用于集体声明
	可以用于任何选择器,包括后代选择器
	最后一个选择器不要加逗号

伪类选择器

	分不同场景给某些选择器添加特殊效果
	1、a链接伪类选择器:
		a:link 未被访问
		a:visited 已访问
		a:hover 鼠标指针停留
		a:active 按下还未弹起
	
	2、focus伪类选择器
		input:focus{} 获取焦点,一般只有input使用

元素显示模式

块级元素

  • 独占一行
  • 宽度和高度和内外边距可以设置
  • 宽度默认是百分之百
  • 是一个容器及盒子,里面可以放块级或行内元素,文字类元素里面不允许使用块级元素:如p h1

行内元素

(a,strong,b,em,i,del,ins,u,span,s)
主要是span

  • 一行可以显示多个
  • 设置宽高无效
  • 默认宽度是其本身内容的宽度
  • 行内元素内部只能容纳文本或者其他行内元素
    链接里面不能再放链接
    特殊情况里a可以放块级元素,但转换一下块级模式比较安全

行内块元素

(img input td)

  • 一行上可以放多个,但中间会有空白缝隙(行内)
  • 默认宽度是它内容本身的宽度(行内)
  • 宽高和外边距可以设置(块级)

显示模式转换

display:
block 转化为块级
inline 转化为行内
inline-block 转化为行内块

文字垂直居中
height=40px;
line-height=40px
行高等于高度就可以了
原理:行高包括上空隙和下空隙

CSS背景

背景属性

background-

  • 背景颜色
    color:transparent(透明的)| color
  • 背景图片
    image:none|url()
  • 背景平铺
    repeat:repeat|no-repeat|repeat-x|repeat-y
  • 背景图片位置
    position:x y;
  • 背景固定
    attachment:scroll(滚动)默认|fixed(固定)

混合写法(类似font)用空格隔开,没有特定顺序

背景颜色半透明(CSS3新特性)

background:rgba(0,0,0,0.3)

已标记关键词 清除标记
相关推荐
<p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;">本套课程,大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战,让小伙伴们能够轻松上手,企业公司项目开发过程中遇到的页面动画交互效果需求实现,以及一些更加炫酷创意动画想法的实现,成为一名酷酷哒前端开发工程师。</span><span style="font-size:16px;"></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <br /></p> <p style="color:#424242;background-color:#FFFFFF;"> <strong><span style="font-size:16px;">本课程为<span style="font-size:14px;">20</span>套<span style="font-size:14px;">CSS3</span>动画实战课程,所集合构成的一套实战课程。适合热爱前端动画的小伙伴们,课程的主要内容包括:</span></strong> </p> <p style="color:#424242;background-color:#FFFFFF;"> <br /></p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><span style="font-size:14px;">01.3D</span>文字效果制作、<span style="font-size:14px;">02.</span>雪花飘落效果、<span style="font-size:14px;">03.</span>图文模糊效果、<span style="font-size:14px;">04.</span>文字卡片折叠效果、<span style="font-size:14px;">05.</span>六角形效果、<span style="font-size:14px;">06. </span>进度条颜色跟随效果、<span style="font-size:14px;">07. </span>动态视频背景效果、<span style="font-size:14px;">08. </span>按键文字跳动效果、<span style="font-size:14px;">09. </span>弹跳小球效果、<span style="font-size:14px;">10. 3D</span>翻折菜单导航效果、<span style="font-size:14px;">11. 3D</span>圆环层叠动画效果、<span style="font-size:14px;">12. </span>水波浪球起伏效果、<span style="font-size:14px;">13. </span>遮罩透明滤镜文字效果、<span style="font-size:14px;">14. </span>阴阳无极八卦阵效果、<span style="font-size:14px;">15. </span>文字双屏进入进出效果、<span style="font-size:14px;">16. </span>炫酷光影加载效果、<span style="font-size:14px;">17. </span>文字背景水波浪效果、<span style="font-size:14px;">18. </span>炫酷发光倒影按钮、<span style="font-size:14px;">19. </span>扁平预加载动画效果、<span style="font-size:14px;">20. </span>烟囱冒烟动画效果</span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><br /></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><img src="https://img-bss.csdn.net/202003041008079147.png" alt="" /><img src="https://img-bss.csdn.net/202003041008221455.png" alt="" /><img src="https://img-bss.csdn.net/202003041008376365.png" alt="" /><br /></span> </p> <p style="color:#424242;background-color:#FFFFFF;"> <span style="font-size:16px;"><br /></span> </p>
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页