前端开发那些事前端攻城狮Web 前端开发

前端开发之--CSS的魔力

2017-03-19  本文已影响46人  Jerry_WJ
题图：CSS的魔力

CSS概述

CSS语法

css语法规则由两个主要部分组成：选择器和属性值

CSS语法

css的使用注意点：

  1. <style>标签必须写在<head>标签的开始标签和结束标签之间
  2. <style>标签中的type属性可以省略，默认值即为type="text/css"
  3. 设置样式时必须按照固定的格式来设置，例如：key ：value

CSS属性

CSS属性
文字属性 
<style>  
      p {
          color: red;
          text-align: center;
          font-style: italic; /*设置倾斜*/
          font-weight: bold; /*文字加粗*/
          font-size: 20px; /* 文字颜色 注意: 设置值需要写px */
          font-family: "微软雅黑" ,"备选方案字体"; /* 设置字体*/
       }
</style>

文本属性

<style>
        p{
            text-decoration: none;
            text-align: left;
            text-indent: 2em;
        }
        a{
            text-decoration: none;
        }
</style>

颜色属性

<style>
        p{
            color: red;
            color: rgb(255,0,0);
            color: rgba(255,0,0,1);
            color: #FF0000;
        }
</style>

CSS选择器

CSS选择器

css常用选择器

标签选择器

h1 {   
       color: blue;
    }

作用：根据指定的标签名，在当前界面中找到所有该名称的标签设置属性

注意点：

  1. 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
  2. 标签选择器无论标签藏得多深都能选中
  3. 只要是HTML中的标签就可以作为标签选择器

id选择器

<style>
        #identity1 {
            color: red;
        }
        #identity2 {
            color: green;
        }
</style>

作用：根据指定的id名称找到对应的标签, 然后设置属性

注意点：

  1. 每个HTML标签都有一个属性叫做id, 所以每个标签都可以设置id
  2. 在同一个界面中id的名称是不可以重复的
  3. 在编写id选择器时一定要在id名称前面加上#
  4. id的名称只能由字母/数字/下划线组成，不能以数字开头,不能使用HTML标签
  5. 在企业开发中一般情况下如果仅仅是为了设置样式, 不建议使用id ，id主要是留给js使用

类选择器

<style>
        .header{
            color: red;
        }
</style>

作用：根据指定的类名称找到对应的标签, 然后设置属性

注意点：

  1. 每个HTML标签都有class属性
  2. 在同一个界面中class的名称是可以重复的
  3. 在编写class选择器时一定要在class名称前面加上“ . ”
  4. 类名的命名规范和id名称的命名规范一样
  5. 类名就是专门用来给CSS设置样式的
  6. 在HTML中每个标签可以同时绑定多个类名，例如：`<标签名称 class="类名1 类名2 ...">

后代选择器

<style>
        div p{
            color: red;
        }
        #identity p{
            color: red;
        }
        .para p{
            color: blue;
        }
        #identity #iii{
            color: green;
        }
        #identity .ccc{
            color: purple;
        }
        div ul li p{
            color: red;
        }
</style>

作用：找到指定标签的所有特定的后代标签, 设置属性

格式：

标签名称1 标签名称2{
    属性:值;
}

解释：先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后设置属性

注意点：

  1. 后代选择器必须用空格隔开
  2. 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
  3. 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
  4. 后代选择器可以通过空格一直查找下去

子元素选择器

<style>
        div>p{
            color: red;
        }
        #identity>p{
            color: blue;
        }
        div>ul>li>p{
            color: purple;
        }
</style>

作用：找到指定标签中所有特定的直接子元素, 然后设置属性

格式：

标签名称1>标签名称2{
    属性:值;
}

先找到所有名称叫做标签名称1的标签, 然后在这个标签中查找所有直接子元素名称叫做标签名称2的元素

注意点：

  1. 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
  2. 子元素选择器之间需要用>符号连接, 并且不能有空格
  3. 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
  4. 子元素选择器可以通过>符号一直查找下去

属性选择器

<style>
        p[id]{
            color: red;
        }
        p[class=cc]{
            color: blue;
        }
</style>

作用：根据指定的属性名称找到对应的标签, 然后设置属性

格式：

CSS三大特性

继承性

定义：给父元素设置的属性, 子元素也同样会被设置, 这个我们就称之为继承性
注意点：

  1. 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
  2. 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
  3. a标签的文字颜色和下划线是不能继承的，h标签的文字大小是不能继承的

层叠性

定义：层叠性就是CSS处理冲突的一种能力
注意点：层叠性只有在多个选择器选中同一个标签, 然后又设置了相同的属性, 才会发生层叠性

优先级
定义：当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级的三种方式

  1. 间接选中就是指继承如果是间接选中, 那么就是谁离目标标签比较近就听谁的
  2. 相同选择器(直接选中)如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
  3. 不同选择器(直接选中)如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠id>类>标签>通配符>继承>浏览器默认

优先级的权重：当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

权重计算规则：

  1. 首先先计算选择器中有多少个id, id多的选择器优先级最高
  2. 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
  3. 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
  4. 如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的也就是说优先级如果一样, 那么谁写在后面听谁的

注意点：
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

CSS元素的显示模式

块级元素
定义：块级元素会独占一行，大多属于容器类元素
属于块级元素的标签有：

<div>,<h>,<p>,<ul>,<ol>,<dl>,<li>,<dt>,<dd>

行内元素
定义：行内元素不会独占一行
属于行内元素的标签有：

<span> ,<a>,<b>,<strong>,<em>,<ins>,<del>,<td>,<img>

块级元素和行内元素的区别

  1. 块级元素会独占一行如果没有设置宽度, 那么默认和父元素一样宽如果设置了宽高, 那么就按照设置的来显示
  2. 行内元素不会独占一行如果没有设置宽度, 那么默认和内容一样宽行内元素是不可以设置宽度和高度的
  3. 行内块级元素为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素

CSS元素的显示模式转换

可以通过display属性来设置显示模式，取值有：

CSS盒子模型

盒子模型图示

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

盒子的box-sizing属性
CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变，取值：

网页的布局方式

注意点：

  1. 浮动流中没有居中对齐, 也就是没有center这个取值
  2. 在浮动流中不可以使用margin: 0 auto;
  3. 在浮动流中不区分块级元素/行内元素/行内块级元素
  4. 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
  5. 在标准流中内容的高度可以撑起父元素的高度
  6. 在浮动流中浮动的元素是不可以撑起父元素的高度的

浮动元素排序规则

浮动元素贴靠现象

文章引用

  1. 思维导图摘自李南江老师视频教程中
  2. 部分概念摘自w3school

声明
本文只做学习记录使用，分享出来供大家学习参考。文章中如有错误欢迎批评指正，谢谢。

上一篇下一篇

猜你喜欢

热点阅读