2025-07-03 CSS基础知识指南:从零到一打造你的网页样式 CSS基础知识指南:从零到一打造你的网页样式 1. CSS简介与引入方式CSS是一种用于控制网页布局和设计的语言,它使得网页的表现与结构分离,提高了网页的可维护性和可访问性。CSS可以通过三种方式引入到HTML中:内联样式(直接在元素中使用style属性)、内部样式表(在HTML文档的<head>部分使用<style>标签)、外部样式表(通过<link>标签链接到一个外部的.css文件)。2. 选择器与属性 选择器:用于指定要应用样式的HTML元素。常见选择器包括元素选择器(如p)、类选择器(.className)、ID选择器(#idName)和属性选择器([type="text"])等。 属性与值:CSS规则由选择器和一对大括号组成,大括号内定义了一系列属性和对应的值,如color: red;将文本颜色设置为红色。 3. 盒模型与布局CSS盒模型是Web页面布局的基础,每个元素被视作一个盒子,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型对于掌握网页布局至关重要。 布局技术:包括传统的盒模型布局、Flexbox(弹性盒子模型... 2025年07月03日 26 阅读 0 评论
2020-08-16 CSS选择器 CSS选择器 选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 元素。1element,elementdiv,p选择所有 元素和所有 元素。1element elementdiv p选择 元素内部的所有 元素。1element>elementdiv>p选择父元素为 元素的所有 元素。2element+elementdiv+p选择紧接在 元素之后的所有 元素。2[attribute][target]选择带有 target 属性所有元素。2[attribute=value][target=_blank]选择 target="_blank" 的所有元素。2[attribute~=value][title~=flower]选择 title 属性包含单词 "flower" 的所有元素。2:linka:link选择所有未被访问的链接。1:visiteda:visited选择所有已被访问的链接。1:activea... 2020年08月16日 786 阅读 0 评论
2020-08-16 jQuery选择器 jQuery选择器 选择器实例选取*$("*")所有元素#id$("#lastname")id="lastname" 的元素.class$(".intro")所有 class="intro" 的元素element$("p")所有 元素.class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素 :first$("p:first")第一个 元素:last$("p:last")最后一个 元素:even$("tr:even")所有偶数 元素:odd$("tr:odd")所有奇数 元素 :eq(index)$("ul li:eq(3)")列表中的第四个元素(index 从 0 开始):gt(no)$("ul li:gt(3)")列出 index 大于 3 的元素:lt(no)$("ul li:lt(3)")列出 index 小于 3 的元素:not(selector)$("input:not(:empty)")所有不为空的 input 元素|:header | $(":header")| 所有标题元素 - |... 2020年08月16日 865 阅读 0 评论