4、CSS概述

CSS:页面美化和布局控制

1、概念:Cascading Style Sheets 层叠样式表

层叠:多个样式可以作用在同一个html样式上,同时生效

2、好处:

1、功能强大

2、将内容展示和样式控制分离

降低耦合度,解耦

让分工协作更容易

提高开发的效率

3、CSS的使用:CSS和html结合方式

1、内联样式

在标签内使用style属性指定CSS代码(作用域当前标签)

如:<div style="color:red;">hello css<div/>

2、内部样式

在head标签内,定义style标签,style标签的标签体内容就是css代码(作用域当前页面)

如:<head>

<style>

div{

color:blue;

}

<style/>

<head/>

<div>hello css<div/>

3、外部样式

1、定义css资源文件

2、在head标签内,定义link标签,引入外部的资源文件(作用域)

在<link>标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。rel="stylesheet" type="text/css" 是固定写法,不可修改,rel是relationship的英文缩写,也就是“关系”,stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思,rel="stylesheet" 的意思就很明显了:描述了当前页面与href所指定文档的关系。即说明的是,href连接的文档是一个新样式表。

如:(1)a.css文件

div{color:blue;}

(2)<link rel="stylesheet" href="css/a.css">

<div>hello css<div/>

注意:

1,2,3三种方式,css作用范围越来越大

1方式不常用,后期常用2,3

3种格式可以写为:

<style>

@import"css/a.css";

<style/>

发布了18 篇原创文章 · 获赞 0 · 访问量 161

猜你喜欢

转载自blog.csdn.net/weixin_42065524/article/details/104281577
今日推荐