整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

css怎么引入html

ss怎么引入html

在HTML中引入CSS的方法主要有四种:

1. 内联方式:直接在HTML标签中的style属性中添加CSS,即采用行内样式。例如:<p style="color:red;">这是红色文字</p>。这种方式的优点是可以直接在HTML文件中看到效果,但缺点是不够模块化,不便于复用和维护。

2. 内嵌样式:使用<style>标签在HTML文档头部(<head><head>之间)定义CSS样式。例如:

<head>

<style>

p {

color: red;

}

</style>

</head>

<body>

<p>这是红色文字</p>

</body>

这种方式的优点是可以将CSS样式与HTML内容分离,提高代码可读性,但同样存在复用和维护的问题。

3. 链接式:使用<link>标签引入外部CSS样式表文件。具体操作步骤如下:新建一个HTML文件和一个CSS文件,将新建的CSS文件保存在一个文件夹中,回到HTML文件中,在<title><title>下方添加<link>标签并设置其属性为CSS文件的路径,保存后便实现了引入外部CSS文件。这种方式的优点是可以实现代码的复用和维护,但需要提前准备好CSS文件。

4. 导入式:使用@import命令导入外部CSS样式表。例如:<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是,这里的路径需要是正确的。这种方式可以在同一个HTML文件中引入多个CSS文件,但浏览器对@import的支持程度不同,可能会出现兼容性问题。

随着互联网技术的不断发展,网站的制作越来越成为重要的技能。在设计一个出色网站时,利用Cascading Style Sheets (CSS)是非常必要的。CSS是一个优化网站外观的语言,通过样式规则来定义元素的外观和排版方式。本文将深入探讨网站制作如何充分利用CSS来让你的网站更加出众。

1. 充分利用CSS样式表

利用外部CSS文件管理网站的样式表非常重要。外部CSS文件能提高网站的速度、减小HTML代码的体积以及方便的同时管理多个页面的样式。同时,内联样式和嵌入式样式也是一种有效的CSS编写方式,但应该根据实际情况使用。

2. 引入响应式设计

如今,人们用各种各样的设备来访问网站,从大显示器到小型手机屏幕。针对每个设备调整网站布局和元素位置非常麻烦,所以引入响应式设计是非常必要的。响应式设计是一种可以使网站在任何设备上都能完美适配的技术。使用CSS media query、flexbox布局、百分比和最大/最小宽度等属性可以实现响应式设计的需求。

3. 制作漂亮的动画效果

制作有趣的动画效果是一种提高网站用户体验度的方式。CSS提供了丰富的制作动画效果的属性和方法,列如transition、animation和transform等。这些属性和方法能让文字、图片和其他元素产生飞入、弹出、收缩等动画效果,极大提高了网站的视觉效果,令用户的浏览体验更加丰富。

CSS是制作优秀网站的核心技术之一。通过合理的CSS应用,我们可以减少HTML代码的体积、提高用户体验度和网站的速度。以上所述只是CSS的一小部分,希望能启发读者对CSS的深入研究,并为优化网站的外观和功能提供帮助。

、初识CSS3

本章目标:

  • 会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式
  • 会使用CSS3的基本选择器设置字体大小和颜色
  • 会使用复合选择器为特定的网页元素添加CSS样式
  • 会使用CSS3高级选择器为网页元素添加CSS样式

1.1、什么是CSS

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

在这里插入图片描述

说明:

  • 首先介绍什么是CSS
  • 然后对比讲解使用CSS和没有使用CSS的两个相同的HTML代码页面显示效果,说明CSS的重要性
  • 最后根据图说明CSS在网页中的应用

1.2、CSS的发展史

在这里插入图片描述


CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式;

CSS2.0 融入了DIV+CSS的概念,提出了HTML结构与CSS样式表的分离

CSS2.1 融入了更多高级的用法,如浮动,定位等。

