css1

d：恢复黑白前景色

x：交换前景色

Ctrl+alt+z：撤销

Ctrl+r：显示标尺

ctrl+shift+z：下一步

alt再点击蒙版可以只看蒙版，不看原图层

快速蒙版就是直接在画面上编辑（红色为背景，方便查看，红色表示透明，不想要的），不会单独建立一个蒙版

ctrl+j：复制图层或图层中的选区

通道层层叠加成为图层，可以将选区以通道存下来

快速选择工具alt键可以将+（增加选区）,-转换（减少选区）

alt+delete：填充前景色

图层样式就是给图层加效果，图层-》图层样式-》创建图层：可以将图层的样式单独拿出来形成新的图层；图层-》图层样式-》缩放效果：可以缩放图层的样式；窗口-》样式：激活样式面板。

ie6双倍边距bug：向左浮动若设置左边距，则左边距成了2倍了，向右。。。。加入display：inline可以解决。

蒙版的黑色表示去掉它（让它透明）。

!important:使该条样式属性声明具有最高优先级，写在;前面

0：黑（透明），255：白（不透明）

超文本标记语言：超：可有图片。。。标记：标签

自结束标签可以没有/，有<br />,<meta />，<link />

<main>：规定文档主要内容

vs快捷键：多行输入：按住alt然后鼠标点到多个地方。选中多行一样的：先鼠标选中，再多次按住ctrl+d

图片格式：

导入外部css：<link rel="stylesheet" href="styles/index.css" />

导入外部js：<script src="js/tab.js"></script>

<!DOCTYPE html>：h5标准网页声明，告诉浏览器。

<html lang="en">：语言为英文网站，zh-CN中文网站

查看浏览器编码：在console里面输入:document.charset

进制：几进制就是满几进一。

<p>元素有设置默认样式6

水平居中可以用text-align。

block，inline，inline-block和浮动：

块级元素(block)：独占一行，对宽高的属性值生效；若不设置宽高，高度被撑开（浮动撑不开），宽度与父元素宽度一致，若父元素为body，就默认为浏览器的宽度。例如ul,li,ol,table,div,hr，h1。

行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高，一行容不下自动换行。比如：span,a。若想设置宽高，则可以转换为display：block或者inline-block.

行内块元素(inline-block)：可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排，若不设置宽高，则宽度为子元素的宽度，高度也是子元素的高度（浮动能撑开）。如img，input，textarea

浮动：浮动之后脱离文档流，具备行内块元素特点，一个浮动元素可以设置外边距隔开另一个浮动元素。浮动的元素对后面的文档流起作用，对上面的元素是块元素且没有浮动的，不起作用，若上面是内联或者行内块元素，则寄到旁边，若上面是浮动元素，则挨到它右边。浮动后，下面紧挨的p会上来，而且p的文字会环绕浮动的元素。元素浮动只在父元素内部浮动。若浮动元素下面是内联或行内块元素，则上到浮动元素右边来；若浮动元素下面是没有浮动的块元素，则上升占到浮动元素的后面，且文字环绕。

<a>里面可以放任意元素（除了自己），target属性：

href：值#为跳到当前页面的顶部，#id值跳到对应id标签上。mailto:电子邮件地址

border-radius:25px：给边框添加圆角，若做圆形，则div为正方形，半径为一半。当值为50%时，即为width的50%

ie6对图片的局限性：

hack：

再多的空格都被认为是1个空格。

<hr/>：生成一条水平线

实体：

<p>不能包含块元素

给一个空空如也的div装入img，此时它的宽高都被撑大了，且宽为浏览器的宽度。

<img src=“1.gif” alt="当图片出不来时，显示信息，可供搜索引擎找到" width="20px"/>：若宽高只设置一个，则图片等比例改变

编码：将字符转为二进制；解码反之。UTF-8（Unicode）：支持所有文字。在中文系统的浏览器中默认用GB2312解码。

选择器:p{}：标签选择器，#id：id选择器，.class:类选择器。<p class="c1 c2"></p>：这个p属于2个class

交集选择器：span.p3{}：既是span，class又属于p3。注意紧挨着写。

手机的像素比电脑的像素小。

元素之间的关系：

后代选择器：div span{}：选中div中的全部span。注意有空格。格式为：祖先元素后代元素

