第四章初始css3

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 983 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #css

第四章初始css3

1.css的基本语法

1.css语法基本结构

h1 {
	font-size:12px;
	color:#F00;
}
//h1 选择器 font-size 属性  12px 值  color：#f00; 声明

CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

2.style标签

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

2.html中引入css样式

行内样式

使用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的样式表，有两种方式链接式导入式

链接式

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

导入外部样式表

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

链接式与导入式的区别

标签属于XHTML，@import是属于CSS2.1

使用链接的CSS文件先加载到网页当中，再进行编译显示

使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中

@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

css样式优先级

行内样式>内部样式表>外部样式表

就近原则

3.css3基本选择器

1.标签选择器

html标签作为标签选择器的名称

p { font-size:16px;}
p 标签选择器

2.类选择器

.class { font-size:16px;}
.class 类名称，类选择器
<标签名 class= "类名称">标签内容</标签名>

3.id选择器

#id { font-size:16px;}
#id id选择器

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

4.基本选择器的优先级

id选择器>类选择器>标签选择器

4.css的高级选择器

1.层次选择器

在这里插入图片描述

1后代选择器

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

body p{  background: red;  }

2子选择器

body>p{  background: pink;  }

3相邻兄弟选择器

.active+p {  background: green;  }

4通用兄弟选择器

.active~p{  background: yellow;  }

2.结构伪类选择器

在这里插入图片描述

li:first-child{ background: red;}
li:last-child{ background: green;}
 e  p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

在这里插入图片描述

使用EF:nth-child(n)和E F:nth-of-type(n)的关键点

E F:nth-child(n)在父级里从一个元素开始查找，不分类型

E F:nth-of-type(n)在父级里先看类型，再看位置

3.属性选择器

在这里插入图片描述

a[id] { background: yellow; }
 a[id=first] { background: red; }
 a[href^=http] { background: red; }
	 a[href$=png] { background: red; }
 a[class*=links] { background: red; }

486)]

a[id] { background: yellow; }
 a[id=first] { background: red; }
 a[href^=http] { background: red; }
	 a[href$=png] { background: red; }
 a[class*=links] { background: red; }