CSS基础学习第二章

作者: 艾曼大山 | 来源:发表于2019-04-26 14:02 被阅读0次

本篇文章适合基础薄弱想笼统学习的童靴们，因为我就是从零自学开始的，把我学习中常用到的知识点整理一下以后常常温故一下。

案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss

其它Web文章
HtmlCss基础学习第一章
 CSS浮动的使用和解决浮动的五种方法
 CSS定位relative、absolute、fixed使用总结
 原生开发WebApi知识点总结
 开发中常用jQuery知识点总结
 C3动画+H5+Flex布局使用总结
 ES6常用知识总结
 Vue学习知识总结
 开发环境到生产环境配置webpack
待续......

本编文章会讲到的知识点

引入CSS样式表
标签显示模式
CSS复合选择器
CSS 背景(background)
CSS 三大特性
盒子模型

引入CSS样式表

行内式（内联样式）

通过标签style属性设置样式。
语法中，style是标签的属性，属性和值的书写规范与CSS相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

内嵌式（内部样式表）

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

 <head>
<style type="text/CSS">
   选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

外链式（外部样式表）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内式	书写方便权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内嵌式	一定程度的实现了结构样式分离	没有彻底分离	较多	控制一个页面（中）
外链式	完全实现结构样式分离	需要引入	最多，强烈推荐	可控制多个页面（多）

CSS样式表案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .inline-p {
            font-size: 30px; 
            height: 100px; 
            background-color: rgb(202, 184, 21)
        }
    </style>
</head>
<body>
    <p style="font-size: 30px; height: 100px; background-color: blue">我是行内式css</p>
    <p class="inline-p">我是内嵌式css</p>
    <p class="outside-p">我是外链式css</p>
</body>
</html>

标签显示模式（display）

在html中，元素主要分为行内元素和块级元素、行内块元素。

块级元素(block-level)

每个块元素通常都会独自占据一整行，可设宽度、高度、对齐等，常用于网页布局结构搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

独占一整行
可设宽高，行高、外边距以及内边距都可设。
宽度默认撑满父级
可以容纳任何其他标签

行内元素(inline-level)

行内元素（内联元素）由内容撑开，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，
其中<span>标签最典型的行内元素。

行内元素的特点：

一行排多个。
不能设宽高，但水平的padding和margin可以设置，垂直的无效。
被内容撑开
行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：

只有文字才能组成段落，因此 p 里面不能放块级元素，
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
链接里面不能再放链接。

#######行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img>、<input>、<td>，

可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

一行多个
默认宽高内容撑开
宽高，外边距以及内边距都可设

三种显示模式转换

块 => 行内 display: inline;
行内 => 块 display: block;
行内 => 行内块 display: inline-block;

标签显示模式案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 50px;
            width: 200px;
            background-color: pink;
            /* display:inline 转成 行内元素*/
            display: inline;
        }
        .sp-block {
            width: 200px;
            height: 50px;
            background-color: rgb(23, 33, 179);         
            /* display:inline-block 可以转成 行内块元素 */
            display: inline-block;
        }
        .sp-inline{
            height: 50px;
            width: 100%;
            background-color: rgb(155, 22, 28); 
        /* display:block 转成 块级元素 */
            display: block;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <span class="sp-block">我是块级span</span>
    <span class="sp-inline">我是行内span</span>
</body>
</html>

CSS复合选择器

复合选择器是由两个或多个基础选择器组合而成的,目的是为了可以更准确的选择目标元素。

交集选择器

交集选择器由两个选择器构成，两个选择器之间不能有空格。
交集选择器是并且的意思，即...又...的意思。
必须两个条件同时满足，才能作用。
如果有标签选择器要放在最前面！

        /* 类名既有tall 又有mm */
        .tall.mm {
            background-color: red;
        }

        /* 首先是p标签 并且类名是sg */
        p.sg{
            color: red
        }

并集选择器

并集选择器（CSS分组选择器），逗号连接。
任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
并集选择器的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

        /* 
        * p标签选择器 zxy类选择器 gfc ID选择器，
        * 这三个选择器都会执行颜色为红色 
        */
        p, .zxy, #gfc{
            color: red;
        }

后代选择器

后代选择器，用来选择元素的后代。.father .son。
写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
子孙后代都可以选中。

        /* ul下子孙li都会变红 */
        ul li {
            color: red;
        }
        /* ul下类名为other的li变黑 */
        ul li .other{
            color: #000000;
        }

子元素选择器

