第四章 初识css3

第四章 初识css3

1.style标签

<style type="text/css">
    h1{
        font-size:12px;
        color:#F00;
    }
</style>

行内样式

​ 使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表

CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>

外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式

1. 链接式

<head>
  ......
<link href="style.css" rel="stylesheet" type="text/css" />
......                      rel使用外部样式表    type文件类型
</head>

​ 2.导入式

<head>
......
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

css样式优先级

• 就近原则

2.基本选择器

标签选择器

p { font-size:16px;} 

类选择器

<标签名 class= "类名称">标签内容</标签名>

.class { font-size:16px;}

ID选择器

#id { font-size:16px;}

交集选择器

并集选择器

基本选择器优先级（不遵循"就近原则"）

ID选择器>类选择器>标签选择器

3.高级选择器

• 层次选择器

  

• 结构伪类选择器

  

• 属性选择器