CSS基础知识

CSS

css写在<style>中

1. 选择器

1). 基础选择器：标签选择器，类选择器，id选择器和通配符选择器

     标签选择器：指用标签名作为选择器

                 p {color: green; }

     类选择器：单独选择其中一个或某几个标签（用英文名）

               .red {color: red; }

               <li class=”red”></li>

               <div class=”red”></div>

               头：header     内容：content/container

               尾:  footer     导航：nav

               侧栏：sidechar     栏目：column

               标志：logo    广告：banner

               页面主体：main  热点：hot       新闻：news

       多类名：多类名用空格隔开

               <div class=”red font35”>

     id选择器：#开头，且只能调用1次

通配符选择器：*{}  不需要调用，所有标签全部选中更改

2). 复合选择器：后代选择器，子选择器，并集选择器，伪类选择器等

1）后代选择器（包含选择器）元素1 元素2{}   元素2是元素1的后代

   ol li{ color: pink; }   也可以 ol li a...{}

名字ul相同的话可以加个class；.nav li {}

<ul class=”nav”><li></li></ul>

1. 子选择器（只选择子元素，孙子就不会选了）

    .nav>a {}

1. 并集选择器

   div,

 p{}

1. 伪类选择器： :hower{}

   链接伪类选择器： a: link 选择所有未被访问的链接   a: link{}   

                    a: visited 选择所有已被访问的链接   a: visited{}

                    a: hover 选择鼠标指针位于其上的链接  a:hover{}

                    a: active 选择活动链接（鼠标按下未弹起的链接）

按照link visited hover active这个顺序写

链接要单独指定样式

正常写： a{ color:黑色}

         a:hover{color:blue;}

:focus伪类选择器用于获得焦点的表单元素

焦点就是光标，<input>类表单元素才能获取，主要针对表单元素

 input:focus{ background-color:pink; }

 

1. 属性

  font-family: ’微软雅黑’;  设置字体（尽量用英文）

  font-size:  20px;  字号大小 （标题大小比较特殊，需要单独指出大小）

  font-weight:  bold;    字体粗细  bold字体加粗， 400=normal默认值   

700数字=bold也是加粗的意思，例：font-weight:700;

  font-style: normal;  normal正常，italic倾斜  主要功能是让倾斜的字体不倾斜，即要给斜体标签（em,i）改为不倾斜。

  font复合属性：font: font-style  font-weight  font-size/line-height  font-family;（size和family不能省略）

                 Font: italic  700  16px  ‘微软雅黑’;

3.文本属性

 text-align: center;  文本在盒子内的居中对齐方式，right,left

 text-decoration:   none 装饰文本 :  underline下划线

  overline上划线  line-through删除线

text-indent: 20px/2em; 首行缩进距离 2em表示缩进两个文字大小距离
line-height: 20px 表示行间距，行间距=上间距+下间距+文字高度

 

4.Chrome调试工具

打开浏览器后按F12，或右击空白处点击检查。 Elements表示元素的意思

 

 

4. CSS三种样式表

1). 内部样式表：主要是写到html页面内部，将所有的CSS代码抽取出来，单独放到<style>中；

2). 行内样式表：在元素标签内部的style属性中设定CSS样式，适合修改简单样式， <div style=”color: pink”></div>

3). 外部样式表：适合样式比较多的，经常使用的。

      <link rel=”stylesheet” href=”style.css”> 引入外部样式表

 

1. Emment语法快速生成html标签

1. 生成标签，直接输入标签名 按tab键即可，比如 div 然后tab键
2. 如果生成多个标签，加上*即可，例：div*10
3. 如果有父子级关系的标签，可以用>，比如ul>li就可以
4. 有兄弟关系的标签 div+p
5. 如果生成带有类名或者id名的，直接写.demo或者#two tab键就可以了，默认给div加，如果要给p加，就写p.one,生成<p class=”one”>
6. 如果生成的div类名是有顺序的，可以用自增符号$  .one$*5=<div class=”one1”>  <div class=”one2”>....
7. 如果想生成的标签内部写内容可以用{}表示， 即div{aaaa}*5

 

