第四章初识CSS3

最新推荐文章于 2024-02-04 09:46:40 发布

Tuerlechat，

最新推荐文章于 2024-02-04 09:46:40 发布

阅读量145

点赞数

分类专栏： # HTML+CSS3 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_55452293/article/details/126254105

版权

HTML+CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第四章初识CSS3

CSS的概念

Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言。包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的优势

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

CSS基本语法结构

<!-- 
	选择器{ 声明1；
    	   声明2；
   		   ... } -->
h1{
    font-size:12px;
    color:#F00;
}

font-size : 属性
12px : 值
font-size:12px; : 声明

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标签中

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

优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

外部样式表

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

链接外部样式表

<head>
    <link href="xxx.css" rel="stylesheet" type="text/css"/>
    <!-- 
		rel=“stylesheet"：使用外部样式表
	-->
</head>

导入外部样式表

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

链接式与导入式的区别

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

css样式优先级

行内样式>内部样式表>外部样式表
就近原则

CSS3基本选择器

标签选择器

标签名 {font-size:16px;}

类选择器

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

/* 另一种类选择器(类选择器的升级版) */
.第一个类名 .第二个类名 .第三个类名...{font-size:16px;}
<标签名 class="第一个类名称 第二个类名称 第三个类名称...">标签内容</标签名>

ID选择器

#id名 {font-size:16px;}
<标签名 id="id名">标签内容</标签名>

全局选择器

* {font-size:16px;}
/* 全局选择器对整个页面全部生效 */

小结

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
全局选择器对整个页面全部生效

基本选择器的优先级

ID选择器>类选择器>标签选择器>全局选择器（无论是哪种方式引入CSS样式）

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后代全部生效
注意：后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

子选择器

body>p {background:pink;}

只有body本身包含的亲儿子p才会生效（包含在下级，下下级等的p都不会生效)

相邻兄弟选择器

h1+p {background:green;}

只有当h1与p相邻（单个）的p才会生效

通用兄弟选择器

h1~p {background:yellow;}

当h1后的所有p全部生效 (不用必须相邻)

结构伪类选择器

选择器	功能描述
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元素

小结

使用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与属性值中的任意位置相匹配