CSS3.0 它包括了CSS2.1下的所有功能,是目前最新的版本,它向着模块化的趋势发展,又加了很多使用的新技术,如字体、多背景、圆角、阴影、动画等高级属性,但是它需要高级浏览器的支持。

由于现在IE 6、IE 7使用比例已经很少,对市场企业进行调研发现使用CSS3的频率大幅增加,学习CSS3已经成为一种趋势,因此本书会讲解最新的CSS3版本

本课程中主要讲解css2.1和css3

CSS的优势


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

1.3、CSS的基本语法

  • 首先讲解CSS的基本语法结构,由选择器和声明构成
  • 然后对照具体的样式详细讲解语法,强调声明必须在 { }
  • 最后说明基本W3C的规范,每条声明后的 ; 都要写上

在这里插入图片描述

Style标签

  • 讲解CSS样式如何在HTML中应用,引入style标签的应用
  • 讲解style标签,说明type=“text/css的用法
  • 说明style标签在HTML文档中的位置,在与之间

在这里插入图片描述

1.4、引入CSS方式

  • 行内样式 使用style属性引入CSS样式 <h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p> 使用style属性设置CSS样式仅对当前的HTML标签起作为,并且是写在HTML标签中的 这种方式不能起到内容与表现相分离,本质上没有体现出CSS的优势,因此不推荐使用。
  • 内部样式表 CSS代码写在 <head><style> 标签中 <style> h1{color: green; } </style> 优点:方便在同页面中修改样式 缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底 引出外部样式表
  • 外部样式表 CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表,有两种方式
  • 链接式(使用的最多,记住这个就可以了) 使用 标签链接外部样式表,并讲解各参数的含义, 标签必须放在 标签中

在这里插入图片描述


  • 导入式 使用@import导入外部样式表

在这里插入图片描述



链接式与导入式的区别

  1. 标签是属于XHTML范畴的,@import是属于CSS2.1中特有的。
  2. 使用 链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中,然后再进行编译显示,所以这种情况下显示出来的网页与用户预期的效果一样,即使网速再慢也一样的效果。
  3. 使用@import导入的CSS文件,客户端在浏览网页时是先将HTML结构呈现出来,再把外部CSS文件加载到网页当中,当然最终的效果也与使用 链接文件效果一样,只是当网速较慢时会先显示没有CSS统一布局的HTML网页,这样就会给用户很不好的感觉。这个也是现在目前大多少网站采用链接外部样式表的主要原因。
  4. 由于@import是属于CSS2.1中特有的,因此对于不兼容CSS2.1的浏览器来说就是无效的。

CSS样式优先级

行内样式>内部样式表>外部样式表
就近原则:越接近标签的样式优先级越高

【学员练习】 使用标题标签和段落标签制作李白的诗《望庐山瀑布》,诗正文字体颜色为绿色,字体大小为14p

在这里插入图片描述

1.5、CSS基本选择器

  • 标签选择器 HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img/>

在这里插入图片描述

  • 类选择器 一些特殊的实现效果,单纯使用标签选择器不能实现,从而引出类选择器

在这里插入图片描述

  • ID选择器 ID选择器的名称就是HTML中标签的ID名称,ID全局唯一

在这里插入图片描述


小结

  • 标签选择器直接应用于HTML标签
  • 类选择器可在页面中多次使用
  • ID选择器在同一个页面中只能使用一次

基本选择器的优先级

ID选择器>类选择器>标签选择

标签选择器是否也遵循“就近原则”? 不遵循,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

1.6、CSS高级选择器

1、层次选择器

在这里插入图片描述

  • 后代选择器 body p{ background: red; }

在这里插入图片描述

后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入

  • 子选择器 body>p{ background: pink; }

在这里插入图片描述


  • 相邻兄弟选择器 .active+p { background: green; }

在这里插入图片描述


  • 通用兄弟选择器 .active~p{ background: yellow; }

添加图片注释,不超过 140 字(可选)