Educoder/头歌JAVA——CSS从入门到精通——基础知识

目录

第1关：初识CSS：丰富多彩的网页样式

相关知识

CSS基本概念

CSS基础语法

选择器

声明

 第2关：CSS样式引入方式

相关知识

样式引入方式

内部样式表

外部样式表

内联样式

使用哪一种样式表？

样式的优先级顺序

---

第1关：初识CSS：丰富多彩的网页样式

相关知识

CSS基本概念

CSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。

在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。

所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。

基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。

例如，使用CSS排版清晰的网站；包含丰富多媒体的网站；自如运用CSS动画的网站。

一个简单的实例

首先，我们来下一个简单的实例：

9. CSS让网页样式更丰富

显示效果如下：

我们在HTML文档的元素中，加入了

CSS让网页样式更丰富

使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。

 第2关：CSS样式引入方式

相关知识

样式引入方式

CSS样式有三种引入方式：

1. 内部样式表：如同之前实例中所示，在文档头部中引入；

2. 外部样式表：通过外部文件引入；

3. 内联样式：直接在特定元素中引入。

下面，我们将为大家一一介绍这三种引入方式。

内部样式表

首先，对于内部样式表，书写的方式是直接在HTML文件的头部，添加元素。

具体举例如下：

在之前的实例中，为了方便大家同时看到HTML和CSS代码，我们都是使用的这一种方式。

外部样式表

第二种方式，是将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的中添加CSS文件链接。

4. /* 引入外部的CSS文件 */

属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置。与图像路径的链接方式类似，href属性值的书写方式要根据具体的CSS文件位置。

例如，当HTML文件与要引入的CSS文件不在同一文件夹时：

可以如下书写：

在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。

内联样式

内联样式是指直接在标签内添加样式属性。

举例如下：

1. 内联样式CSS表格

显示如下：

通用的书写格式：

使用哪一种样式表？

在实际开发过程中，通常建议使用第二种外联样式表的方式。

主要优点如下：

1. 内容与样式分离；

   易于开发和维护样式。

2. 样式易于复用；

   可在多个HTML文件中引入相同的样式文件。

3. 加载更快。

   如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。

样式的优先级顺序

三种样式引入的优先级顺序是：

外部样式< 内部样式 < 内联样式

也就是说，如果同时有三种样式的方式作用于同一元素，会优先的使用内联样式。

 

    
    
     
        
    
 
     
 
    

 

    

        
        
        
O Captain! My Captain!
 
        
            
        
        
O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the steady keel, the vessel grim and daring;
    
        
    
        

            © Walt Whitman