子元素选择器，只能作用于子元素。父 > 子
规范：> 左右两侧各保留一个空格。
白话：这里的子指的是亲儿子不包含孙子重孙子之类。

    /* 
        * box下子一级（儿子）的p标签才会变蓝色，
        * 一级以下的都不会变（孙子） 
        */
        .box > p {
            color: blue;
        }

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

    /*  选择器[属性名] : 只要包含该属性即可被选中; */
        li[type] {
                color: blue;
            }
        /* 
            选择器[属性名="属性值"]： 
            属性值必须完全相同才会被选中 */
            li[type="meat"] {
            color: red;
        }
        /* 
            选择器[属性名*="属性值"]     
            只要包含该属性值就可以被选中
        */          
            li[type*="hot"] {
                color: green;
            }   
        /*
            选择器[属性名^="val"]
            当该元素属性值以这个 val 开头时作用

            ^: 表示以 .... 开头 ;
        */
            li[type^="dr"] {
                color: blue;
            }       
        /*
            $：表示以 ... 结尾
            选择器[属性名$="val"]
            当该元素属性值 以 val 结尾时起作用
        */
        li[type$="t"] {
            color: red;
        }       
        /*
            找到 type,对属性值进行分析，按照空格分隔匹配，
            必须与分隔出来的属性值完全相等，才起作用
        */
        li[type~="hot"] {
            color: blue;
        }
        /* 跟 * 区别， *是只要包含，就能生效，不管有没空格，不管什么位置 */

        /* 
            推测：
                先找 price，根据空格分隔所有的属性值,
                中间只要有类似于 very 和 very- 就可以被选中
                可以选中 very  very-...  
                这是不对的
                
            结果：
                E[属性|="val"]  必须以 val 开头
                1. 只是 val 可以被选中
                2. val-...
        */

伪元素选择器

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
E::before和E::after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*
            选择器::first-letter
            选中段落中的第一个字
        */
        p::first-letter {
            color: red;
            font-size: 50px;
            font-weight: bolder;
        }
        
        /*
            选择器::first-line
            选中段落中的第一行
        */
        p::first-line {
            color: green;
        }
        
        /*
            选择器::selection
            控制选中内容的样式
        */
        p::selection {
            background-color: rgb(236, 19, 63);
            color: blue
        }
            /*
            选择器::before
            可以给当前元素最前面 加 内容
            最关键属性 content 不能少
        */

        p::before {
            content: "￥";
            height: 50px;
            width: 50px;
            display: inline-block;
            background-color: blue;
            background-image: url(08.gif);
        }

        /*
         选择器::after
         可以给当前元素 最后面 添加 内容
         最关键属性 content 不能少
         行内元素的效果
        */
        p::after {
            content: "------你个损塞";
        }
    </style>
</head>
<body>
    <p>
        英语词汇，一般指即兴的、随性的随意的发挥，例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6月，因吴亦凡屡次提起而火遍网络。 吴亦凡爆红的freestyle，其实是嘻哈选手的基本功，也是《中国有嘻哈》节目中的一个环节名称。 发展经过编辑 从吴亦凡口里说出来，freestyle就变得很魔性了，因为他见人都会问一句，你有freestyle吗？两个选手难以选择，还是这句，“你们有freestyle吗”？
    </p>    
</body>
</html>

CSS 背景(background)

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

背景颜色: background-color
背景图片地址: background-image
是否平铺: background-repeat
背景位置: background-position
背景固定还是滚动: background-attachment

背景图片(image)

语法：background-image : none | url (url)
参数：
none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像
图片覆盖不到地地方都会被背景色填充。

背景平铺（repeat）

语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y
默认就是 repeat
参数：
repeat : 　背景图像在纵向和横向上平铺（默认的）
no-repeat : 　背景图像不平铺
repeat-x : 　背景图像在横向上平铺
repeat-y : 　背景图像在纵向平铺

背景位置(position)

语法：

background-position : length || length
background-position : position || position
参数：
length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : 　top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
注意：

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
实际工作用的最多的，就是背景图片居中对齐了。
background-position: center center;

背景附着

语法：background-attachment : scroll | fixed
参数：
scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

背景简写

background 属性值的书写顺序，没有强制标准的。
但为了可读性，建议大家如下写：
background:背景颜色背景图片地址背景平铺背景滚动背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

背景透明

CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度取值范围 0~1之间
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
同样，可以给文字和边框透明都是 rgba 的格式来写。
color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

背景缩放

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：

可以设置长度单位(px) 或百分比（设置百分比时，参照盒子的宽高）
设置为cover时，必须填满。覆盖整个父容器，不会失去原来的比例，按照原来比例撑满整个父容器
设置为contain, 必须完整。必须保证原有比例的前提，进行尽可能的放大。默认会居中

  div {
          height: 400px;
          background: url("0 8.gif") no-repeat center top;
          background-color: rgba(0,0,0, 0.7);
          /* background-size: 100% 400px; */

          /*覆盖整个父容器，不会失去原来的比例，按照原来比例撑满整个父容器*/
          /* background-size: cover; */

          /* 必须保证原有比例的前提，进行尽可能的放大。默认会居中 */
          /* background-size: contain; */
      }

多背景

以逗号分隔可以设置多背景，可用于自适应布局
background-image: url('images/a.jpg'), url('images/b.png');

CSS 背景(background)案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 1000px;
            width: 100%;
            background-color: pink;
            background-image: url("0 8.gif");           
            background-repeat: no-repeat;
            background-attachment: fixed;   
            background-position: center center; 
            /*background 连写*/
            background: pink url("0 8.gif") no-repeat fixed center center;
            /* 背景透明  */
            background: rgba(0,0,0, 0.5) url("0 8.gif") no-repeat fixed center center;
            /* 设置图片大小 */
            background-size: contain;
        }

    </style>
