CSS的引入方法
1、内嵌式:
直接在<head>标签中完成CSS文件的引入
<style type="text/css">
使用选择器控制HTML格式
</style>
2、外链式:
通过引入<link>标签完成CSS文件的引入
<link rel="" type="" href="">
rel:定义当前文档与被链接文档之间的关系
type:规定被链接文档的MIME类
href:引入CSS文件的位置两种写法
1。相对路径
a) ./ 代表文件的所在目录(可以省略)
b) ../ 代表文件的上级目录
c) ../../ 代表文件的上上级目录
d) / 代表文件所在的根目录
2.绝对路径 完整的路径地址
文件从根目录开始查找,注意win的路径符号 \ 换成 /
3、行内式:
直接在HTML元素标签内编写属性 使用 style
4、导入式:
通过 @import 导入外部样式,遵循相对路径或绝对路径
四种导入方式的比较
导入方式 | 导入方法 | CSS文件位置 | CSS文件加载 |
---|---|---|---|
行内式 | 元素标签内 style | HTML文件内 | 同时 |
内嵌式 | 在head标签内使用 style标签 | HTML文件内 | 同时 |
外链式 | 在head标签内使用 link标签 | 与HTML文件分离,在单独的文件内 | 页面加载时,同时加载CSS样式 |
导入式 | 在head标签内 使用style标签用 @import | 与HTML文件分离,在单独的文件内 | 在读取完THML之后加载 |
CSS样式执行的优先级是就近原则
一般是:行内式 > 内嵌式 > 外链式 > 导入式
CSS基础语法
CSS通过选择器对HTML元素进行控制。
选择器的构成:
选择器名 {声明1;声明2;…声明n;}
声明是 属性:值
注释:声明使用花括号包围,值如果是若干单词使用引号括起。eg:p{font-family:”sans serif”;}
多个声明之间使用 ; 链接,建议使用代码的方式,一行写一个声明。虽然最后一个声明可以不加 ; 但是为了日后便于修改管理统一加上 ;
CSS高级语法
1、选择器分组
可以对不同种类的选择器进行分组,同组的选择器具有相同的属性,用 , 进行分割
eg:
h1,h2,h3{
color:green;
}
2、选择器继承
子元素从父元素继承属性,如果需要改变子元素的属性重新设置即可
3、派生选择器
允许根据上下文的关系来确定某个标签的样式
strong {
color: red;
}
h2 {
color: yellow;
}
h2 strong {
color: blue;
}
只会影响
<p>我是段落<strong>red</strong>.</p>
<h2>我是标题1</h2>
<h2>我是标题2<strong>blue</strong>.</h2>
4、后代选择器(包含选择器)
定义后代选择器创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
eg:只希望对h1元素中的em元素应用样式
h1 em{color:red;}
<h1>我是<em>重要</em>标题</h1>
<p>我是<em>重要</em>段落</p>
效果:
5、子元素选择器(Child selectors)
如果不希望选择任意的后代元素,而是缩小范围,只选择某个元素的子元素。
eg:希望选择制作为h1元素子元素的strong元素
h1>strong{color:red;}
会把第一个h1下面的两个strong元素改变颜色,但第二个h1不受影响
<h1>我是<strong>非常</strong> <strong>非常</strong> 重要的。</h1>
<h1>我是<em>非常</em> <em>非常</em> 重要的。</h1>
效果图:
6、相邻兄弟选择器(Adjacent sibling selector)
如果需要选择紧接在另一个元素后的元素,而且两者有相同的父元素。
eg:要增加紧接在h1元素后出现的段落的上边距
h1+p{margin-top:50px}
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
效果图