子元素选择器：div > span{}：选中div中的子span，不要孙子（ie6及以下不兼容）

伪类选择器：a:link{}：对没访问过的链接设置样式，a:visited{}：对访问过的。visited只能设置color。a:hover{}：鼠标移入，a:active{}：点击没松手时。input:focus{}：文本框获得焦点后。a有默认样式，更改父元素不会改变a的字体的，给a的字体设置样式时，用a{color:}且写在其他伪类前面。

p::selection{}：对选中的内容。p::-moz-selection{}：对火狐浏览器适用。

伪元素：特殊位置的元素。p::first-letter{}：对p中的第一个字设置（内部是2个冒号）。p::first-line{}:对p中第一行设置。p::before{}：紧挨着p标签后面插入内容（就是content内容）：

title属性：

属性选择器：p[title]{}：选中具有title属性的p,p[id]{}：。。。id...，p[title=“hello”]{}：对title=hello的p设置，p[title^=“hello”]{}：以hello开头的，p[title$=“hello”]{}：结尾，p[title*=“hello”]{}：只要包含hello的。

子元素伪类：p:first-child{}：既是p，又是第一个子元素（不管父亲是谁），*:first-child{}：任何元素，只要是第一个子元素(包括body)。body > p：first-child：既是body的子p，又是第一个子元素。p:last-child：最后的。

说明：若参数为even，则为偶数，odd，奇数

否定伪类：p:not(.a){}：选中所有p，除了class是a的p。（）里面也可以是id....

选择器优先级（最上面最高）：

a伪类的优先级(就按这个顺序写)：

注释：css：/**/,html：

p:first-of-type{}:对其父元素所拥有的p而言，取一个

text-transform:值none，不改变格式，capitalize:单词的每个首字母大写，uppercase:所有字母大写，lowercase：所有字母小写。

text-decoration：值none，不改变格式，underline:添加下划线，overline：添加上滑线，line-through：删除线。超链接默认有下划线。

字体（比如，不同浏览器对serif理解不同，它再选个serif里面的小类）：

常用字体有：

em:

说明：我的Chrome默认1em=16px

color:red:字体红色，font-size:10px:文字所在的小格的高度，font-family:微软雅黑，华文彩云：从前往后选字体，位于C:\Windows\Fonts，font-weight:bold（加粗显示），

font:italic bold 15px/40px 仿宋;可以写到一起，但是文字的大小和字体必须写。大小必须是倒数第二个，字体必须是最后一个。p中可以划分为多行，每行的高度称为行高。当行高=高度时，元素水平居中。

font-style:italic(斜体)或normal（正常）

rgb也可以这样表示：#红色绿色蓝色（十六进制）

颜色：单词red，或者rgb(122,222,101或百分数)

背景颜色半透明：rgba(12,12,12,0.3)，最后一个是0-1的范围，而盒子里面的文字是不会有透明效果的

letter-spacing:指定字符间距，值：1px：字符间1px，默认0。

word-spacing：设定单词之间的距离（根据空格）。值：20px。

text-align：文本对齐方式，值：left（左对齐），right，center（居中），justify（2端对齐，左边齐的，右边齐的），center可以对里面的所有内联和行内元素起作用，也对所有文本起作用。

text-indent:设置首行缩进。值：20px或2em(2个font-size就是2字符)。

<em>：斜体显示（和<i>一样），<strong>：粗体(和<b>一样)，<cite>：斜体，用于书名号，<sup>：上标，<sub>下标，<del>：删除线，<ins>：在文字下加上下滑线。

ul{list-style:none}:没有前面的点，ul和li都是块元素。<ol><li></ol>有序列表（前有1，2，3）

行高：，文字默认垂直居中。p{line-height:50px;}就是把该段里面的文字的每一行的行高设置为50像素，若为100%，则等于字体大小，若为1，则为字体大小的1倍。行间距=行高-字体大小（font-size），即上一行文字的脚到下一行文字的头的距离。通过设置div的line-height=height，就可以实现单行居中。注意行高不设置的话是有默认的。

说明：上面的那行不会显示，因为被下面的font的默认行高覆盖了，要想有效就写到下面去。

*{margin:0;padding:0}：通过去掉所有元素的margin和padding来去掉浏览器默认的margin和padding，盒子与盒子之间的距离用margin。

