CSS基础语法之CSS的3种引入-html教程-PHP中文网

首页

web前端

html教程

CSS基础语法之CSS的3种引入

php中世界最好的语言

Feb 28, 2018 am 10:16 AM

css 引入

这次给大家带来CSS基础语法之CSS的3种引入，CSS基础语法的CSS3种引入的注意事项有哪些，下面就是实战案例，一起来看一下。

CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。

Web早期，HTML是一种很有限的语言，这种语言不关心外观，它只是一种简洁的小型标记机制。

随着Mosaic网页浏览器的出现，网站开始到处涌现。对于页面改变外观的需求增加，于是增加了类似和之类的标记元素。

几年之后，大多数网站标记几乎完全由表格和font元素组成，且对于所要表现的内容不能传达任何实际含义，使文档可用性降低，且不易于维护。

于是1995年，W3C发布了CSS草案，试图解决结构与样式混杂的问题。

1996年，W3C正式推出CSS1。

1998年，推出CSS2。

2001年从CSS3开始，CSS这门语言分割成多个独立的模块，每个模块独立分级，且只包含一小部分功能。

2011年开始设计CSS4

一、css样式表的引入

1.内嵌样式表

内嵌样式表是写在Tag(标签)里面的。内嵌样式只对所在的Tag有效。(如果有多种样式，内嵌式会覆盖其它的样式，并生效自己的)

示例：

<p style="font-size:20pt; color:red"></p>

登录后复制

这个style定义

里面的文字是20pt字体，字体颜色是红色。

2.内部样式表

内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。

内部样式表要用到style这个Tag，写法如下：

<style  type="text/css">
     div{
           color : red;
         }</style>

登录后复制

3.外部样式表

如果很多网页需要用到同样的样式(Styles)，要用外部样式表。外部样式表需要将样式写在一个css文件中,然后在页面中用标签引入，在需要应用该样式的每个页面中引入该文件。

示例:

<HTML><HEAD>
   <link href="../css/a.css " rel ="stylesheet" type="text/css "></HEAD><BODY>…</BODY>
 </HTML>

登录后复制

1、标签位置一般写在标签之内。

2、css样式文件名称以有意义的英文字母命名，如 main.css。

3、href=""是引入css的路径

4、rel="stylesheet" type="text/css" 是固定写法不可修改。

记住他们的优先级：内联式 > 嵌入式 > 外部式

在CSS中也有注释语句：用/*注释语句*/来标明　　（Html中使用)

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

Java教程

1663

CakePHP 教程

1420

Laravel 教程

1315

PHP教程

1266

C# 教程

1239

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。