1. Emment语法快速生成CSS样式

写每个字母的第一个字符，如w100 按tab键，可以快速生成width:100px;

快速格式化文档：点击右键，选择格式化文档；或者shift+alt+f

1. 保存页面时自动格式化代码：

1. 文件-》首选项-》设置
2. 搜索emmet.include;
3. 在settings.json下的（用户）中添加以下语句：

     “editor.formatOnType”:true,

     “editor.formatOnSave”:true

 

 

1. 元素显示模式

1. 块元素（一行只能放一个）

   独占一行；

   高度，宽度，内外边距可以控制；

   宽度默认为容器的100%；

   是一个容器及盒子，里面可以放行内或者块级元素；

注意：文字类元素内不能放块级元素：如p中不能放div；

      同理，<h1>-<h6>都是文字类元素。

1. 行内元素（一行可以放好几个）<a>  <strong> <b> <em> <del> <s> <ins>...

  <span>是最典型的的行内元素

      一行中可以放多个行内元素；

      宽度，高度直接设置无效；

      默认的宽度就是本身内容的宽度；

      行内元素只容纳文本或其他行内元素；

 注意：链接内不能再放其他链接；

       特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全；

1. 行内块元素 <img /> <input/> <td>

       和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个；

        默认宽度就是它本身内容宽度；

        高度，行高，外边距及内边距都可以控制；

1. 显示模式的转换   display: block;

   a{display: block; }可以将a这个行内元素转化为块级元素；

   display:inline; 可以将块级元素转化为行内元素；

   display:inline-block;  转化为行内块元素；

 

1. Snipaste

可以将截图贴回到屏幕上

F1可以截图，同时测量大小，设置箭头，文字等

F3在桌面置顶显示

点击图片alt可以取色，（按shift可以切换取色模式）

按下esc取消图片显示

1. 让行高和盒子高度相同

     Height:40px;

     Line-height: 40px;

1. 背景

背景颜色：background-color:  transparent; （透明）

背景图片：background-image:  url()|none;

背景平铺：background-repeat:  repeat|no-repeat|repeat-x（沿x轴平铺|repeat--y（沿y轴平铺）（默认情况下背景图片为平铺）

背景图片位置： background-position:  x  y;

       方位名词：left  right  top  

                background-position: center  top;（水平居中垂直靠上）

       精确移动像素：background-position: 20px  50px;

             混合单位：background-position: 20px center; 第一个值为x坐标 第二个表示y坐标

 

超大背景图片时 ：

<style>

                          Body{

                                 Background-image:url();

                                 Background-repeat:no-repeat;

                                 Background-position:center top;

                               }

                       <style>

 

 

      背景图像固定：background-attachment: scroll （滚动的 默认形式）| fixed （固定的）（后期可以制作视差滚动效果）

     

     背景复合性写法：

background: 背景颜色 图片地址 背景平铺 背景图像滚动 背景图片位置

black  url()  repeat-y fixed top;

 

背景色半透明：background: rgba( 0, 0, 0, 0.3);  最后一个参数是alpha透明度，取值范围在0-1之间， 前三个数字000表示纯黑色

      

 

CSS三大特性

 层叠性，继承性，优先级

1. 层叠性

1. 就近原则，哪个样式离结构近就执行哪个样式 （即最下方）
2. 样式不冲突，不会层叠

 

1. 继承性

1. 可以继承父元素的样式（text,font,line这些元素开头的可以继承，以及color属性）
2. 行高的继承： body{font: 12px/1.5  ‘微软雅黑’； }

                 行高可以跟单位也可以不跟单位；

                  如果子元素没有设置行高，则会继承父元素的行高为1.5

                此时子元素的行高是：当前子元素的文字大小*1.5

1. 优先级

继承或*                        0,0,0,0

元素选择器                     0,0,0,1

类选择器，伪类选择器           0,0,1,0

ID选择器                       0,1,0,0

