一 概述

css是层叠样式表单，是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记语言。
网页实际上是一个多层的结构，通过CSS九可以分别为每一层设置样式，最终我们可以看到的是最上层的效果

1）选择器：浏览器根据选择器决定css样式影响的HTML标签 2）属性：是你需要改变的样式名，并且每个属性都有一个值，属性和值被冒号分开，并且由花括号包围。这样就组成了一个完整的样式声明 3）多个声明：如果要定义不止一个声明，则需要用分号将每个声明分隔开，虽然最后一条声明的最后可以不加，但是尽量习惯加

1.1. 内联样式

在标签中使用属性style，可以定义当前标签的样式，或者直接使用style标签
1）在标签的style属性设置 "key:value vaue"，修改标签样式

  1. <div style="border: 1px solid red;">halo，myself</div>

1.2 style标签

专门用来定义css样式代码
注意：css代码中的注释使用 / 注释内容 /

  1. <style type="text/css">
  2.     div{
  3.         border: 1px solid red;
  4.     }
  5.     p{
  6.         border: 1px solid green;
  7.     }
  8. </style>

这种使用style标签方式的缺点：
①只能在同一个页面复用代码，不能在多个页面内复用css代码
②维护起来不方便，实际的项目中会有成千上万的页面，要到每一个页面中去修改，工作量大

1.3 单独的css文件

把css样式写在一个单独的css文件，再通过 link 标签引入即可复用，link标签一般定义在head标签里

  1. <link rel="stylesheet" type="text/css" href="1.css" />

二 选择器

2.1 标签名和id选择器

  1. div{
  2.     border: 1px solid red; /* 边框 */
  3.     color: blue; /* 字体颜色 */
  4.     font-size: 20px; /* 字体大小 */
  5. } 
  6. p{
  7.     border: 5px dashed red;
  8.     color: yellow;
  9.     font-size: 20px;
  10. }

通配选择器，可以选中当前页面的所有标签

  1. * {
  2.     background-color: aqua;
  3. }

id选择器

  1. #a{
  2.     border: 2px dashed blue;
  3.     color: green;
  4.     font-size: 30px;
  5. }

2.3 class选择器

格式：

  1. .class属性值{     
  2.   属性：值
  3. }
  1. .class01{
  2.     border: 2px solid blue;
  3.     color: green;
  4.     font-size: 30px;
  5. }

class选择器可以通过class属性，有效的去选择性使用这个样式

2.4 组合选择器

第一种：交集选择器，选择符合多个条件的元素，如果有元素选择器的话，需要将元素选择器放在开头

  1.  p .a .b .c {
  2.    color: rebeccapurple;
  3.    font-size: 20px;
  4. }

第二种：并集选择器，使用逗号分割

  1. .class01, #id01{
  2.     border: 2px solid blue;
  3.     color: green;
  4.     font-size: 30px;
  5. }

2.4 关系选择器

  • 子元素选择器：选中的元素的直接子元素，间接子元素不包含在内，使用 > 

    1. div>div>span {
    2. color: red;
    3. }

  • 后代选择器：使用空格

    1. div span {
    2. color: red;
    3. }

  • 下一个元素选择器：只选中元素的下一个同级元素，只选中一个，使用 +

    1. div+span {
    2. color: green;
    3. }

  • 选择后面的所有同级元素：不包含当前元素，使用 ~

    1. span~span {
    2.   color: blue;
    3. }

    2.5 属性选择器

    [属性]，选中包含有当前属性的元素
    [属性=属性值]：表示选中属性值为指定的元素
    [属性^=属性值]：表示选择属性以指定属性值开头的元素，包含当前属性值
    [属性$=属性值]：表示选择属性以指定属性值结尾的元素
    [属性*=属性值]：表示选择属性包含指定属性值的元素 ```css div[title=b] { color: red; }

div[title^=a]{ color: purple; } div[title$=c] { color: cyan; }

  1. <a name="zpTfC"></a>
  2. ## 2.6 伪类选择器
  3. 一般使用：冒号，<br />这种情况下是父元素下的所有元素进行排序，
  5. 1. **first-child**：表示第一个子元素，但是需要符合标签
  6. 1. **last-child**：最后一个元素
  7. 1. **nth-child(n)**：取值n表示所有元素，2n偶数位子元素，2n+1表示奇数位子元素
  8. ```css
  9. ul>li:nth-child(2n) {
  10.   /**
  11.       这种情况就是在ul下的li是第一个子元素的情况下才会被选中
  12.   */
  13.   color: red;
  14. }

