CSS入门教程：选择器、样式规则与实践应用

需积分: 10 54 浏览量更新于2024-09-10 收藏 2KB TXT 举报

"移动开发初学者的CSS笔记，涵盖了CSS的基本概念、样式应用方式、选择器类型、伪类选择器、盒模型以及布局方式等内容。" 在Web开发中，CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它使得我们能够将内容与表现分离，使页面设计更为灵活且易于维护。 1. CSS基本概念 CSS允许开发者控制网页元素的样式，如颜色、字体大小、布局等。通过CSS，我们可以改变HTML元素的视觉呈现，而无需改动HTML结构本身。 2. CSS样式应用方式 - 内联样式：通过在HTML元素内添加`style`属性，如`<h1 style="color:red; font-size:111px">`，直接定义该元素的样式。 - 内部样式表：在HTML文档的`<head>`部分定义一个`<style>`标签，将CSS规则写入其中，如`h1{color:green; font-size:99px}`。 - 外部样式表：通过`<link>`标签引入外部的CSS文件，例如`<link href="shulan.css" rel="stylesheet" type="text/css">`，这样可以实现样式复用。 3. CSS选择器 - 类选择器：`.a{}`，选择所有class为"a"的元素。 - 标签选择器：`h2{}`，选择所有的"h2"元素。 - ID选择器：`#a{}`，选择ID为"a"的唯一元素。 - 多个选择器组合：`h1, h2{}`，选择所有的"h1"和"h2"元素。 - 通配符选择器：`*{}`，选择所有元素。 - 属性选择器：`[attribute=value]{}`，选择具有特定属性值的元素。 4. CSS伪类选择器 - `:link`：未被访问的链接样式。 - `:hover`：鼠标悬停时的链接样式。 - `:active`：被点击时的链接样式。 - `:visited`：已被访问过的链接样式。 5. CSS盒模型 CSS盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。例如，`padding:60px`表示元素内部的填充为60像素，`margin:60px`表示元素周围的距离为60像素。 6. 布局方式 CSS提供了多种布局方式，如传统的流式布局、浮动布局、定位布局，以及现代CSS中的Flexbox和Grid布局，它们分别适用于不同类型的布局需求。 7. 位置与尺寸 - `width`和`height`设置元素的宽度和高度。 - `display`属性用于控制元素的显示方式，例如设置为`block`、`inline`或`flex`。总结来说，CSS是Web开发中不可或缺的一部分，它让网页设计变得丰富多彩。通过理解并熟练运用CSS，开发者可以创建出具有专业外观和功能的网页。对于移动开发初学者而言，掌握CSS的基础知识是迈向成功的第一步。

树懒学习笔记
day02.1_CSS
1.CSS简介
CSS是层叠样式表是给HTML网页添加美化的成份，
例如：背景，字体大小，等等
2.CSS的三种引入方式
2.1行内样式：
<h1 style="color:red;front-size:111px">
CSS必须嵌入到HTML中，方可显示其效果
</h1>
2.2内部样式
<head>
h1{
color:green;
font-size:99px
}
</head>
2.3外部样式(推荐)
<link href="shulan.css"
style="text/css"
rel="stylesheet">
优先级问题？
注意：
后加载的会覆盖前者
行内样式 > 内部样式 > 外部样式就近原则
3.CSS选择器
3.1_标签选择器 h2{ }

3.2_类选择器 .a { } <h2 class=“a”>
// 不能是数字，提倡

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

咔咔部里

粉丝: 0
资源: 35

CSS入门教程：选择器、样式规则与实践应用

树懒_day03_javascript高级笔记

树懒_day02.2_Javascript基础笔记

el-tree树懒加载完整代码

el-tree树懒加载嵌套el-tree

elementui-plus table树懒加载 判断有子级数据

多元非线性回归python

el-cascader动态加载数据 isLeaf

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

protoc java out_protoc 命令参数

sql server是干嘛的

最新资源

elementui-plus table树懒加载判断有子级数据