CSS入门教程：选择器、样式引入与字体样式

CSS入门

web

177 浏览量更新于2024-08-28 收藏 145KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"web前端基础——CSS入门" CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它能让你控制网页的布局，包括颜色、字体、布局和其他视觉效果。在本文中，我们将探讨CSS的基础知识，主要涉及CSS的引入方式、选择器以及字体样式。 1. CSS的引入方式 - 内部样式：将CSS代码写入HTML文档的`<head>`部分的`<style>`标签内，这种方式使得整个页面共享相同的样式规则。 - 内联样式：直接在HTML元素的`style`属性中编写CSS，这种方式优先级最高，但不推荐大量使用，因为会降低代码的可维护性。 - 外部样式表：创建一个独立的CSS文件，然后在HTML中通过`<link>`标签引用，这种方式有利于代码的组织和复用。 2. CSS选择器 - ID选择器：使用`#`标识，如`#para1`，每个ID在一个文档中只能出现一次，用于唯一地选择元素。 - 类选择器：使用`.`标识，如`.center`，可以选择具有特定类的任何元素，同一个类可以应用于多个元素。 - 通配符选择器：`*`，匹配所有元素，常用于全局样式初始化，例如设置所有元素的外边距和内边距为0。 - 链接伪类选择器：`:link`、`:visited`、`:hover`、`:active`，分别对应链接的不同状态。 - 结构（位置）伪类选择器：`:first-child`、`:last-child`、`:nth-child(n)`、`:nth-last-child(n)`，根据元素在兄弟元素中的位置选择元素。 - 目标伪类选择器：`:target`，选择当前被激活的锚点元素。 3. 字体样式 - `font-size`：设置字体的大小，可以使用像素（px）、em（相对于父元素字体大小）等单位。 - `font-family`：定义字体，可以列出多个字体，浏览器会按顺序尝试应用，直到找到可用的字体。 - CSS Unicode 字体：对于非标准或特殊字符，可以使用Unicode编码指定特定字体。这只是CSS入门的一部分，学习CSS还需要掌握盒模型、布局（如流式布局、网格布局、Flexbox和Grid）、响应式设计、动画和过渡等概念。随着对CSS的深入理解，你可以创造出更美观、更具交互性的网页。

资源详情

资源推荐

web前端基础前端基础——CSS入门入门

1.css的引入方式的引入方式

内部样式：内部样式：

直接在style里面写

内联样式：内联样式：

外部样式表外部样式表

2.css选择器选择器

id选择器：选择器： #id名名{}

Hello World!

#para1

{

text-align:center;

color:red;

}

属性不要以数字开头，数字开头的

在

Mozilla/Firefox

浏览器中不起作用。

class选择器选择器 .class名名{}

这个标题不受影响这个标题不受影响

这个段落居中对齐。

p.center

{

text-align:center;

}

类名的第一个字符不能使用数字！它无法在

Mozilla

或

Firefox

中起作用。

通配符选择器：通配符选择器：*{}

*会匹配所有的元素，因此针对所有元素的设置可以使用 * 来完成，用的最多的例子如下:

*{margin:0px; padding:0px;}

这里是设置所有元素的外边距margin和内边距padding都为0。

链接伪类选择器：链接伪类选择器：

:link 未访问的链接

:visited 已访问的链接

:hover 鼠标移动时链接

:active 选定的链接

在定义这些状态时，有一个顺序

l v h a

下载后可阅读完整内容，剩余6页未读，立即下载

weixin_38705873

粉丝: 7
资源: 926

CSS入门教程：选择器、样式引入与字体样式

《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

Web前端开发技术——HTML、CSS、JavaScript

Web-前端html+css从入门到精通 230. PostCSS插件使用（下）.zip

Web前端开发技术——HTML,CSS,JavaScript 答案

web前端开发零基础入门

vscode:Web前端——登录、注册界面

web前端怎么设置css

web前端jsp js css

web前端div css布局作业

web前端开发css

web前端基础学习

web前端 html css网页设计

web前端 用HTML css js做一个网页设计

vscode:Web前端——登录、注册界面代码

web前端设计基础叮叮书店

web前端开发基础知识

web前端基础练习题

web前端 HTML css js网页设计

Web前端 页面功能——点击按钮返回顶部的实现方法

最新资源

web前端用HTML css js做一个网页设计

Web前端页面功能——点击按钮返回顶部的实现方法