css 层叠样式表
一、三种css样式使用方式
1.内联样式
将css的样式直接用在页面元素中,直接作用于这个元素。
缺点:
- 不符合结构~表现~行为三分离的原则
- 这种形式不方便于复用
<p style ="color :
blue; font -size: 20px; ">
我是圆圆的爸爸,希望圆圆顺利诞生!</p >
注意:
- 内联样式以style为开头后接引号,引号内也要符合名值结构,赋值完毕无论几个属性值都要使用分号结束
- 该样式有且只能作用于该元素,不能作用于其他元素
2.内部样式
将css属性值放置于head元素中,通过选择器作用于网页。
<head >
<style type ="text/css ">
p{
color: red;
font-size: 20px;
}
</style >
</head >
<body>
<p>我是圆圆的爸爸,希望圆圆能顺利诞生</p >
</body >
注意:
- 此处的p 就是css 的选择器,通过确定p 为选择器,网页中所有的p标签均变为设置的样式
- 内部样式有且只能作用于当前页面
- 注意选择器的表达规则,也是属于名值结构,同时属性值之后加分号结尾
3.外部样式
将css写入一个独立的css文件,然后通过link标签将其引入作用于当前页面
优点:
- 通过独立的css文件引入当前目录,可以最大限度地实现了结构和表现分离,复用性最高
- 可以充分利用浏览器的缓存,加快访问速度
css文件,命名为style.css 具体内容如下:
p {
color: red;
font-size: 20px ;
}
在独立的css 文件中不需要加<style >标签
当前页面引入的方法:
<head>
<link rel ="stylesheet" type ="text/css
href = "style.css ">
</head>
前两个属性值是固定的,最后一个才是引入外部样式表
二、css的语法
语法结构=选择器+声明块
大括号之前的元素为选择器,是css发生作用的元素对象
大括号里面是声明块,由一个一个声明组成
声明块实际上就是名值组合,一个名值结构就是一个声明,一个声明块可以有无数个声明
多个声明用分号隔开,名值之间用冒号连接
注意:
内部样式和外部样式代码属于css 代码也就是说内部样式中的代码不属于html代码,不能使用html代码的注释形式() 此时注释应该使用(/* */)