17.CSS概念和语法

SS（层叠样式表）是一种用于描述HTML或XML（包括各种XML方言，如SVG或XHTML）文档的视觉表现的样式语言。CSS描述了元素应该如何在屏幕、纸张、语音或其他媒体上显示。本文将深入探讨CSS的核心概念和语法，为初学者和有经验的开发者提供一个参考。

选择器

选择器是CSS中的基础概念，它们用于指定我们想要样式化的HTML元素。

元素选择器

p {
  color: black;
}

类选择器

.error {
  color: red;
}

ID选择器

#unique-element {
  color: blue;
}

属性选择器

input[type="text"] {
  background-color: #f0f0f0;
}

伪类选择器

a:hover {
  text-decoration: underline;
}

组合器

组合器描述了不同选择器之间的关系。

后代组合器

article p {
  line-height: 1.6;
}

子元素组合器

ul > li {
  list-style-type: square;
}

相邻兄弟组合器

h2 + p {
  margin-top: 0;
}

通用兄弟组合器

h2 ~ p {
  color: #333;
}

伪元素

伪元素用于样式化元素的特定部分。

p::first-line {
  font-weight: bold;
}

属性和值

CSS属性定义了如何对元素进行样式化，而值则指定了属性的外观或行为。

尺寸

width: 100px;
height: 50vh; /* 视口高度的50% */

颜色

background-color: #ff0000;
color: rgb(0, 255, 0);
border-color: rgba(0, 0, 255, 0.5);

文本

font-family: 'Arial', sans-serif;
text-align: center;
text-decoration: underline;

边距和填充

margin: 10px 5px;
padding: 20px;

边框

border-style: solid;
border-width: 1px;
border-color: #000;

CSS布局

Flexbox

.container {
  display: flex;
  justify-content: space-between;
}

Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

定位

.absolute-element {
  position: absolute;
  top: 10px;
  right: 10px;
}

响应式设计

使用媒体查询可以创建响应不同屏幕尺寸的样式。

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

结论

CSS是一个强大的样式语言，它使得开发者能够创建精美、响应式的网页。通过理解并掌握CSS的选择器、属性、布局等核心概念和语法，前端工程师可以有效地设计和实现用户界面。随着CSS3和后续版本的不断发展，CSS的能力也在不断增强，为前端开发带来了更多的可能性。

、初识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 字（可选）

TML语言，即超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。它通过使用标记（tag）来描述网页的结构和呈现方式，并且可以嵌入其他类型的内容，如图像、音频、视频等。

HTML语言是构建万维网的基石之一，它定义了网页的结构和布局。使用HTML语言，我们可以创建标题、段落、列表、链接、表格等各种元素，来展示和组织网页的内容。

在HTML中，标记以尖括号（< >）表示，一般成对出现，包围着要标记的内容。例如，要创建一个标题，我们可以使用<h1>标签将标题内容包裹起来，如下所示：

<h1>这是一个标题</h1>

除了基本的结构标记外，HTML还提供了许多其他的标记来增强网页的功能和样式。比如，我们可以使用<a>标签来创建链接，<img>标签来插入图像，<audio>和<video>标签来嵌入音频和视频等。同时，HTML也支持CSS（层叠样式表）来对网页进行样式化和布局。

使用HTML语言，我们可以轻松创建一个网页，并将其发布到互联网上。只需编写HTML代码，保存为一个以.html为后缀的文件，然后通过浏览器打开该文件，即可查看网页的效果。

HTML语言的简单易学使其成为许多人入门网页开发的首选。无论是个人网站、企业官网还是电子商务平台，HTML都是构建网页的基础。

总之，HTML语言是一种用于创建网页的标准标记语言，通过标记来描述网页的结构和呈现方式。它是构建万维网的基石，简单易学，适用于各种类型的网页开发。无论你是初学者还是专业开发人员，掌握HTML语言都是非常重要的。

在线咨询

上一篇：JavaScript中数组的克隆
下一篇：数据分析逻辑：流量转化漏斗模型详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

17.CSS概念和语法

选择器

元素选择器

类选择器

ID选择器

属性选择器

伪类选择器

组合器

后代组合器

子元素组合器

相邻兄弟组合器

通用兄弟组合器

伪元素

属性和值

尺寸

颜色

文本

边距和填充

边框

CSS布局

Flexbox

Grid

定位

响应式设计

结论

、初识CSS3

1.1、什么是CSS

1.2、CSS的发展史

1.3、CSS的基本语法

1.4、引入CSS方式

1.5、CSS基本选择器

1.6、CSS高级选择器

1、层次选择器

您的项目需求