行内样式style=“”              1,0,0,0

!impportant重要的               无穷大

 

不管父元素权重多高，子元素权重永远为0。

 

权重叠加：复合选择器会有权重叠加情况

         .nav li{}=0010+0001>ul li{}权重=0001+0001=0002>ul{}

           a:hover{}=0001+0010=0011;

 

 

 

 

 

盒子模型

1. 组成部分：border边框   content内容

   padding内边距   margin外边距

border-width:2px; 边框粗细

border-style:  solid（实线）  边框样式    dashed（虚线） dootted（点线）

border-color: blue;   边框颜色

border的复合写法：border: 1px solid pink;  （无顺序）

border-collapse: collapse; 合并边框

 

padding会影响盒子大小  

padding-left:20px;

padding-right:20px;

padding-top:20px;

padding-bottom:20px;

padding的复合写法：   padding: 5px;  上下左右都为5px；

                      padding: 5px 10px;  上下  左右

                      padding: 5px 10px 20px 上  左右 下

                      padding: 5px  10px   20px  30px;上 右  下 左

padding会影响盒子大小 ，因此当加padding大小时，减小盒子的大小；

  width：180px；

  height:  180px；

  padding:  10px;

 

margin与padding一样

 

将块级盒子设置为水平居中： margin-left: auto;   margin-right:  auto;

                           margin: auto;    margin: 0 auto;

给行内元素或者行内块元素设置水平居中：给父元素加上text-align: center;

嵌套元素垂直外边距塌陷问题

解决方法：1.为父元素定义上边框

       2.为父元素定义内边距

3.为父元素添加over flow:hidden;

 

清除内外边距

*{  margin:0;

   Padding:0;}

 行内元素尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。

 

 

 

 

PS基本操作

1. 文件->打开图片
2. Ctrl+R: 打开标尺，或者 视图->标尺
3. 标尺单位改为像素
4. Ctrl+放大视图  Ctrl -缩小视图
5. 通过拖动选区测量图像大小

 

 

CSS产品模块布局

1. 圆角边框：border-radius: 10px/50%; （redius半径）

         如果是正方形，可以将数值设置为高度或宽度的一般，50%，如果是矩形，设置为高度的一半即可。该属性后面可以跟四个值，分别为左上角，右上角，右下角，左下角。分别表示为：border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

1. 盒子阴影： box-shadow： h-shadow  v-shadow  blur  spread      color   inset; （默认为外阴影，阴影不占用空间）

h-shadow 必需，水平阴影，允许负值（负值往左走，变大往右走）；

          v-shadow 必需，垂直阴影，允许负值（负值往上走，变大往下走）；

          blur 可选  模糊距离

          spread 可选 阴影尺寸

          color 可选 阴影颜色

          insert 可选 将外部阴影改为内部阴影

当鼠标放上去的时候出现阴影：div:hover{

box-shadow: 10px  10px  10px  -4px  rgba(0,0,0,0.3); }

1. 文字阴影：text-shadow:  h-shadow  v-shadow  blur  color
2. 浮动

  浮动可以做围绕照片效果

Image{ float: left;} 文字会围绕照片

1. 传统网页布局的三种方式   浮动的盒子不会有外边距塌陷问题

一个页面中基本包含了这三种布局方式

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

普通流（标准流）：就是标签按照规定好默认方式排列

块级元素独占一行，从上而下排列（最基本的布局方式）

   常用元素：div, hr, p, h1-h6, ul, ol, dl, form, table

行内元素会按照顺序从左到右排列，碰到父元素边缘自动换行，常用元素：span, a, i, em等

浮动: 可以实现多个块级元素在一行中无缝隙排列。

             Float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。

     float: left/right;

浮动特性：

1. 脱标：脱离标准流控制移动到指定位置，浮动的盒子不再保留原先的位置。（最重要特性）
2. 浮动元素会一行内显示并且元素顶部对齐
3. 浮动元素会有行内块元素的特性： 给行内元素添加了float，行内元素会具有块元素特性
4. 先用标准流的父元素排列上下位置，之后内部子元素采取