</head>
<body>
    <div>       
    </div>
</body>
</html>

CSS 三大特性

CSS 三大特性：层叠性继承性优先级

层叠性

层叠性指 CSS样式冲突产生的叠加现象,出现样式冲突，才会触发层叠。

样式冲突，就近原则。
样式不冲突，不会层叠

继承性

继承性：子标签继承父标签的某些样式，如文本颜色和字号等。恰当地使用继承可以简化代码，降低CSS样式的复杂性。

哪些样式可继承？: text-，font-，line-开头，以及color，可继承

CSS优先级

两个或更多规则应用于同一元素上，会出现优先级问题。

考虑权重时，应注意：

继承权重为0。
行内优先。大于所有选择器，小于!important
权重相同，就近原则。
!important 最大优先级

CSS权重计算公式(0, 0, 0, 0) :

!important 1,0,0,0
id 选择器 0,1,0,0
类选择器,伪元素,伪类选择器 0,0,1,0
标签选择器 0,0,0,1
行内样式不参与权重计算，比选择器大，比 !important小

发生样式冲突时，比较权重:
先比第一个：谁大，优先级就高
第一个一样，就比第二个：谁大，优先级就高
第二个一样，就比第三个：谁大，优先级就高
第三个一样，就比第四个：谁大，优先级就高
比完发现都一样，权重相同，就近原则（层叠性）

注意：

继承的权重是 0。
基本优先级： !important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
权重相同，就近原则

盒子模型

盒子模型就是把页面元素看作是一个矩形的盒子。
每个盒子由内容(content)、内边距（padding）、边框（border）和外边距（margin）四大部分组成。
每一个盒子都由四部分组成: content padding border margin。

盒子边框（border）

设置盒子在外层的一层皮，可以设置皮的宽度、样式、颜色。

语法：

border : border-width || border-style || border-color 
border: 1px solid red;

border-style 边框样式常用属性：

none：没有边框
solid：单实线(常用)
dashed：虚线
dotted：点线
double：双实线

盒子边框写法总结:
上边框:　
border-top-style 样式
border-top-width 宽度
border-top-color 颜色
连写：
border-top: 宽度样式颜色
border-top: 1px solid blue;

下边框 border-bottom-...
左边框 border-left- ...
右边框 border-right- ...

合并边框border-collapse：

当边框重叠时，会增加边框的宽度、颜色重度。可以使用border-collapse属性合并边框。

border-collapse:collapse; //表示边框合并在一起。

圆角边框
语法：

border-radius: 左上  右上  右下  左下;
border-radius: **px;
border-radius: **%;

可以分别为左上右上右下左下设置圆角。
可以简写一次性设置四条边。
可以写百分比。

内边距（padding）

padding: 内边距。指边框与内容之间的距离。

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding: 上右下左;

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top: 上外边距
margin-right: 右外边距
margin-bottom:下外边距
margin-left: 左外边距
margin:上右下左;

注意：

给行内元素  设置 垂直外边距margin 会无效
所以不要给 行内 设 margin-top 和 margin-bottom
给行内元素 设置 垂直 内边距 padding 也会有问题
所以不要给 行内 设 padding-top 和 padding-bottom

如果想设置上下内外边距，先转为块级元素。

外边距实现盒子居中

左右外边距设 auto, 实现盒子水平居中

需要满足两个条件：

必须是块级元素。
设了宽度（width）

.header{ width:660px; margin:0 auto;}

图片在盒子中居中的两种方式

方式一：父盒子，设置 text-align: center
方式二：转成块, display:block; 设宽 , margin: 0 auto;

文字盒子居中区别，图片和背景区别

文字内容居中是 text-align: center
盒子居中左右margin 改为 auto （块级元素，要有宽度）
插入img，用的最多。比如产品展示类
background-image 小图标或者超大背景可以用到

清除元素的默认内外边距
为更方便控制网页元素，可清除默认内外边距：

* {
  padding:0;         /* 清除内边距 */
  margin:0;          /* 清除外边距 */
}

外边距合并

margin定义块元素垂直外边距时，很可能出现外边距合并。

相邻块元素垂直外边距的合并:

上下相邻两个块元素相遇，若上面设margin-bottom，下面设  margin-top。
他们垂直间距不是  margin-bottom 与  margin-top 之和，而是较大者。

嵌套块元素垂直外边距的合并:

嵌套关系的块元素，父元素 margin-top 可能会与子元素的 margin-top 合并，合并成较大者。
且子元素并没和父元素 margin开。

解决方案：

为父元素定义 1px 的上边框。
为父元素定义 1px 上内边距。
父元素添加 overflow:hidden （触发BFC 后再会讲）。
浮动，定位（触发BFC 后再会讲）。

盒子实际宽度和高度

在页面中占据的空间 margin + border + padding + content

注意：
1、width 和 height 对块级有效，对行内无效（ img 标签和 input除外，因为他们是行内块）。
2、计算总高度时，应考虑垂直外边距合并问题。
3、如果盒子没给宽度, 继承父亲的宽度，则 padding 一般不会影响盒子大小。