CSS基础学习第二章

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

案例地址: 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特殊)

注意

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

#######行内块元素(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-...
        */
伪元素选择器
  1. E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
  2. E::first-line 文本第一行;
  3. E::selection 可改变选中文本的样式;
  4. 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%。第二个值将用于纵坐标。
    注意:
  1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
  2. 如果和精确单位和方位名字混合使用,则必须是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开发中做屏幕适配应用非常广泛。
其参数设置如下:

  1. 可以设置长度单位(px) 或 百分比(设置百分比时,参照盒子的宽高)
  2. 设置为cover时,必须填满。覆盖整个父容器,不会失去原来的比例,按照原来比例撑满整个父容器
  3. 设置为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样式冲突产生的 叠加现象,出现样式冲突,才会触发层叠。

  1. 样式冲突,就近原则。
  2. 样式不冲突,不会层叠
继承性

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

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

CSS优先级

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

考虑权重时,应注意:

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

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

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

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

注意:

  1. 继承的 权重是 0。
  2. 基本优先级: !important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承
  3. 权重相同,就近原则
盒子模型

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

盒子边框(border)

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

语法:

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

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

  1. none:没有边框
  2. solid:单实线(常用)
  3. dashed:虚线
  4. dotted:点线
  5. 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: **%;
  1. 可以分别为左上 右上 右下 左下设置圆角。
  2. 可以简写一次性设置四条边。
  3. 可以写百分比。

内边距(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, 实现盒子水平居中

需要满足两个条件:

  1. 必须是块级元素。
  2. 设了宽度(width)
.header{ width:660px; margin:0 auto;}

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

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

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

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

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

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

外边距合并

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

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

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

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

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

解决方案:

  1. 为父元素定义 1px 的上边框。
  2. 为父元素定义 1px 上内边距。
  3. 父元素添加 overflow:hidden (触发BFC 后再会讲)。
  4. 浮动,定位(触发BFC 后再会讲)。

盒子实际宽度和高度

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

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