HTML----CSS3

LouieA

于 2023-04-06 21:04:34 发布

阅读量107

点赞数

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

本文链接：https://blog.csdn.net/xry12354/article/details/129999076

版权

HTML 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML----CSS3

什么是CSS?

CSS的概念

Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言

2.1. 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS在网页中的应用

CSS应用

CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS,有利于网页被搜索引擎收录

CSS的基本语法

CSS基本语法结构

选择器{
    声明1；
    声明2；
	...
}

示例

h1{
	font-size:12px;
	color:#f00;
}

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

style标签

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

HTML中引入CSS样式

行内样式

使用style属性引入CSS样式

语法

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

内部样式表

CSS代码写在<head>的<style>标签中，当然也可以写在<head>和<body>之间。

语法

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

优点

方便再同一页面中修改样式。

缺点

不利于再多页面间共享服用代码及维护，对内容与样式的分离也不够彻底。

外部样式表

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式

2.1. 链接式

2.2. 导入式

链接外部样式表

语法

<head>/(</head>...)
    ...
    <link rel = "stylesheet" href = ".css文件的路径" type = "text|css"/>
    ...
</head>/(<body>...)

导入外部样式表

语法

<head>/(</head>...)
    ...
	<style type = "text|css">
		@import url(".css文件路径")
	</style>
</head>/(<body>...)

链接式与导入式的区别

<link/>标签属于XHTML, @import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页中再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的。

CSS样式优先级

行内样式>内部样式表>外部样式表，即遵循就近原则。

CSS3基本选择器

标签选择器

HTML标签作为标签选择器的名称。

语法

p{
	font-size:16px;
}

类选择器

在语句中加入 class标签。

语法

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

#示例
<p class = "listLeft">
    内容...
</p>

.listLeft{
	font-size:16px;
}

ID选择器

在语句中加入id标签。

语法

<标签名 id = "id名称">标签内容</标签名>

#示例
<p id = "listLeft">
    内容...
</p>

#listLeft{
	font-size:16px;
}

各选择器的特性

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器的优先级

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

注意

不遵循"就近原则"，无论是哪种方式引入CSS样式，一般都遵循ID选择器>class类选择器>标签选择器的优先级。

CSS的高级选择器

层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

在这里插入图片描述

后代选择器

语法

body p{
	background:red;
}

在这里插入图片描述

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

子选择器

语法

body>p{
	background:pink;
}

在这里插入图片描述

相邻兄弟选择器

语法

.active+p{
	background:green;
}

在这里插入图片描述

通用兄弟选择器

语法

.active~p{
	background:yellow;
}

在这里插入图片描述

结构伪类选择器

选择器	功能描述
E:first-child	作为父类元素的第一个子元素的元素E
E:last-child	作为父类元素的最后一个元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F,（n可以是1，2，3…)关键字为even、odd
E:first-of-type	选择父类元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

示例

在这里插入图片描述

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

在这里插入图片描述

如何使用E F:nth-child(n)和E F:nth-of-type(n)?

E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

属性选择器	功能描述
E[attr]	选择具有属性attr的E元素
E[attr = val]	选择匹配具有属性attr的E元素，并且属性值为val（val区分大小写)
E[attr ^= val]	选择匹配元素E,且E元素定义了属性attr，其属性val开头的任意字符串
E[attr $= val]	选择匹配元素E，且E元素定义属性attr，其属性val结尾的任意字符串
E[attr * = val]	选择匹配元素E,且E元素定义了属性attr，其属性值包含了“val"，换句话来说，字符串val与属性值中的任意位置相匹配