5. 浮动排列左右位置，符合网页布局第一准则。

 

常见网页布局

Top->banner->box->footer

浮动布局注意点：  浮动元素不会压住文字

1. 浮动和标准流的父盒子搭配

2.一个元素浮动了，其他兄弟元素也要浮动，浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动：清除浮动的本质是清除浮动产生的影响

       方法一：额外标签法

  clear: left/right/both;   在实际应用中几乎只用both;

     .clear{clear:both;}   

<div class=”clear”></div> （新增的盒子只能是块级元素）

方法二：父元素overflow

  给父元素添加overflow属性

   overflow: hidden/auto/scroll

用overflow: hidden;

        方法三：after伪元素法

          给父元素添加 :after

 .clearfix: after{

               Content: “”;

                 Display: block;

                Height: 0;

               Clear: both;

              Visibility :hidden;}

          .clearfix{ *zoom: 1}

方法四：双伪元素清除浮动

    .clearfix: before, .clearfix:after{

          Content:””;   Display: table}

.clearfix:after{ clear: both;}

.clearfix{ *zoom: 1;}

PS切图

    jpg：高清图片

gif：可以保存动画效果

png：背景透明

psd：ps专用格式，可以复制文章获取图片

图层切图

1. 右击图层->快速导出为PNG
2. 合并图层再导出： 1）选中需要的图层：图层菜单->合并图层

                       (ctrl+e)

                 2）右击->快速导出为PNG；

切片工具：

文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储

PS插件切图：Cutterman

       地址：http://www.cutterman.cn/zh/cutterman

制作学成在线案例需要准备的素材和工具

1. 学成在线PSD源文件。
2. 开发工具：PS/cutterman插件+ vscode + chrome（测试）
3. 采取结构与样式相分离
4. 新建一个目录文件夹比如study
5. 用vscode打开该文件夹
6. 在study目录内新建images文件夹，用于保存图片
7. 新建 首页文件index.html（首页统一规定为index.html）
8. 新建style.css样式文件。我们本次采用外链样式表
9. 拿到页面后，确定页面版心宽度是多少，测量得知
10. 分析页面中的行模块，以及每个行模块中的列模块，页面布局是第一准则。
11. 确定每一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则。
12.  先制作html结构，我们要遵循先有结构，后有样式的原则，结构永远最重要。

CSS属性书写顺序：

建议遵循以下顺序：

1. 布局定位属性：display/position/float/clear/visibility/overflow（建议display）第一个写
2. 自身属性： width/height/margin/padding/border/background
3. 文本属性：

color/font/text-decoration/text-align/vertical-align/white-space

1. 其他属性：

content/cursor/border-radius/box-shadow/text-shadow/background

导航栏制作注意点:

1. 导航栏中一浮动全浮动。
2. 不直接用链接a 而是用li包含链接（li+a）的做法

<ul><li><a href=””></a></li></ul>

1. 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
2. nav导航栏可以不给宽度，将来可以继续添加其余文字
3. 因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定盒子宽度

 

搜索框

search大盒子里包含两个表单，input文本框+button按钮

Input和button都是块元素，所以要浮动

 

个人信息头像模块

就是头像+用户名 一个浮动都浮动

banner制作  

Subnav侧导航栏

 

行高会继承，只在父元素中写line-height: 10px;即可

 

精品小模块

1. 大盒子水平居中goods精品，注意此处有个盒子阴影
2. 1号盒子是标题H3左侧浮动
3. 2号盒子里面放链接左侧浮动，goods-item距离可以控制链接的左右内边距（注意行内元素只给左右外边距）
4. 3号盒子右浮动mod修改；

 

底部模块footer

1. 1号盒子是通栏大盒子，底部footer给高度，底色是白色；
2. 2号盒子版心水平居中
3. 3号盒子版权copyright左对齐
4. 4号盒子链接组links右对齐

定位

是指将盒子定在某一位置，所以定位也是在摆放盒子。