如果不写元素，则默认给div创建。输入.a+.b：可以迅速创建两个div，第一个class是a，。。。;ul.box>li*4：创建一个class为box的ul，里面有4个li；div*8{$}：创建8个div，里面的内容分别是12345678。ul>li*4{$}:创建一个ul和4个li，li里面是1234，div.box$*3：生成三个div，每个div的class分别是box1,box2,box3

盒子：

边框border：

说明：或者：border:10px red solid;单独设置：border-top，border-right:none：不要右边框。边框的宽度仅指的是边框瘦瘦的宽。此处为上下左右的宽度都是10px.border-top-width：仅设置上面的宽度。color类似：border-xxx-color。

样式的继承：祖先元素的样式给子元素了，但是背景颜色，边框相关不会被继承（继承性：no），背景颜色的默认值为透明的。

内边距：内容区与边框的距离。padding-top设置上面。整个盒子（可见框）宽=边框的宽+内边距+内容的width，子元素都在父元素的内容区。background-color会出现在内容区和padding区。设置内边距不会影响到内容区，会增大整个元素。

外边距：盒子与其他盒子的距离。若margin-left:auto就是设置为最大.margin-top:auto就是0。若左右都是auto，则居中。margin:0 auto:上下0，左右auto，居中。

垂直外边距：若上一个的margin-bottom：10px,相邻的下一个的margin-top:20px，则取最大（因为margin表示离别的距离）。如果父子元素的垂直外边距重叠，则子的会赋值给父的，给父加border或者加padding都可以防止重叠。若单单想设置ie6的外边距，则_margin-bottom:10px.

内联元素：外边距只能设置水平的（块和行内块都能设置margin和padding），内边距也只能设置水平的，设置垂直内边距不改变布局（大家的位置不会变，只可能会遮盖），不支持宽和高。

display：当值为none，则隐藏了，且不占空间。

visibility：显示或隐藏元素。值为hidden，隐藏但是占地。

overflow：若子元素超超出父元素，则值为visible：不处理，hidden：多出的剪掉，scroll：设置滚动条，但是不论是否溢出，都有滚动条，auto：根据需求自动添加滚动条。

设计简单布局：

①目标：

说明：总共有3个div，其中第二个div中有3个小div，这3个小div以float方式。

②代码：

<!DOCTYPE html>
<html>
 
<head>
  <meta charset='UTF-8' />
  <title>easy</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
 
    .p1 {
      width: 800px;
      height: 100px;
      background-color: aqua;
      margin: 0 auto;
      margin-top: 10px;
    }
 
    .p2 {
      width: 800px;
      height: 500px;
      background-color: brown;
      margin: 10px auto;
    }
 
    .p3 {
      width: 800px;
      height: 100px;
      background-color: coral;
      margin: 0 auto;
    }
 
    .p21 {
      width: 200px;
      height: 100%;
      background-color: darkblue;
      float: left;
    }
 
    .p22 {
      width: 380px;
      height: 100%;
      background-color: deeppink;
      float: left;
      margin: 0 10px;
    }
 
    .p23 {
      width: 200px;
      height: 100%;
      background-color: darksalmon;
      float: left;
    }
  </style>
</head>
 
<body>
  <div class="p1">
 
  </div>
 
  <div class="p2">
    <div class="p21"></div>
    <div class="p22"></div>
    <div class="p23"></div>
  </div>
 
 
  <div class="p3">
 
 
  </div>
 
 
</body>
 
</html>

设置父元素overflow:auto或hidden可以解决高度塌陷，通常父元素不设置宽高，而是被撑起来的。

clear：清除其他元素对本元素的影响。回到对方不浮动时自己的位置。当你们不浮动时，我在哪里。

说明：值为both实质为清除影响最大的元素。

解决高度塌陷的另一种方法：

或者给父元素单独开一个类：

导航条制作：

①目标：

②代码：

<!doctype html>
<html>

<head>
  <title>navigation</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 1000px;
      margin: 50px auto;
      background-color: #5e93ef;
      overflow: hidden;
      list-style: none;
    }

    li {
      width: 25%;
      float: left;
      /*可以使的li里面的非块居中，同时也使得子元素的文本居中*/
      text-align: center;
      padding: 5px 0px;
      color: white;
      font-size: 20px;
    }

    li:hover {
      cursor: pointer;
      background-color: #dd1300;
    }
  </style>

