CSS学习————慕课

CSS，为网页设置样式

{为了显示代码，将所标签的<之后加了空格，实际运行时删除}

1. 认识CSS
   CSS全称层叠样式表。主要用于定义HTM在浏览器中的显示样式，比如文字大小颜色字体等。

< style>
p {
font-size:20px;
/设置文字字号/
color: red;
/设置文字颜色/
font-weight: bold;
/设置字体加粗/
}
< /style>
< body>
< p>你好< /p>
< /body>

2. CSS的优势
   同时设置标签类型相同的标签样式
   标签名
   {样式内容
   }

3. 代码语法
   选择符（也就是标签）{
   color（是属性）: (声明）blue（值）}
   声明有多条时用；号隔开（英文状态下）

4. CSS注释代码
   /注释语句/
   HTML 中用 < !-----注释语句------->

5. CSS的插入按样式
   CSS的插入样式可以分为内联式、嵌入式和外部式三种。

• 内联式
  将CSS样式在标签中设置如下
  < p style=“font-size:90px;color:red;”>你好< /p>

• 嵌入式
  将CSS样式在< head>< /head>中设置如下
  < head>
  < style>
  p{
  font-size:90px;
  color:red;
  }
  < /style>
  < /head>
  < body>
  < p>修改一

  
  < p>修改二
  < /html>

• 外部式
  （将CSS代码写在一的单独的文件内，这个文件以.css为扩展名）
  使用时在< head>< /head>中使用
  < head>
  <link href=“XXX.css” rel=“stylesheet” type=“text/css”/>< /head>

  ps：< link>< /link>标签有两个作用，一个是定义文档与外部i资源的关系，另一个是链接样式表

   加粗为固定写法
  

1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel=“stylesheet” type=“text/css” 是固定写法不可修改。
3、标签位置一般写在标签之内。

三种方式显示优先级：内联式>嵌入式>外部式

6. CSS选择器
   定义：
   选择器{
   样式
   }
   选择器为网页中的元素

• 标签选择器
  < html>< body>< h1>< p>< img>< span>等，如下
  p{
  font-size:9px;
  color:red;
  }

• 类选择器
  首先定义选择器类

内容

------定义该p标签的类为pub 然后在中写CSS代码 .pub{ CSS代码 } 注意有个英文圆点

• ID选择器
  ID选择器使用方法同来选择器，只是前面的修饰用#,语义化
  定义部分：

使用部分：

示范div

类选择器和ID选择器的区别

类选择器可以在一个文档中使用多次，且可以合并使用，如

其中pub和pab为定义的两个类
ID选择器只能使用一次

• 子选择器
  即大于符号(>),用于选择指定标签元素的第一代子元素。只适用于直接元素。如下代码：
  .food>li{
  border:1px solid red
  }
  代码作用：使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
  还有就是比如

你好

定义时用这个 .first>span{ border:1px solid red }

• 后代选择器
  后代选择器可用于后代所有的元素
  代码格式：
  .first span{
  border:1px solid red
  }

• 通用选择器
  示例：
  *{
  color:red;
  }
  将HTMl中所有元素标记的为你做颜色都设置为红色。

• 伪类选择器
  a.hover{color:red;}
  作用：为 a 标签鼠标滑过的状态设置字体颜色变红

• 分组选择器
  给HTML中多个标签元素设置同一个样式时，可以使用分组选择器（，）
  如下：
  p,span{color:red;}
  相当于
  p{
  color:red;
  }
  span{
  color:red;
  }

如果是ID和Class同一样式：
#Id,.class{
CSS代码
}

7. 继承器、优先级和重要性

• 继承-样式的继承
  有些样式具有继承性，当

  ，设置p的CSS样式时，span也会应用
  有些样式不具有继承性
  同样如上，p{border:1px solid red;}span无法继承

• CSS选择器的优先级
  内联式>ID选择器>类选择器>标签选择器>通配符选择器

• 权值计算
  标签的权值为1，类选择服务器的权值为10，Id选择器的权值最高为100，多种样式权值高样式的执行。

• 选择器的最高层级!important
  特殊情况下遇到为某些样式设置最高权值，可以用！important解决，需要把！important放在；前边

8. CSS字体样式

• font-family字体系列
  body{
  font-family:“Microsoft Yahei”;
  }

• font-size设置字体大小
  body{
  font-size:90px;
  }

