CSS基础总结01

CSS简介

CSS 是 层叠样式表 的简称。也会称之为 CSS样式表级联样式表

CSS 是一种 标记语言

语法规范

CSS 规则由两个主要的部分构成:选择器 以及 声明

  • 选择器 是用于选出需要设置 CSS 样式的 HTML 标签,选择器后跟的花括号内是对该对象设置的具体样式
  • 属性属性值 以 “键值对” 的形式出现 属性: 属性值;
  • 属性是对指定的对象设置的样式属性,例如:字体大小、文本颜色等
  • 属性和属性值之间用英文 : 分开
  • 多个 “键值对” 之间用英文 ; 进行区分(末尾的键值对可以不加 ;

所有的样式,都包含在

注:

  • 女生
    女生
    女生

    类选择器

    如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用 类选择器

    类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个 . 号显示。

    变红色

    注意:

    • 类选择器使用 .(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
    • 可以理解为给这个标签起了一个别名来表示
    • 长名称或词组可以使用中横线 - 来为类命名
    • 不能使用已有的关键字作为类名
    • 不要使用纯数字、中文等命名,尽量使用英文字母来表示
    • 命名要有意义,尽量使别人一眼就知道这个类名的目的(可读性第一,长度第二,推荐使用英语,如果是使用拼音请使用全拼
    • 命名规范:见附件(CSS 命名规范.md)

    记忆口诀:样式点定义结构类调用一个或多个开发最常用

    
    
    
    
        
        
        
        基础选择器之类选择器
        
    
    
    
        

    多类名

    我们可以给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签,简单理解就是一个标签有多个名字。

    
    
    
    
        
        
        
        基础选择器之类选择器
        
    
    
    
        
    zhoujirui

    多类名开发中使用场景

    • 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
    • 这些标签都可以调用这个公共的类,然后再调用自己独有的类
    • 从而节省 CSS 代码,统一修改也非常方便(模块化、可重用化
    
    
    
    
        
        
        
        基础选择器之类选择器
        
    
    
    
        

    id选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 # 来定义。

    注意:id 属性只能在每个 HTML 文档中出现一次。

    
    
    
    
        
        
        
        基础选择器之id选择器
        
    
    
    
        
    zhoujirui

    id 选择器和类选择器的区别:

    • 类选择器 (class) 可以重复,id 选择器不可重复(同一个 id 选择器只能调用一次)
    • 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用

    通配符选择器

    在 CSS 中,通配符选择器使用 * 定义,它表示选取页面中所有元素(标签)。

    • 通配符选择器不需要调用,自动就给所有的元素使用样式
    • 特殊情况才使用
    // 利用通配符选择器清除所有的元素标签的内外边距
    * {
        margin: 0;
        padding: 0;
    }

    选择器总结

    基础选择器 作用 特点 使用情况 用法
    标签选择器 可以选出所有相同的标签,比如:p 不能差异化选择 较多 p {color: red;}
    类选择器 可以选出 1 个或者 多个 标签 可以根据需求选择 非常多 .nav {color: red;}
    id 选择器 一次只能选择 1 个标签 ID 属性只能在每个 HTML 文档中出现一次,也只能调用一次 一般和 js 搭配 #nav {color: red;}
    通配符选择器 选择所有的标签 选择的太多,有部分不需要 特殊情况使用 * {color: red;}

    字体属性

    CSS Fonts(字体)属性用于定义:字体系列大小粗细、和 文字样式(如:斜体)。

    字体系列

    CSS 使用 font-family 属性定义文本的字体系列。

    p {
        font-family: "Microsoft YaHei";
    }
    
    div {
        font-family: Arial, "Microsoft YaHei";
    }
    • 各种字体之间必须使用英文状态下的逗号隔开
    • 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
    • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
    • 最常用的字体:body {font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";}

    注意:浏览器字体是依据用户操作系统来调用的。

    字体大小

    CSS 使用 font-size 属性定义字体大小。

    p {
        font-size: 20px;
    }
    • px(像素)大小是我们网页的最常用的单位
    • 谷歌浏览器默认的文字大小为:16px
    • 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
    • 可以给 body 指定整个页面文字的大小

    字体粗细

    CSS 使用 font-weight 属性设置文本字体的粗细。

    p {
        font-weight: bold;
    }
    属性值 描述
    normal 默认值(不加粗的)
    bold 定义粗体(加粗的)
    100-900 400 等同于 normal,而 700 等同于 bold,其它值一般不使用,注意这个数字后面不跟单位
    • 学会让加粗标签(比如 h 和 strong 等)变为不加粗,或者让其他标签加粗
    • 实际开发时,我们更喜欢用数字表示粗细

    文字样式

    CSS 使用 font-style 属性设置文本的风格。

    p {
        font-style: normal;
    }
    属性值 作用
    normal 默认值,浏览器会显示标准的字体样式 font-style: normal;
    italic 浏览器会显示斜体的字体样式

    注意:平时我们很少给文字加斜体,反而要给斜体标签 (em、i) 改为不倾斜字体。

    字体复合属性

    字体属性可以把以上文字样式综合来写,这样可以更节约代码。

    body {
        font: font-style font-weight font-size/line-height font-family;
    }
    
    body {
        font: normal 400 font-size/line-height "Microsoft YaHei", Arial, sans-serif;
    }
    • 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
    • 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
    
    
    
    
        
        
        
        CSS字体属性之复合属性
        
    
    
    
        
    三生三世十里桃花,一心一意百行代码

    字体属性总结

    属性 表示 注意点
    font-size 字号 我们通常用的单位是 px 像素,一定要跟上单位
    font-family 字体 实际工作中按照团队约定来写字体
    font-weight 字体属性 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
    font-style 字体样式 记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
    font 字体连写 1、字体连写是有顺序的不能随意换位置,2、其中字号和字体必须同时出现

    文本属性

    CSS Text(文本)属性可定义文本的 外观,比如:文本颜色文本对齐文本装饰文本缩进行间距 等。

    文本颜色

    color 属性用于定义文本的颜色。

    div 
      color: deeppink;
      /* color: #FF1493; 最常用 */
      /* color: rgb(255, 20, 147); */
    }
    表示方式 属性值
    预定义的颜色值 red,green,blue,black,white,gray
    十六进制 #FF0000,#FF6600,#29D794(每两位对应:#红R绿G蓝B)
    RGB 代码 rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)

    文本对齐

    text-align 属性只能作用于 块级元素,并让该块级元素内的 行内元素 实现居中(不一定是文字)。

    div {
        text-align: center;
    }
    属性值 解释
    left 左对齐(默认值)
    rigth 右对齐
    center 居中对齐

    文本装饰

    text-decoration 属性规定添加到文本的修饰,可以给文本添加 下划线删除线上划线 等。

    div {
        text-decoration: underline;
    }
    属性值 描述
    none 默认,没有装饰线(最常用
    underline 下划线,链接 a 自带下划线(常用)
    overline 上划线(几乎不用)
    line-through 删除线(不常用)

    文本缩进

    text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。

    通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

    div {
        text-indent: 10px;
    }
    p {
        font-size: 24px;
        /* em 为相对于当前元素的大小单位 */
        text-indent: 2em;
    }

    行间距(行高)

    line-height 属性用于设置行间的距离(行高),可以控制文字行与行之间的距离。

    • 行间距 = 上间距 + 文本高度 + 下间距
    • 上下间距 = (行间距 - 文本高度)/ 2
    • 文本高度 = font-size
    p {
        line-height: 26px;
    }

    注:上一行文字的底部与本行文字的底部之间的距离就是行间距。

    文本属性总结

    属性 表示 注意点
    color 文本颜色 我们通常用 十六进制 而且通常是简写形式 #fff(6 个一样可以简写)
    text-align 文本对齐 可以设定文字水平的对齐方式
    text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
    text-decoration 文本修饰 牢记 添加下划线 underline 取消下划线 none
    line-height 行高 控制行与行之间的距离

    CSS引入方式

    按照 CSS 样式书写的位置(或者引入的方式),CSS 样式表可以分为三大类:

    • 行内样式表(行内式)
    • 内部样式表(嵌入式)
    • 外部样式表(外链式)

    行内样式表

    行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式,适合于修改简单样式。

    青春不常在,抓紧谈恋爱
    • style 其实就是标签的属性
    • 在双引号中间,写法要符合 CSS 规范
    • 可以控制当前的标签设置样式
    • 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
    • 使用行内样式表设定 CSS,通常也被称为 行内式引入

    内部样式表

    内部样式表(嵌入样式表)时写到 HTML 页面内部,是将所有的 CSS 代码抽取出来,单独放到一个

      1. 我是 ol 的孩子
      2. 我是 ol 的孩子
      3. 我是 ol 的孩子
      4. 我是 ol 的孙子

      子选择器

      子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素。

      注意:是最近一级而并非最近一个

      语法:

      元素1>元素2 { 样式声明 }

      上述语法表示选择元素1 里面的所有直接后代(子元素)元素2。

      例如:

      div>p { 样式声明 }     /* 选择 div 里面所有最近一级 p 标签元素 */
      • 元素1 和 元素2 中间用 大于号 隔开
      • 元素1 是父级,元素2 是子级,最终选择的是元素2,即元素1 是不会生效样式的
      • 元素2 必须是亲儿子,其孙子、重孙之类都不归他管,你也可以叫:亲儿子选择器
      
      
      
      
          
          
          
          复合选择器之子元素选择器
          
      
      
      
          
      
      
      

      并集选择器

      并集选择器 可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明并集选择器 是各选择器通过英文逗号 , 连接而成,任何形式的选择器都可以作为并集选择器的一部分。

      语法:

      元素1, 元素2, 元素3 { 样式声明 }
      元素1,
      元素2,
      元素3 {
          样式声明
      }
      /* 推荐写法,编码风格 */

      上述语法表示选择元素1、元素2 和 元素3。

      例如:

      ul, div { 样式声明 }         /* 选择 ul 和 div标签元素 */
      • 元素1 和 元素2 中间用逗号隔开(最后一个不加逗号)
      • 逗号可以理解为和的意思
      • 并集选择器通常用于集体声明
      
      
      
      
          
          
          
          复合选择器之并集选择器
          
      
      
      
          
      熊大

      熊二

      光头强
      • 小猪佩奇
      • 猪爸爸
      • 猪妈妈

      伪类选择器

      伪类选择器 用于向某些选择器添加特殊的效果,比如:给链接添加特殊效果(链接伪类),或选择第 n 个元素(结构伪类)。 伪类选择器 书写最大的特点是用冒号 : 表示,比如::hover:first-child。 因为伪类选择器很多,比如:链接伪类结构伪类 等,所以这里先讲解常用的链接伪类选择器。

      伪类的由来:因为在页面中并没有这个真实存在的类,所以称为 “伪类”。

      链接伪类选择器

      链接伪类选择器注意事项:

      • 为了确保生效且不冲突,请按照 LVHA 的顺序声明 :link :visited :hover :active
      • 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式
      
      
      
      
          
          
          
          复合选择器之链接伪类选择器
          
      
      
      
          小猪佩奇
      
      
      

      注意::hover :active 也适用于其他标签元素。

      focus伪类选择器

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

      焦点就是光标,一般情况 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

      input:focus {
          background-color: yellow;
      }

      复合选择器总结

      选择器 作用 特征 使用情况 隔开符号及用法
      后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 .nav a
      子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于 .nav>p
      并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号 .nav, .header
      链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住 a{}a:hover 实际开发的写法
      :focus 选择器 选择获得光标的表单 跟表单相关 较少 input:focus 记住这个写法

      强调:复合选择器的层级写得越细越好(可读性,可维护性,安全性),同时将复合选择器的层级写得越细,可以提前避免大部分的选择器优先级混乱!

      元素显示模式

      元素显示模式 就是元素(标签)以什么方式进行显示,比如

      自己占一行,比如一行可以放多个

      HTML 元素一般分为 块元素行内元素 两种类型。

      块元素

      常见的块元素有

      -

      ,它们同时具有 块元素行内元素 的特点,有些资料称它们为 行内块元素

      行内块元素的特点:

      • 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
      • 默认宽度就是它本身内容的宽度(行内元素特点)
      • 高度,行高、外边距以及内边距都可以控制(块级元素特点)

      元素显示模式转换

      特殊情况下,我们需要元素模式的转换,简单理解: 一个模式的元素需要另外一种模式的特性 比如:想要增加链接 的触发范围。

      • 转换为块元素:display: block;(由于经常需要设置宽高,所以通常会将行内元素转换为块元素)
      • 转换为行内元素:display: inline;
      • 转换为行内块:display: inline-block;(常用)

      侧边栏案例

      
      
      
      
          
          
          
          简洁版小米侧边栏案例
          
      
      
      
          
          手机 电话卡
          电视 盒子
          笔记本 平板
          出行 穿戴
          智能 路由器
          健康 儿童
          耳机 音响
      
      
      

      单行文字垂直居中

      解决方案:让 文字的行高 等于 盒子的高度 就可以让文字在当前盒子内垂直居中。

      a {
        height: 40px;
        line-height: 40px;
      }  

      注意点:块级元素不会自动换行

      当块级元素的宽度超过其父元素宽度时,其不会发生换行。

      
      
      
          
          
          
          块级元素不会自动换行
          
      
      
      
      块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素
      行内元素 行内元素 行内元素 行内元素 行内元素 行内元素 行内元素 行内元素

      CSS 的背景

      通过 CSS 背景属性,可以给页面元素添加背景样式。 背景属性可以设置 背景颜色背景图片背景平铺背景图片位置背景图像固定 等。

      背景颜色

      background-color: 颜色值;

      一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。

      background-color: transparent;

      目前 CSS 还支持丰富的渐变色,但是某些浏览器不支持

      /* 浏览器不支持时显示 */
      background-color: red;
      /* 线性渐变 - 从上到下(默认情况下)*/
      background-image: linear-gradient(#e66465, #9198e5);

      背景图片

      background-image 属性描述了元素的背景图像,实际开发常用于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置(精灵图也是一种运用场景)。

      background-image : none | url(url)
      参数值 作用
      none 无背景图(默认的)
      url 使用绝对或相对地址指定背景图像

      注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号。

      background-color: pink;
      background-image: url(../images/logo.png);
      /* 1、背景图片不平铺 */
      /* background-repeat: no-repeat; */
      /* 2、默认情况下,背景图片是平铺的 */
      /* background-repeat: repeat; */ /* 页面元素既可以添加背景颜色也可以添加背景图片,只不过背景图片区域会覆盖背景颜色 */

      背景平铺

      如果需要在 HTML 页面上对背景图像进行平铺,可以使用 background-repeat 属性。

      注:平铺可以简单的理解为“重复”。

      background-repeat: repeat | no-repeat | repeat-x | repeat-y
      参数值 作用
      repeat 背景图像在纵向和横向上平铺(默认的)
      no-repeat 背景图像不平铺
      repeat-x 背景图像在横向上平铺
      repeat-y 背景图像在纵向上平铺

      背景图片位置

      利用 background-position 属性可以改变图片在背景中的位置。

      background-position: x坐标 y坐标;

      参数代表的意思是:x 坐标 和 y 坐标,可以使用 方位名词 或者 精确单位

      参数值 说明
      length 百分数 \ 由浮点数字和单位标识符组成的长度值
      position top \ center \ bottom \ left \ rigth 方位名词
      • 参数是方位名词

        • 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
        • 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
      • 参数是精确单位

        • 如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
        • 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
      • 参数是混合单位

        • 如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

      背景图像固定(背景附着)

      background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

      background-attachment 后期可以制作 视差滚动 的效果。

      background-attachment : scroll | fixed
      参数 作用
      scroll 背景图像是随对象内容滚动的(可见区域取决于背景图像的高度)
      fixed 背景图像固定
      
      
      
      
          
          
          
          超大背景图片
          
      
      
      
          

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      天王盖地虎, pink老师一米五

      背景复合写法

      为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性 background 中,从而节约代码量。 当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为: background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

      background: transparent url(image.jpg) no-repeat fixed top;

      这是实际开发中,我们更提倡的写法。

      背景色半透明

      CSS3 为我们提供了背景颜色半透明的效果。

      background: rgba(0, 0, 0, 0.3);
      • 最后一个参数是 alpha 透明度,取值范围在 0~1 之间
      • 习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);
      • 注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
      • CSS3 新增属性,是 IE9+ 版本浏览器才支持的
      • 但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

      背景总结

      属性 作用
      backgroud-color 背景颜色 预定义的颜色值 / 十六进制 / RGB代码
      backgroud-image 背景图片 url(图片路径)
      backgroud-repeat 是否平铺 repeat / no-repeat / repeat-x / repeat-y
      backgroud-position 背景位置 length / position 分别是 x 和 y 坐标
      backgroud-attachment 背景附着 scroll(背景滚动)/ fixed(背景固定)
      背景简写 书写更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
      背景色半透明 背景颜色半透明 background: rgba(0, 0, 0, 0.3); 后面必须是4个值

      背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)。

      CSS三大特性

      CSS 有三个非常重要的特性:层叠性继承性优先级

      层叠性

      给同一个选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题

      层叠性原则:

      • 样式冲突,遵循的原则是 就近原则,哪个样式距离结构近,就执行哪个样式
      • 样式不冲突,不会层叠

      注:就近的标准是:后 > 前

      div {
           color: red;
      }
      div {
           color: pink; /* 有效 */
      }

      继承性

      现实中的继承:我们继承了父亲的姓。

      CSS 中的继承:子标签会继承父标签的某些样式,如:文本颜色和字号,简单的理解就是:子承父业。

      • 恰当地使用继承可以简化代码,降低 CSS 样式的复杂性
      • 子元素可以继承父元素的样式( text-font-line-color ) 文本、字体、段落、颜色
      
      
      
      
          
          
          
          CSS三大特性之继承性
          
      
      
      
          

      周吉瑞

      行高的继承

      body {
          font: 12px/1.5 'Microsoft YaHei';
      }
      • 行高可以跟单位也可以不跟单位
      • 如果子元素没有设置行高,则会继承父元素的行高为 1.5
      • 此时子元素的行高是:当前元素文字大小 * 1.5
      • body 行高 1.5 这样写法最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高
      
      
      
      
          
          
          
          CSS三大特性之继承性——行高的继承
          
      
      
      
          
      周吉瑞

      JERRY

      • 没有指定文字大小

      优先级

      • 选择器相同,则执行层叠性
      • 选择器不同,则根据选择器权重执行

      选择器权重如下表所示:

      规则:比较位级别,位级别相同时比较位大小。

      选择器 选择器权重
      继承 或 * 0,0,0,0
      元素选择器 0,0,0,1
      类选择器、伪类选择器 0,0,1,0
      ID 选择器 0,1,0,0
      行内样式 style="" 1,0,0,0
      !important 重要的 无穷大
      
      
      
      
          
          
          
          CSS三大特性之优先级
          
      
      
      
          
      你笑起来真好看
      你笑起来真好看
      你笑起来真好看

      优先级注意问题:

      • 权重是由 4 组数字组成的,但是不会有进位!
      • 可以理解为:类选择器 永远大于 元素选择器ID 选择器 永远大于 类选择器,以此类推!
      • 等级判断 从左到右,如果某一位数值相同,则判断下一位数值
      • 可以简单的记忆:通配符继承 权重为 0,标签选择器 为 1,伪类)选择器为 10,ID 选择器为 100,行内样式表 为 1000,!important 无穷大
      • 继承的权重是 0,不管父元素权重多高,子元素得到的权重都是 0 !
      • a 链接浏览器默认指定了一个样式,所以它不参与继承,所以设置样式需要选中单独设置
      
      
      
      
          
          
          
          CSS三大特性之优先级——注意问题
          
      
      
      
          
          

      你还是很好看

      我是单独的样式

      权重的叠加:

      如果是复合选择器,则会有权重叠加,需要计算权重。

      注意:再次强调!权重虽然会叠加,但一定不会进位!(1万个元素选择器也比不过一个类选择器)。

      从左到右逐位比较,只有左一位同样大,才比较右边一位!

      例如:

      • div ul li ——> 0,0,0,3
      • .nav ul li ——> 0,0,1,2
      • a:hover ——> 0,0,1,1
      • .nav a ——> 0,0,1,1

      如果要对某一元素设置样式,那么就必须给它足够高的权重(注意:是给他,而不是他的父亲!)。

      提高选择器权重的技巧之一:多写几层类选择器

      
      
      
      
          
          
          
          CSS三大特性之优先级——权重叠加
          
      
      
      
          
      
      
      

      CSS盒子模型

      页面布局要学习三大核心盒子模型浮动定位

      网页布局的核心本质: 就是利用 CSS 摆盒子!

      盒子模型(Box Model)

      所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框外边距内边距、和 内容

      CSS基础总结01_第1张图片

      边框(border)

      border 可以设置元素的边框。

      边框有三部分组成:边框宽度(粗细)边框样式边框颜色

      语法:

      border: border-width || border-style || border-color
      属性 作用
      border-width 定义边框粗细,单位是 px
      border-style 边框的样式
      border-color 边框颜色

      边框样式 border-style 可以设置如下值:

      • none:没有边框,即忽略所有边框的宽度(默认值)
      • solid:边框为单实线(最为常用的)
      • dashed:边框为虚线
      • dotted:边框为点线

      边框简写:

      border: 1px solid red;     /* 没有顺序 */

      边框分开写法:

      border-top: 1px solid red;         /* 只设定上边框,其余同理 */

      表格的细线边框

      表格中两个单元格相邻的边框会重叠在一起,呈现出加粗的效果。

      border-collapse 属性控制浏览器绘制表格边框的方式。

      语法:

      border-collapse: collapse;
      • collapse 单词是合并的意思
      • border-collapse: collapse; 表示相邻边框合并在一起
      table,
      td,
      th {
          border: 1px solid black;
          /* 合并相邻的边框 */
          border-collapse: collapse;
          font-size: 14px;
          text-align: center;
      }

      边框会影响盒子实际大小

      边框会额外增加盒子的实际区域大小。盒子实际区域大小 = 内容区大小 + 内边距大小 + 边框大小 + 外边距大小。

      解决方案:

      1. 测量盒子大小的时候,不量边框
      2. 如果测量的时候包含了边框,则需要 width、height 减去边框宽度(注意减单边还是双边)
      
      
      
      
          
          
          
          边框会影响盒子的实际大小
          
      
      
      
          

      内边距(padding)

      padding 属性用于设置内边距,即边框与内容之间的距离

      如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子区域!

      属性 作用
      padding-left 左内边距
      padding-rigth 右内边距
      padding-top 上内边距
      padding-bottom 下内边距

      padding 属性(简写属性)可以有一到四个值。

      值的个数 表达意思
      padding: 5px; 1 个值,代表上下左右都有 5 像素内边距
      padding: 5px 10px; 2 个值,代表上下内边距是 5 像素,左右内边距是 10 像素
      padding: 5px 10px 20px; 3 个值,代码上内边距 5 像素,左右内边距 10 像素,下内边距 20 像素
      padding: 5px 10px 20px 30px; 4 个值,上是 5 像素,右 10 像素,下 20 像素,左是 30 像素(顺时针)

      如果盒子已经有了宽度和高度,此时再指定内边距,会撑大盒子区域!

      解决方案:

      • 如果保证盒子跟效果图大小保持一致,则让 width、height 减去多出来的内边距大小即可
      • 如果盒子本身没有指定 width、height 属性,则此时 padding 不会撑开盒子区域大小
      
      
      
      
          
          
          
          padding 撑大盒子
          
      
      
      
          

      使用技巧

      
      
      
      
          
          
          
          新浪导航案例-padding影响盒子的好处
          
      
      
      
          
      
      
      

      外边距(margin)

      margin 属性用于设置外边距,即控制盒子和盒子之间的距离

      属性 作用
      margin-left 左外边距
      margin-right 右外边距
      margin-top 上外边距
      margin-bottom 下外边距

      margin 简写方式代表的意义跟 padding 完全一致。

      外边距典型应用:

      外边距可以让块级盒子水平居中,但是必须满足两个条件:

      • 盒子必须指定了宽度 width
      • 盒子左右的外边距都设置为 auto
      .header { width: 960px; margin: 0 auto;}

      常见的写法,以下三种都可以:

      • margin-left: auto; margin-right: auto;
      • margin: auto;
      • margin: 0 auto;

      注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可。

      案例:

      
      
      
      
          
          
          
          盒子模型之外边距margin
          
      
      
      
          
      1
      2
      
      
      
      
          
          
          
          块级盒子水平居中对齐
          
      
      
      
          
      
      
      
      
          
          
          
          行内元素、行内块元素水平居中对齐
          
      
      
      
          
      里面的文字

      外边距合并

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

      注意:内边距没有合并一说!浮动的盒子不会发生外边距合并!

      主要有两种情况:

      • 相邻块元素垂直外边距的合并
      • 嵌套块元素垂直外边距的塌陷
      相邻块元素垂直外边距的合并

      当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottommargin-top 之和。而是取两个值中的较大者,这种现象被称为相邻块元素垂直外边距的合并(准确的描述应该是:大的外边距覆盖小的)。

      解决方案:尽量只给一个盒子添加 margin 值。

      
      
      
      
          
          
          
          相邻块元素垂直外边距的合并
          
      
      
      
          
      one
      two
      嵌套块元素垂直外边距的塌陷

      对于两个嵌套关系(父子关系)的块元素,当子元素有上外边距,此时父元素会塌陷较大的外边距值(外边距效果显示在父元素之上)。

      CSS基础总结01_第2张图片

      解决方案:

      • 可以为父元素定义上边框(比如:可以给一个透明 transparent 边框)
      • 可以为父元素定义上内边距
      • 可以为父元素添加 overflow: hidden
      • 其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题

      案例:

      
      
      
      
          
          
          
          外边距合并-嵌套块级元素垂直外边距塌陷
          
      
      
      
          

      CSS基础总结01_第3张图片

      
      
      
      
          
          
          
          外边距合并-嵌套块级元素垂直外边距塌陷
          
      
      
      
          

      CSS基础总结01_第4张图片

      注意:外边距的合并在利用盒子布局页面的时候是经常发生的!

      清除内外边距

      网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。

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

      注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距(某些时候,行内元素对上下内外边距不生效)。但是转换为块级和行内块元素就可以了。

      案例

      CSS基础总结01_第5张图片

      
      
      
      
          
          
          
          综合案例-MI产品模块
          
      
      
      
          

      快递牛,整体不错蓝牙可以说秒连。红米给力

      来自于 117384232 的评价

      CSS基础总结01_第6张图片

      
      
      
      
          
          
          
          综合案例-快报模板
          
      
      
      
          
      
      
      

      总结

      a、布局为啥用不同盒子,我只想用 div?

      标签都是有语义的,合理的地方用合理的标签。比如产品标题就用 h,大量文字段落就用 p

      b、为啥用辣么多类名?

      类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也更方便。

      c、到底用 margin 还是 padding?

      大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。

      一般来说,盒子与盒子之间统一用 margin,内容与边框之间用 padding。

      d、自己做没有思路?

      布局有很多种实现方式,可以开始先模仿大牛的写法,然后再做出自己的风格。

      最后一定多运用辅助工具,比如屏幕画笔,PS 等等。

      边框和阴影

      圆角边框

      CSS 3 新增了圆角边框样式。border-radius 属性用于设置元素的外边框圆角。

      
      
      
      
          
          
          
          圆角边框
          
      
      
      
          

      CSS基础总结01_第7张图片

      注意:

      • 参数值可以为数值或百分比的形式
      • 该属性是一个简写属性,可以跟多个值

        • 四个值:左上角、右上角、右下角、左下角(从左上开始顺时针)
        • 三个值:左上、右上+左下、右下(对角为一组)
        • 两个值:左上+右下、右上+左下(对角为一组)
      • 同时可以对特定角单独设置

        • 左上角:border-top-left-radius
        • 右上角:border-top-right-radius
        • 右下角:border-bottom-right-radius
        • 左下角:border-bottom-left-radius

      案例:

      
      
      
      
          
          
          
          圆角边框常用写法
          
      
      
      
          1. 圆形的做法:
          
      2. 圆角矩形的做法:
      3. 可以设置不同的圆角:

      CSS基础总结01_第8张图片

      ## 盒子阴影

      CSS 3 新增了盒子阴影。box-shadow 属性用于为盒子添加阴影。

      语法:

      box-shadow: h-shadow v-shadow blur spread color inset;
      描述
      h-shadow 必须。水平阴影的位置,允许负值。
      v-shadow 必须。垂直阴影的位置,允许负值。
      blur 可选。模糊距离(虚实程度)。
      spread 可选。阴影的尺寸(大小)。
      color 可选。阴影的颜色,请参阅 CSS 颜色值(阴影多为半透明颜色)。
      inset 可选。将外部阴影(outset)改为内部阴影(outset 不能指定,默认为空即可)。
      
      
      
      
          
          
          
          盒子阴影
          
      
      
      
          

      CSS基础总结01_第9张图片

      三边阴影、双边阴影、单边阴影

      
      
      
      
          
          
          
          盒子阴影 三边阴影、双边阴影、单边阴影
          
      
      
      
          
      四边阴影
      三边阴影
      两边阴影
      一边阴影

      文字阴影

      CSS 3 新增了文字阴影。text-shadow 属性用于为文本添加阴影。

      语法:

      text-shadow: h-shadow v-shadow blur color;
      描述
      h-shadow 必须。水平阴影的位置。允许负值。
      v-shadow 必须。垂直阴影的位置。允许负值。
      blur 可选。模糊的距离(虚实程度)。
      color 可选。阴影的颜色。参阅 CSS 颜色值。
      
      
      
      
          
          
          
          文字阴影
          
      
      
      
          
      你是阴影,我是火影

      参考

      黑马程序员pink老师前端入门教程

      HTML CSS

      你可能感兴趣的:(css前端)