css(2)

  1.emmet语法

    1.快速生成html语法结构

      1.生成标签 直接输入标签名按tab

      2.生成多个标签  如 div*3

      3.生成父子级标签 用>  如ul>li

      4.生成兄弟级标签 用+ 如div+p

      5.生成带有类名或id名字的   直接写  .demo (类class) 或 #two(id)

      6.生成div类名有顺序  用$  div$*5  $代表自增

      7.生成标签里面有文字 div{ dasd}

  2.css复合选择器

    1.后代选择器/包含选择器:可以选择父类里面的子元素,将外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就变为外层标签的后代。

       在style标签下,写 ol li{ color:pink} 就可以选择ol中的li。  元素1 元素2 { 样式声明}  元素1与元素2之间必须用空格隔开,一层一层查找

    2.子元素选择器:只能选择作为某元素的最近一级子元素,就是亲儿子  语法声明:元素1>元素2 {样式声明}

    3.并集选择器:可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。 语法声明:元素1,元素2{样式声明}   并集选择器习惯竖着写。

    4.伪类选择器:用于像某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素。

          最大特点是用 :表示。 :hover, :first-child

      链接伪类选择器: a:link 选择所有未被访问的链接    a:visited 选择所有以访问链接     a:hover  鼠标指针位于其上的链接   a:active 选择活动链接(鼠标正在按下未弹起的链                               接)  必须按照顺序书写LVHA    链接具有默认样式,必须单独修改样式     实际开发中,一般给链接指定样式然后再hover

    5. :focus伪类选择器:用于选取获得焦点的表单元素,焦点就是光标,<input>类表单元素才能获取, 语法格式: input :focus{样式声明}  选择文本框时使用

  3.css元素显示模式

    1.html一般分为块元素和行元素。一行放好多个使用行元素,一行放一个则使用块元素

    2.块元素特点:独占一行,高度、宽度、外边距、内边距都可以控制,是一个容器及盒子,里面可以放行内或者块级元素

    3.文字类元素内不能放置块级元素 如p里不能放置div

    4.行内元素:<span> 等   相邻行内元素在一行上,一行可以显示多个;高宽直接设置是无效的;默认宽度就是他本身内容的宽度;行内元素只能容纳文本或其他行内元素

         链接里不能放置链接,a里可以放置块元素

    5.行内块元素:<img/> <input>  <td> 都在一行上,但是之间会有空白间隙;默认宽度就是它本身内容的宽度;高度、行高、外边距及内边距都可以控制

    6.元素显示模式转换:行内元素转换成块元素  diasplay:block   块元素转换为行内元素  display:inline   转换为行内块  display:inline-block;

    7.单行文字垂直居中的代码:让文字的行高等于盒子的高度

  4.css的背景

    1.背景颜色:background-color:;

    2.背景图片:便于控制位置

  background-image: none|url(url); //在类里面

    3.背景平铺:

  background-repeat: repeat平铺|no-repeat不平铺|repeat-x沿x轴平铺|repeat-y

    4.背景图片的位置

  background-position:x y;
  后面可以跟访问名词(left right top center)和精确单位(第一个肯定为x,第二个肯定为y)和混合单位(第一个肯定是x,第二个肯定为y)

    5.背景图像滚动:后期可以制作视差滚动效果

  background-attachment:scroll (滚动)| fixed (固定)
  合写
  background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置  

    6.背景颜色半透明:

  background:rgba(0,0,0,0.3); 红 绿 蓝 半透明
原文地址:https://www.cnblogs.com/zyq982796687/p/14378127.html