CSS 基础

目录

 

CSS3

1、什么是CSS

2.CSS的优势

3、CSS的基本语法

4、引入CSS方式

行内样式

内部样式表

外部样式表


CSS3

1、什么是CSS

Cascading Style Sheet 级联样式表。

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

2.CSS的优势

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

3、CSS的基本语法

Style标签

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的样式表

链接式(使用的最多)

使用<link> 标签链接外部样式表,并讲解各参数的含义, <link> 标签必须放在<head> 标签中

导入式

使用@import导入外部样式表

链接式与导入式的区别

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

CSS样式优先级

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

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

寇大大

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值