CSS3(Cascading Style Sheets 层叠样式表)
用来给HTML标签增加样式的语言
语言 | 功能 | |
---|---|---|
结构层 | HTML | 搭建结构、放置部件 |
样式层 | CSS | 美化页面、实现布局 |
行为层 | JavaScript | 实现交互效果数据收发表单验证 |
HTML、CSS结合的纽带——选择器
一、CSS书写位置
1、内嵌式(常用)
在<head> </head>
标签对中书写<style> </style>
标签对,里面书写 CSS语句
2、外链式(常用)
可将CSS单独存为.css
文件,然后使用<link>
标签引入
引入标签放在<head>
标签中
rel
属性式表明link
的链接与HTML的关系,stylesheet
即为样式表的意思,表示link
的是HTML的样式表
href
属性,表示路径和文件名
<link rel="stylesheet" href="css/css/css">
优点:多个HTML页面可以共用一个CSS样式文件
3、导入式
是最不常见的样式表导入方法
<style>
@import url(css/css.css);
</style>
基本不常用的原因:使用导入式引入的样式表,不会等待CSS文件加载完毕,而是立即渲染HTML文件,所以页面会有几秒钟的“素面朝天”的时间
4、行内式
样式可以直接通过style
属性写在标签上
<div style="font-size:30;color:green">
我是div中的文字,字体大小是30px,颜色是绿色
</div>
行内式牺牲了样式表批量设置样式的能力,只给一个标签设置样式,所以不常用
二、CSS3的基本语法
选择器 大括号 属性:值
h1 {
color:green;
font-weight:bold;
}
CSS3的注释是/* */
<style>
标签有type
属性,并且值为一(text/css
)含义是指明标签内的代码是标准的CSS,可省略不写。若不省略则一定要写对属性值,否则会造成浏览器不认识标签内的代码。
选择器之间,不能写分号或者其他符号,不然会导致下面那个样式不生效