前端基础——CSS（一）

时间 2020-10-26

标签 css html 前端 css3 浏览器服务器字体网站 url code 栏目 CSS 繁體版

原文原文链接

CSS

css 层叠样式表（cascading style sheets），做用是静态的修饰网页，而且能够配合各类脚本语言动态的对网页各元素进行格式化css

发展过程html

版本：             时间：               
    css1             1995年12月
    css2             1997年初
    css3             1999年开始制订

前端三层技术前端

html ----> 结构层 ------- 从语义的角度搭建网页结构

css ----> 样式层 ------- 从美观的角度描述页面样式

JavaScript--->行为层 ------- 从交互的角度描述页面行为

css实现了页面的结构和样式分离，拯救了混乱的HTML

css组成css3

层叠层                            样式
   (css中贯穿始终的加载特性)        (定义如何显示HTML元素)
    层叠性                          文字文本
    继承性                          背景
                                    盒模型
                                    浮动
                                    定位
                                    其余

css 书写位置

内联式：也称行内式，在HTML标签上的style属性中书写css样式

<div style="width:100px;height:100px;background>

内联式缺点：必须写在标签上，使标签结构繁重，增长代码量

内嵌式：
缺点：结构和样式没有彻底分离，代码依旧书写在HTML文件的<style>标签内部；css样式只能给一个HTML文件使用，若css代码太多，会形成头重脚轻。

外联式：在HTML的<head>标签内部使用<link>标签引入

属性名     属性值            说明
   rel    "stylesheet"    表示引入的外部文件与html之间的关系
   href    css 文件路径    超文本引用
   type    "text/css"     表示加载时代码按照纯文本形式的css代码加载

外联式的优势：1.实现了HTML和css彻底分离；2.多个HTML文件能够公用一个css文件，减小代码量，便于提取公共的css；3.实现一个css变化，多个页面同时变化；4.一个HTML文件能够引入多个css文件，能够实现同一个页面中的css代码分层浏览器

导入式：(不建议使用直接在html中使用）
导入样式和连接样式比较类似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，相似第二种内嵌样式。会在加载html文档后在加载样式因此有时会出现没有样式的状况(很短暂)，而后就有样式了

@import在html中使用，以下：

<style type="text/css">

@import url(style.css);

</style>

CSS规则

css规则由两个主要部分构成：选择器，以及一条或多条声明服务器

多条样式属性
p{ width : 400px; font-size : 14px;}
|       |           |
选   属         属
择   性         性
器   名         值字体

样式规则
1.内嵌式中全部代码必须写在<head>标签内的<style>标签内

2.给每一个选择器添加的样式属性都必须写在一对大括号{}以内

3每条属性后面的分号必须写，若不写，会致使后面的代码加载错误

4.上传服务器时，经常使用紧凑格式的css样式格式，减小没必要要的空白字符，压缩文件大小，便于传输

(有专门的网站能够进行css代码压缩/解压缩格式化)网站

CSS经常使用样式

颜色color：给文字设置颜色的url

字体font-family：元素内文字的字体，字体属于font综合属性的一个单一属性。属性值能够有多个，值之间用逗号分隔。

浏览器中加载的字体是用户机器中自带的，若是电脑没有设置的字体则加载失败，须要查找下一个，全部每每在最后设置一个全部机器都具有的通用字体做为后路。code

盒子模型实体化——三属性

width、height、background-color

CSS 高级选择器

选择器：选择要添加样式的HTML标签的一种方法、模式
css2.1版本有7中选择器：

基础选择器：标签选择器、id选择器、类选择器、通配符选择器

高级选择器：后代选择器、交集选择器、并集选择器

标签选择器：经过标签名选择标签元素。选中的是HTML文件中全部的同名标签。（不受嵌套关系影响，依旧能选中）

id选择器：经过标签上的id属性去选择标签。

若是但愿多个标签设置相同的样式，使用id选择器的话，必须给这多个标签去不一样的id名，分别选中设置。【书写：#id属性值】

类选择器：经过标签上的class属性去选择标签。
选择的是页面中全部class属性值相同的标签。【书写：.class属性值】

通配符选择器：经过一个特殊符号选择页面内全部的标签，选择的是<html>标签在内的全部标签。【书写：* 】

缺点：选择效率低，会让不须要的标签也加载一次样式，致使浏览器多作无用的工做。

后代选择器：包含选择器，经过标签之间存的嵌套关系去选择元素，至关于基础选择器。【书写：空格表示后代，空格前面的选择器选中的标签是后面选择器选中的祖先级】

代码示例：
   <style>
      .b1 ul li p{
      color:red;
      }
   </style>
   ......
   <div class="b1">
       <ul>
        <li><p>b1 标签 里的 li标签 内的段落p </p></li>
        <li><p>b1 标签 里的 li标签 内的段落p </p></li>
        <li><p>b1 标签 里的 li标签 内的段落p </p></li>
        <li><p>b1 标签 里的 li标签 内的段落p </p></li>
        </ul>
    </div>

交集选择器：经过一个标签上知足全部基础选择器稍微需求去选择标签。若是一个条件不知足都不能被选中，常见的是标签与类的交集。

【书写：基础选择器进行连续书写，若是有标签选择器参与交集，必须书写在开头。
还能够进行类名的连续交集。交集选择器能够做为其余高级选择器的组成部分。（IE6不支持类名连续交集写法）
】

代码示例：
     <style>
        p.demo{
            color:red;
        }//颜色为红色
        .d1 p.demo{
            color:red;
        }//这个覆盖了上面的直接为绿色
    </style>
    ....
    <div class="d1">
       <ul>
          <li><p>b1 标签 里的 li标签 内的段落p </p></li>
          <li><p class="demo p1">b1 标签 里的 li标签 内的段落p </p></li>
          <li><p>b1 标签 里的 li标签 内的段落p </p></li>
          <li><p>b1 标签 里的 li标签 内的段落p </p></li>
          <li><p>b1 标签 里的 li标签 内的段落p </p></li>
       </ul>
    </div>

并集选择器：能够将前面的6种选择器中间用逗号进行分隔，最后一个不写逗号。选中的是全部的单独选择器选中的标签的并集集合。

代码示例：
    <style>
       div,.demo{
          color:red;
        }
     </style>
     .....
      <div class="d1">
       <ul>
          <li><p>b1 标签 里的 li标签 内的段落p </p></li>
          <li><p class="demo p1">b1 标签 里的 li标签 内的段落p </p></li>
          <li><p>b1 标签 里的 li标签 内的段落p </p></li>
          <li><p>b1 标签 里的 li标签 内的段落p </p></li>
          <li><p>b1 标签 里的 li标签 内的段落p </p></li>
       </ul>
    </div>

若是多个标签具备公共样式，可是不能用一个选择器选中，可使用并集写法，也能够用该方法，进行默认样式清除，替换通配符的功能。

body,h2,div,ul,li,p {
       margin:0;
       pading:0;
   }

行内式样式与内嵌式或外链式样式比较权重时，行内式权重最高。
可是，与!important关键字相比权重要低的~

CSS 层叠式

继承性：样式能够从祖先级继承而来
层叠性：多个选择器在进行对比的过程当中，最终只有一个属性会加载成功，它会层叠、覆盖掉其余的属性。