CSS基础知识-蒲公英云

CSS基础知识

迷南。 2023-10-01 15:36 126阅读 0赞

一、CSS简介

二、内容

1.css的引入方式

2.元素的id和class

3、CSS选择器

4、文本样式总结

5、文本样式总结

6、边框样式

7、背景样式概述

8、超链接样式

9、图片样式

10、列表样式

11、表格样式

12、CSS盒子模型

13、浮动布局

14、定位布局

预备知识与后续知识及项目案例

[HTML入门与进阶以及HTML5]
[CSS]
[JS-上]
[JS-下]
[jQuery]
[Node.js + Gulp 知识点汇总]
[MongoDB + Express 入门及案例代码]
[Vue项目开发-仿蘑菇街电商APP]

一、CSS简介

CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。

我们知道，HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。我们已经在HTML入门教程中的前端技术简介这一节详细讲解了这三者的区别，大家可以回去查看一下。

HTML、CSS和JavaScript的关系如下：

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”

二、内容

1.css的引入方式

在HTML中引入CSS共有3种方式：

（1）外部样式表；（2）内部样式表；（3）内联样式表；

下面我们详细为大家介绍这3种CSS引入方式。

一、CSS的3种引用方式

1、外部样式表

外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。外部样式表在单独文件中定义，并且在标签对中使用link标签来引用。举例：

<!DOCTYPE html>
       <html xmlns="http://www.w3.org/1999/xhtml">
       <head> 
       <title>
       </title>
       <!--在HTML页面中引用文件名为index的css文件-->
       <link href="index.css" rel="stylesheet" type="text/css" />
       </head>
       <body>   
       <div>
       </div>
       </body>
       </html>

说明：外部样式表都是在head标签内使用link标签来引用的。

2、内部样式表

内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。举例：

<!DOCTYPE html>
       <html xmlns="http://www.w3.org/1999/xhtml">
       <head>  
       <title>
       </title>    
       <!--这是内部样式表，CSS样式在style标签中定义-->    
       <style type="text/css">
       p{
       color:Red;}      
       </style>
       </head>
       <body>   
       <p>绿叶学习网
       </p>  
       <p>绿叶学习网
       </p>
       </body>