前端学习Day 6
2019-11-02 本文已影响0人
骑猪的baba
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代码的注释形式（） 此时注释应该使用（/* */）