• font-weight设置字体粗细
  body{
  font-weight:blod;(粗体）
  }

• font-style设置字体样式
  normal（默认） italic(斜体 用于字体本身就有倾斜的样式） oblique（设置为倾斜，强制转换为倾斜）
  .box1{
  font-style:oblique;
  }

• color设置字体颜色
  p{color:red;}//英文命令颜色
  p{color:rgb(133,45,200);}//RGB颜色红绿蓝
  p{color:rgb(20%,33%,25%);}//RGB颜色红绿蓝
  p{color：#00ffff;}//十六进制颜色

• font样式的简写方式
  1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
  2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
  body{
  font:italic bold 12px/1.5em “宋体”,sans-serif;
  }
  sans-serif具体指字母大写的那个尖头
  1.5em是行间距

9. CSS文本样式

• 为文本加横线 text-decoration
  默认值为none，无任何效果
  underline:添加横线到文本之下
  overline：添加横线到文本之上
  line-through：穿过文本下的一条线，一般用于商品折扣价

• 首行缩进text-indent
  p{text-indent:2em;}

• 行间距text-height
  p{
  text-height:2em;
  }

• 中文字间距、字母间隔设置letter-spacing
  letter-spacing:50px;

• 单词间距设置word-spacing
  word-spacing：50px；

• 文本对齐方式text-align
  text-align:center
  center left right

• 长度值
  px em %
  根据父标签的font-size设定的值而定
  如：p{font-size：10px;}那么

  中标签的设定值

10. CSS盒模型
    在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：
< div>、< p>、< h1>…< h6>、< ol>、< ul>、< dl>、< table>、< address>、< blockquote> 、< form>

常用的内联元素有：
< a>、< span>、< br>、< i>、< em>、< strong>、< label>、< q>、< var>、< cite>、< code>

常用的内联块状元素有：
< img>、< input>

• 块级元素

这些是HTML中的块级元素，将内联元素转化为块级元素 a{display:block;} 块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

• 内联元素（不能设置宽高）
  < span>< a>< label>< em>< strong>是HTML中的内联元素，块元素转化为内联元素：
  p{display:inline;}
  特点：
  1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变

• 内联块状元素
  将元素设置为内联块状元素：
  元素{
  display:inline-block
  }
  inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

• 不显示none
  p{diplay:none;}

• 盒模型
  内边距-padding
  外边距-margin
  边框-border
  每个元素有四个方向top left bottom right
  块标签都具有盒模型的作用

• 盒模型的长度与宽度
  width宽度指的是盒子里填充内容的宽度，盒子的总宽度=左边界+左边框+左填充+内容宽度+右边界+右填充+右边框
  height高度同理

• 标签背景色（行内元素和块元素都适用）
  background-color:颜色值

• 边框设置border
  元素{border：粗细 线条样式 颜色}
  border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。

• 为盒子添加边框
  CSS中只允许为一个方向的边框设置样式
  border-bottom：1px solid red；

• 为盒子设置圆角
  border-top-left-radius：20px；//左上角设置圆角为20px。
  div {
  width: 200px;
  height: 200px;
  border: 5px solid red;
  border-radius:100px;
  }//一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。
  四个圆角都为同一值：
  div{ border-radius:10px;}
  如果左上角和右下角圆角效果一样为10px，右上角和左下角圆角一样为20px，可以这么写：div{ border-radius:10px 20px;}

• 设置内边距padding
  padding:上 右 下 左
  如果上下填充一样为10px，左右一样为20px，可以这么写：
  div{padding:10px 20px;}

• 设置外边距margin
  同理padding

11. 布局模型
    布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS3 布局样式或 CSS3 布局模板。 CSS3 布局模板是外在的表现形式。

CSS3包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

在网页中，元素有三种布局模型：
1、流动模型（Flow）
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以***行***的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

2、浮动模型 (Float)
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。
float:left-----左浮动
float:right------右浮动

3、层模型（Layer）
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：
1、绝对定位(position: absolute)
将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
绝对定位其实就是相对于浏览器，你离右边多少距离就是从浏览器窗口向左多少

2、相对定位(position: relative)
为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

3、固定定位(position: fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
实现浏览器视图右下角定位div层：
div{
width: 200px;
height: 200px;
border: 2px red solid
position:fixed;
bottom:0;
right:0;
}

• 参照定位和绝对定位结合使用
  1、参照定位的元素必须是相对定位元素的前辈元素
  2、参照定位的元素必须加入position:relative;（父元素）
  3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了

12. 弹性盒模型

• flex布局
  1、设置display: flex属性可以把块级元素在一排显示。
  2、flex需要添加在父元素上，改变子元素的排列顺序。
  3、默认为从左往右依次排列,且和父元素左边没有间隙。在父框架设置

• justify-content属性设置横轴排列方式
  属性：flex-start----交叉轴起点对齐 | flex-end----右对齐 | center–居中 | space-between ----两端对齐| space-around----间隔相等;

• align-items属性设置纵轴排列方式
  align-items: flex-start—默认值，左对齐 | flex-end ----交叉轴的终点对齐| center–交叉轴居中对齐 | baseline—于项目的第一行文字的基线对齐 | stretch----沾满整个容器;

• 给子元素设置flex占比
  1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
  2、flex属性的值只能是正整数,表示占比多少。
  3、给子元素设置了flex之后,其宽度属性会失效。

13. 行内元素——水平居中设置
    行内元素怎么进行水平居中？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

14. 水平居中设置-定宽块状元素
    当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
    (定宽块状元素：块状元素的宽度width为固定值。)
    定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

15. 面试常考题之已知宽高实现盒子水平垂直居中
    1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
    2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。
    3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

16. 面试常考题之宽高不定实现盒子水平垂直居中
    1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
    2、子元素设置上和左偏移的值都为50%。
    3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果transform: translate(-50%, -50%);