第四章初识CSS3①

最新推荐文章于 2024-07-22 09:30:52 发布

w就是不秃

最新推荐文章于 2024-07-22 09:30:52 发布

阅读量109

点赞数

分类专栏： HTML5+CSS3 文章标签： css3 css html

本文链接：https://blog.csdn.net/NoKris/article/details/125394677

版权

HTML5+CSS3 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

第四章初识CSS3①

一，什么是CSS

CSS的概念：

Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

二，CSS的发展史

在这里插入图片描述

三，CSS的优势

CSS的优势:

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

四，CSS的基本语法

在这里插入图片描述

五，HTML中引入CSS样式

引入方式共有三种。

引入方式：

行内样式
内部样式
外部样式

1.行内样式

在标签中使用style属性引入CSS样式的方式是行内样式，示例如下：

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

2.内部样式

CSS代码写在<head>的<style>标签中是行内样式

优点：

方便在同页面中修改样式。

缺点：

不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底。

示例如下：

<head>
    <style>
        h1{
            color: green;
        }
	</style>
</head>

3.外部样式

CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：

链接式
导入式

链接式示例：

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
  ……
</head>

导入式示例：

<head>
  ……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

链接式与导入式的区别:

<link/>标签属于XHTML，@import是属于CSS2.1。
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示。
使用@import导入的CSS文件，客户端先显示HTML结构，再把CSS文件加载到网页当中。
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的。

六，CSS样式优先级

CSS样式优先级如下：

1.行内样式>内部样式表>外部样式表。
2.就近原则。

CSS是由两大部分知识组成，一是选择器，二是属性和属性值，选择器我们会在下篇讲解。

w就是不秃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四章初识CSS3①

引入方式共有三种。 1.行内样式在标签中使用style属性引入CSS样式的方式是行内样式，示例如下： 2.内部样式 CSS代码写在的标签中是行内样式示例如下： 3.外部样式 CSS代码保存在扩展名为的样式表中，HTML文件引用扩展名为的样式表，有两种方式：链接式示例：导入式示例：六，CSS样式优先级 CSS样式优先级如下： CSS是由两大部分知识组成，一是选择器，二是属性和属性值，选择器我们会在下篇讲解。...
复制链接

扫一扫