</head>

<body>


  <ul>
    <li>首页</li>
    <li>新闻</li>
    <li>联系</li>
    <li>关于</li>
  </ul>


</body>

</html>

定位：

position:relative，开启相对定位，相对定位不会脱离文档流，块还是块，内联还是内联。再left：100px,离开原来的左边位置100px

position:absolutely,绝对定位会脱离文档流，会提升层级，是离它最近的开启了定位的祖先元素而言的，如果所有祖先元素都没有定位，则相对于浏览器窗口定位的。

postion:fixed，会脱离文档流，也是一种绝对定位。不同的是永远相对浏览器窗口来定位。不随着滚动条而变。ie6不支持

font:12px/1 宋体：采用了1倍行高（等于字体大小），文本默认在一行的垂直居中位置。

开班信息布局：

①目标：

②代码：

<!doctype html>
 
<head>
  <meta charset="UTF-8" />
  <title>开班信息</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    .out {
      width: 300px;
      margin: 10px auto;
      border-left: 2px slategrey solid;
      border-right: 2px slategrey solid;
      border-bottom: 2px slategrey solid;
    }
 
    .head {
      overflow: hidden;
      background-color: #f4f4f2;
      border-top: 2px solid green;
      line-height: 25px;
    }
 
    .head {
      padding: 10px 10px 10px 10px;
    }
 
    a {
      text-decoration: none;
    }
 
    a:hover {
      color: red;
    }
 
    .left {
      font-size: 20px;
      float: left;
    }
 
    .right {
      font-size: 15px;
      float: right;
      text-decoration: underline;
      color: red;
    }
 
    ul {
      list-style: none;
      overflow: hidden;
      /* margin-bottom: 10px; */
      border-bottom: #f0f0ef dashed;
      padding-bottom: 10px;
    }
 
    .red {
      color: red;
      /* font-weight: bold; */
    }
 
    .left1 {
      float: left;
    }
 
    .right1 {
      float: right;
    }
 
    .content {
      border-top: slategrey;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 3px;
    }
 
    h3 {
      margin-top: 5px;
      font-family: 微软雅黑;
      margin-bottom: 10px;
    }
 
    li {
      margin-bottom: 5px;
      overflow: hidden;
    }
 
    .last {
      border: none;
    }
  </style>
 
</head>
 
 
<body>
 
  <div class="out">
    <div class="head">
      <a href="#" class="left">近期开班</a>
      <a href="#" class="right">2020年高考辅导计划</a>
    </div>
    <div class="content">
      <h3><a href="#">语文</a></h3>
      <ul>
        <li><a href="#" class="left1">开班时间：<span class="red">2020-01-31</span></a><a href="#" class="right1"><span
              class="red">预约报名</span></a></li>
        <li><a href="#" class="left1">开班时间：<span class="red">2020-02-01</span></a><a href="#" class="right1"><span
              class="red">名额爆满</span></a></li>
        <li><a href="#" class="left1">开班时间：2020-03-01</a><a href="#" class="right1">预约报名</a></li>
        <li><a href="#" class="left1">开班时间：2020-04-01</a><a href="#" class="right1">预约报名</a></li>
        <li><a href="#" class="left1">开班时间：2020-05-01</a><a href="#" class="right1">预约报名</a></li>
      </ul>
      <h3><a href="#">数学</a></h3>
      <ul>
        <li><a href="#" class="left1">开班时间：<span class="red">2020-01-30</span></a><a href="#" class="right1"><span
              class="red">预约报名</span></a></li>
        <li><a href="#" class="left1">开班时间：2020-02-02</a><a href="#" class="right1">预约报名</a></li>
        <li><a href="#" class="left1">开班时间：2020-03-03</a><a href="#" class="right1">预约报名</a></li>
        <li><a href="#" class="left1">开班时间：2020-04-04</a><a href="#" class="right1">预约报名</a></li>
      </ul>
 
      <h3><a href="#">英语</a></h3>
      <ul class="last">
        <li><a href="#" class="left1">开班时间：<span class="red">2020-05-05</span></a><a href="#" class="right1"><span
              class="red">预约报名</span></a></li>
        <li><a href="#" class="left1">开班时间：2020-06-06</a><a href="#" class="right1">预约报名</a></li>
      </ul>
 
    </div>
 
  </div>
 
 
</body>