定位=定位模式+边偏移。

定位模式用于指定一个元素在文档中的定位方式

边偏移则决定了该元素的最终位置。

1. 定位模式    子绝父相：子用绝对定位时，父亲用相对定位

  通过position属性设置：

static  静态定位（默认定位方式，无定位的意思）静态定位按照标准流特性摆放位置，它没有边偏移，在布局中很少用到。

  relative 相对定位（在原来位置的基础上进行移动，原来在标准流的位置继承占有，后面的盒子仍以标准流的方式对待它）

  absolute 绝对定位（相对于 它父元素进行移动的）

1. 没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
2. 如果祖先元素有定位（相对绝对固定定位），以最近一级有定位祖先元素为参考点移动。
3. 绝对定位不再占有原先的位置（脱标）.
4. 绝对定位的盒子不能 用margin:auto进行水平居中，因此：

  Left: 50%; margin-left: -xxpx;  （先走父容器一半，后往左走自己盒子的一半）

2. fixed 固定定位（可以固定到浏览器可视区的某一位置，如页面滚动元素不变）  Position:fixed; top: 0; right:0;

1. 以浏览器的可视窗口为参考点移动元素。
2. 固定定位不占有原来定位。

例如让元素固定在版心右侧位置

1. 让固定定位的盒子left：50%，走到浏览器可视区（也可以看做版心）的一半位置。
2. 让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了。

  

3. Sticky粘性定位：被认为是相对定位和固定定位的混合，sticky粘性的。（随着页面的滚动而滚动，当到达页面最上下左右时就固定住了）

 1. 以浏览器的可视窗口为参考点移动元素。

2. 占有原先的位置。

3. 必须添加top, left, right, bottom其中一个才有效。

4. 定位叠放次序 z-index

  z-index 控制盒子前后次序（z表示z轴）  {z-index:1;}

  1. 数值可以是正整数,负整数或0，默认是auto,数值越大，盒子越靠上。

   2.属性值相同，则按照书写顺序，后来居上。  

 3. 数字后面不能加单位。

 4. 只有定位的盒子才有z-index属性。

定位特性

绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3. 脱标的盒子不会触发外边距塌陷：浮动元素,绝对定位（固定定位）元素的都不会触发外边距合并的问题。

定位拓展

1. 绝对定位（固定定位）会完全压住盒子

    浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字。

但绝对定位会压住文字和盒子。

边偏移

  有top, bottom, left和right4个属性

  top:80px;  顶端偏移量，定义元素相对于其父元素上边线的距离。

bottom：80px; 底部偏移量，定义元素相对于其父元素下边线的距离

Left:80px; 左边偏移量，定义元素相对于其父元素左边线的距离

Right:80px;右边偏移量，定义元素相对于其父元素右边线的距离

 

淘宝焦点图布局制作

1. 命名：大盒子我们类名为：tb-promo淘宝广告

        里面先放张图片，左右两个按钮用链接，左箭头prev 右箭头next

        底侧小圆点ul继续做，类名为promo-nav

 

当一个盒子中既有left又有right，会默认left，同理，既有top又有bottom，默认为top。

 

元素的显示与隐藏

1. display显示隐藏

  display: block；将元素转换为块级元素,也有显示元素的意思

  display: inline；将元素转换为行内元素

  display: none；隐藏对象 ，并且不再占有原来位置

1. visibility显示隐藏

   visibility: inherit继承上一个父对象的可见性；

   visibility: visible 对象可视；

   visibility: hidden; 对象隐藏；隐藏元素后想要原来的位置    visibility: collapse;隐藏表格的行或列；

1. overflow溢出显示隐藏

overflow: visible; 显示超出内容，不剪切内容也不添加滚动条；

     overflow: auto;   为body对象和textarea的默认值，在需要时剪切内容并添加滚动条。

     overflow: hidden;  不显示超过对象尺寸的内容。

      overflow: scroll;  总是显示滚动条。

土豆网练习

核心原理： 原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。

遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。