探索CSS的奥秘

发表时间: 2024-03-14 18:49

1、初识CSS3

本章目标：

会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式
会使用CSS3的基本选择器设置字体大小和颜色
会使用复合选择器为特定的网页元素添加CSS样式
会使用CSS3高级选择器为网页元素添加CSS样式

1.1、什么是CSS

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

在这里插入图片描述

说明：

首先介绍什么是CSS
然后对比讲解使用CSS和没有使用CSS的两个相同的HTML代码页面显示效果，说明CSS的重要性
最后根据图说明CSS在网页中的应用

1.2、CSS的发展史

在这里插入图片描述

CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；

CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离

CSS2.1 融入了更多高级的用法，如浮动，定位等。

CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。

由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势，因此本书会讲解最新的CSS3版本

本课程中主要讲解css2.1和css3

CSS的优势

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

1.3、CSS的基本语法

首先讲解CSS的基本语法结构，由选择器和声明构成
然后对照具体的样式详细讲解语法，强调声明必须在 { } 中
最后说明基本W3C的规范，每条声明后的 ; 都要写上

在这里插入图片描述

Style标签

讲解CSS样式如何在HTML中应用，引入style标签的应用
讲解style标签，说明type=“text/css的用法
说明style标签在HTML文档中的位置，在与之间

在这里插入图片描述

1.4、引入CSS方式

行内样式使用style属性引入CSS样式 <h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p> 使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。
内部样式表 CSS代码写在 <head> 的 <style> 标签中 <style> h1{color: green; } </style> 优点：方便在同页面中修改样式缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底引出外部样式表
外部样式表 CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式
链接式（使用的最多,记住这个就可以了）使用标签链接外部样式表，并讲解各参数的含义，标签必须放在标签中

在这里插入图片描述

导入式使用@import导入外部样式表

在这里插入图片描述

链接式与导入式的区别

标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。
使用链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也一样的效果。
使用@import导入的CSS文件，客户端在浏览网页时是先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当然最终的效果也与使用链接文件效果一样，只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉。这个也是现在目前大多少网站采用链接外部样式表的主要原因。
由于@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说就是无效的。

CSS样式优先级

行内样式>内部样式表>外部样式表就近原则：越接近标签的样式优先级越高

【学员练习】使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14p

在这里插入图片描述

1.5、CSS基本选择器

标签选择器 HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img/>

在这里插入图片描述

类选择器一些特殊的实现效果，单纯使用标签选择器不能实现，从而引出类选择器

在这里插入图片描述

ID选择器 ID选择器的名称就是HTML中标签的ID名称，ID全局唯一

在这里插入图片描述

小结

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

基本选择器的优先级

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

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

1.6、CSS高级选择器

1、层次选择器

在这里插入图片描述

后代选择器 body p{ background: red; }

在这里插入图片描述

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

子选择器 body>p{ background: pink; }

在这里插入图片描述

相邻兄弟选择器 .active+p { background: green; }

在这里插入图片描述

通用兄弟选择器 .active~p{ background: yellow; }

添加图片注释，不超过 140 字（可选）

2、结构伪类选择器

在这里插入图片描述

<html><head lang="en">    <meta charset="UTF-8">    <title>使用CSS3结构伪类选择器</title></head><body>    <p>p1</p>    <p>p2</p>    <p>p3</p>    <ul>        <li>li1</li>        <li>li2</li>        <li>li3</li>    </ul></body></html>

标红的重点强调下，其他的可以略讲

在这里插入图片描述

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)在父级里先看类型，再看位置

3、属性选择器

在这里插入图片描述

E[attr]属性选择器

a[id] {    background: yellow;}

在这里插入图片描述

E[attr=val]属性选择器

a[id=first] {    background: red;}

在这里插入图片描述

E[attr*=val]属性选择器

a[class*=links] {    background: red;}

在这里插入图片描述

E[attr^=val]属性选择器

a[href^=http] {    background: red;}

在这里插入图片描述

E[attr$=val]属性选择器

a[href$=png] {    background: red;}

在这里插入图片描述

1.7、小结

添加图片注释，不超过 140 字（可选）

探索CSS的奥秘

1、初识CSS3

1.1、什么是CSS

1.2、CSS的发展史

1.3、CSS的基本语法

1.4、引入CSS方式

1.5、CSS基本选择器

1.6、CSS高级选择器

1、层次选择器

2、结构伪类选择器

3、属性选择器

1.7、小结

热门阅读

推荐阅读