第四章初识CSS3

森屿Serien

于 2024-08-07 08:02:57 发布

阅读量432

点赞数 16

分类专栏： HTML 文章标签： css3 前端 html

本文链接：https://blog.csdn.net/weixin_62008675/article/details/140962775

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

第四章初识CSS3

第四章初识CSS3

1.CSS的基本语法

选择器{ 声明2；

声明(属性：值)1;

}；

style标签 <style type="text/css"> </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的样式表中)

链接外部样式表(使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示)

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

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

<head>
<style type="text/css">
<!-- @import是属于CSS2.1,对不兼容CSS2.1的浏览器是无效的
@import url("style.css");
-->
</style>
</head>

CSS样式优先级: 就近原则

3.基本选择器

全局选择器

使用*号，选择所有标签
标签选择器（直接应用于HTML标签）

HTML标签作为标签选择器的名称<h1>…<h6>、<p>、<img/>
类选择器（可在页面中多次使用）

.类名称{属性:值;}

<标签名 class= “类名称”>标签内容</标签名>
ID选择器（在同一个页面中只能使用一次）

#id { 属性:值;}
交集选择器、并集选择器

使用,隔开
基本选择器的优先级

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

4.高级选择器

4.1层次选择器

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

body p{ background: red; }：body下所有p元素都为红色
子选择器

body>p{ background: pink; }:只有子元素为粉色
相邻兄弟选择器

.active+p { background: green; }:紧邻的p元素为绿色，本身不变
通用兄弟选择器

.active~p{ background: yellow; }:active后所有兄弟p元素为黄色，本身不变

4.2结构伪类选择器

在这里插入图片描述

li:first-child（ul下第一个元素是li）

li:first-child{
	color:red;
}
<ul>
     <li>163/126/yeah三大免费邮箱均默认开放</li>
     <li>全面支持iPhone/iPad及Android等系统</li>
     <li>客户端、手机与网页，实现发送、阅读邮件</li>
</ul>

li:first-of-type（ul下第一个类型是li的元素）

li:first-of-type{
	color:red;
}
<ul>
	 <a>jddodfj</a>
     <li>163/126/yeah三大免费邮箱均默认开放</li>
     <li>全面支持iPhone/iPad及Android等系统</li>
     <li>客户端、手机与网页，实现发送、阅读邮件</li>
</ul>

4.3属性选择器

在这里插入图片描述

a[id]（含有id属性的a元素）
```
a[id] { background: yellow; }
```
a[id=first]（a元素中有“id=first”相同的属性）
```
a[id=first] { background: red; }
```
a[class*=links]（class 属性中属性值包含links）
```
a[class*=links] { background: red; }
```
a[href^=http]（href属性值中以http开头的）
```
 a[href^=http] { background: red; }
```
a[href$=png]（href属性值中以png结尾的）
```
 a[href$=png] { background: red; }
```

森屿Serien

关注

16
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
第四章初识CSS3

导入外部链接表(使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中)a[class*=links]（class 属性中属性值包含links）a[id=first]（a元素中有“id=first”相同的属性）li:first-of-type（ul下第一个类型是li的元素）a[href^=http]（href属性值中以http开头的）a[href$=png]（href属性值中以png结尾的）标签选择器（直接应用于HTML标签）a[id]（含有id属性的a元素）
复制链接

扫一扫