同类型元素进行排序，指定的类型

  1. first-of-type
  2. last-of-type

  3. nth-of-type(n)

    2.7 超链接的伪类

    超链接有几种状态，未访问，以访问，还有鼠标的一些行为等

  4. link：未访问

  5. visited：以访问
  6. hover：鼠标移动到文字上面 ```css 百度一下

a:link { color: red; }

a:visited { color: blue; }

a:hover { color: purple; }

  1. <a name="ZR9NG"></a>
  2. ## 2.8 伪元素
  3. 表示页面中一些特殊元素，并不真实存在的元素（特殊的位置），伪元素使用 :: 来表示
  5. 1. **first-letter**：表示第一个字母
  6. 1. **first-line**：表示第一行
  7. 1. **selection**：表示选择的内容
  8. 1. **before**：表示元素的开头
  9. 1. **after**：表示元素的结尾
  11. 注意：before和after一般 都结合content这个属性来使用，注入一个字符。这俩个使用的最多，其他的使用的较少
  12. ```css
  13. p::first-letter {
  14.   color: red;
  15.   font-size: 50px;
  16. }

三 样式的一些基础

  1. 样式的继承：当为一个父元素设置样式之后，也会应用到其子元素身上。继承是发生在祖先元素和后代元素之间的，可以将一些通用的样式设置在祖先元素身上，继承到其后代之中。但是注意，并不是所有的样式都会被继承，如背景相关，布局相关的就不会被继承
  2. 选择器的权重： 当使用不同的选择器选中相同的元素时，此时便发生样式冲突。选择器的权重如下，权重越高，值越大。比较优先级时，会将交集的选择器权重相加，值越大优先级越高。但是选择器权重的累加不会越级。如无论多少个类选择器相加，哪怕超过100，也不会比id选择器优先级高。
    1. 内联样式 1000
    2. id选择器 100
    3. 类和伪类选择器 10
    4. 元素选择器 1
  3. 单位：
    1. 像素，px，由一个个点构成，屏幕上的一点就是一个像素
    2. 百分比，可以将属性值设置为父元素的属性值的百分比

  4. 文档流：网页时一个多层次的结构，最底层的被称为文档流，我们创建的元素都在文档流中进行排列。对于元素来说有两种状态，在文档流中，不在文档流中。在文档流中：①块元素，在页面会独占一行，默认宽度是父元素的全部，会把父元素撑满，默认高度会被内容撑开。②行内元素，不会占页面的一行，只占自身的大小。行内元素是从左向右水平排列的。

    四 盒子模型

    盒子模型，盒模型，框模型（box model）。CSS将页面的元素都设置为一个矩形的盒子，将元素设置为矩形的盒子之后，对页面的布局就变成将不同盒子存放到不同的位置。

  5. 内容区（content）

  6. 边框（border）
  7. 内边距（padding）

  8. 外边距（margin）

    4.1 内容区

    content，元素中的所有子元素和文本内容都是在内容区中排列的，内容区的大小由 width，height 设置

    1. div {
    2. width: 200px;
    3. height: 200px;
    4. background-color: red;
    5. }

    4.2 边框

    border，边框属于盒子模型边缘，边框是在盒子模型里面的。要设置边框，至少要设置三个属性值（宽度，颜色，样式）
    注意：盒子模型的整体大小是包含边框和内容区的，所以下面的盒子宽度为：200+20=220px

  9. border-width：边框宽度，默认值是：3px。取值可以是指定4个边框的宽度。还有一组属性分别指定值

    1. border-left-width: 0em;
    2. border-right-width: 0em;
    3. border-top-width: 0em;
    4. border-bottom-width: 0em;
  10. border-color：边框的颜色。默认值等于color属性的属性值，和width一样，也有一组属性
  11. border-style：边框的样式，如实线虚线等，有分组属性

  12. border：可以同时设置颜色，宽度，样式，取值没有先后顺序，使用空格隔开，有分组属性

    1. div {
    2. width: 200px;
    3. height: 200px;
    4. background-color: red;
    6. border-color: green;
    7. border-width: 20px;
    8. /*border-width: 20px 19px 21px 22px; */
    9. border-style: dashed;
    10. }

    4.3 内边距

    内容区和边框之间的距离就是内边距，默认是0，也就是不存在的。盒子模型一共有4个方向的内边距

  13. padding-top

  14. padding-right
  15. paddingt-bottom
  16. padding-left

内边距的设置也会影响到盒子的大小，内容区的背景颜色会延申到内边距当中
一个盒子的可见框大小由 边框 + 内边距 + 内容区 决定

  1. padding：是内边框的简写属性，可以同时指定4个内边距的大小

    1. padding: 10px 20px 30px 40px;

    4.4 外边框

    外边距不会影响到盒子可见框的大小，但是会影响到盒子的位置，一共有4个位置的外边距

  2. margin-top：上外边距，如果设置一个正数，元素会向下移动

  3. margin-right：右外边距，正数，向左移动
  4. margin-bottom：下外边距，正数，向上移动
  5. margin-left：左外边距，正数，向右移动

元素在页面中都是按照从左到右排列的
所以默认情况下，设置左，上外边框，会移动当前盒子，设置右，下外边距，会移动其他盒子

  1. margin-bottom: 20px;
  2. margin-left: 20px;

4.5 水平方向的布局

元素在水平方向上的布局由以下的几个属性共同决定

  1. margin-left
  2. border-left
  3. padding-left
  4. width
  5. padding-right
  6. border-right
  7. margin-right

一个元素在其父元素当中，水平布局必须满足以下的公式，上面的七个属性相加等于父元素的内容区宽度
当指定的属性值不满足时，这时候会称为过度约束，则浏览器会对属性值进行调整

  1. 当7个属性值没有auto的时候，会调整margin-right的属性值，使等式和为父元素的内容区宽度

  2. 这7个属性有3个可以设置为auto：width，margin-left，margin-right，当有设置为auto的，会调整那个属性值使等式值成立

    4.6 垂直方向的布局

    子元素在父元素中的内容排列，如果超出了父元素的区域，可以使用overflow属性来设置显示效果

  3. auto：自动显示滚动条，超过则使用滚动条

  4. visible：显示超出部分
  5. hidden：切掉超出部分

  6. scroll：使用滚动条

    1. .box {
    2. width: 200px;
    3. height: 200px;
    4. background-color: red;
    6. overflow: auto;
    7. }

    4.7 行内元素的盒子模型

    行内元素不支持设置宽度和高度，
    行内元素可以设置padding属性，但是垂直方向不会影响页面的布局
    也可以设置border属性，也不会影响垂直方向上的布局
    也可以设置margin属性，不会影响布局

但是可以使用display属性将行内元素进行转化，用来设置元素的类型

  1. inline：将元素设置为行内元素
  2. block：将元素设置为块元素
  3. inline-block：将元素设置为行内块元素，具备两者的特点，既可以设置宽高，也不会独占一行
  4. table：将元素设置为表格
  5. none：元素不在页面中显示

还可以使用visibility 来设置元素的显示状态

  1. visible：默认值，元素正常显示
  2. hidden：元素不显示，但是会在页面中占据位置，和display=none有点类似

    附录 常用样式

    3.1 color：字体颜色

    取值：
    1）可以写颜色名：blue，red，green，yellow等
    2）可以写rgb：rgb(255,0,0)
    3）十六进制：#00F6DE，（注意：十六进制必加#）

    3.6 使div标签居中

    1. margin-left: auto;
    2. margin-right: auto;

    3.7 超链接去掉下划线

    1. text-decoration: none;

    3.8 文本居中

    1. text-align: center

3.9 表格曲线

  1. table{
  2.     border: 1px solid ;
  3.     border-collapse: collaps;
  4. }
  5. td{
  6.     border: 1px red solid;
  7. }

3.10 去掉修饰物

  1. ul{
  2.     list-style: none;
  3. }