CSS学习笔记(前台页面)

合集下载

CSS超全笔记（适合新手入门）

CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。

引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。

type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。

⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。

是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。

其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。

外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。

css相关笔记

以下是一份关于CSS的笔记，涵盖了基础概念、属性和布局技巧等方面：一、基础概念CSS是层叠式样式表的简称，也称为级联样式表或样式表。

它主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。

CSS文件的后缀是.css，通常在HTML文档中嵌入或链接到外部CSS文件。

CSS不区分大小写，建议小写。

CSS具有层叠性，一个元素可以设置多个样式。

当样式冲突时，优先级高的样式生效；优先级相同时，写在后面的样式生效。

二、CSS属性和布局技巧文本样式：可以使用CSS设置文本的颜色、字体、大小、对齐方式等。

例如，color属性用于设置文本颜色，font-family属性用于设置字体，font-size属性用于设置字体大小，text-align属性用于设置文本对齐方式。

图片样式：可以使用CSS设置图片的宽度、高度、边框、边距等。

例如，width和height属性用于设置图片宽度和高度，border属性用于设置图片边框，margin和padding属性用于设置图片边距。

布局技巧：CSS提供了多种布局技巧，如浮动布局、定位布局、弹性布局等。

其中，浮动布局是最常用的布局方式之一，通过float属性可以让元素左右浮动；定位布局通过position属性可以实现元素的定位；弹性布局则是一种更灵活的布局方式，通过flexbox或grid属性可以实现元素的灵活布局。

三、CSS选择器CSS选择器是用于选择HTML元素的一种语法。

常用的选择器有元素选择器、类选择器、ID选择器等。

例如，p选择器可以选择所有的段落元素，.myClass选择器可以选择所有类名为myClass的元素，#myID选择器可以选择ID为myID的元素。

四、CSS的引入方式内联样式：在HTML标签内使用style属性直接定义CSS代码。

这种方式的优点是方便快捷，但只对当前元素生效。

内部样式表：在HTML文档的<head>部分使用<style>标签定义CSS代码。

思源笔记css

思源笔记css
CSS（层叠样式表）是一种用于描述HTML或XML（包括如SVG，MathML等衍生技术）文档样式的计算机语言。

思源笔记使用CSS来定义其界面和主题的样式。

思源笔记的CSS基础选择器包括标签选择器、类选择器、多类名选择器和ID选择器。

这些选择器可以用来选择和修改不同的元素。

字体属性也是CSS的重要部分，包括字体系列、字体大小、字体粗细和字体倾斜等。

这些属性可以用来控制文本的外观。

如果你想修改思源笔记的CSS，需要遵循一定的步骤。

首先，你需要打开思源笔记的开发者工具，然后选中你想修改的元素。

接着，你可以在CSS文件中修改对应的样式。

最后，保存CSS文件并查看修改是否生效。

需要注意的是，修改CSS可能会影响思源笔记的界面和主题，因此请谨慎操作。

如果你对CSS不太熟悉，建议先学习一些基础的CSS知识后再进行修改。

前端css知识笔记

前端css知识笔记前端CSS知识笔记。

CSS（层叠样式表）是前端开发中的一项重要技术，用于控制网页的样式和布局。

下面是一份关于前端CSS知识的笔记，涵盖了常用的CSS属性和技巧。

一、CSS选择器。

1. 标签选择器，选择指定标签的元素，例如p、div、h1等。

2. 类选择器，选择具有相同类名的元素，以"."开头，例如.class。

3. ID选择器，选择具有相同ID的元素，以"#"开头，例如#id。

4. 属性选择器，选择具有指定属性的元素，例如[type="text"]。

5. 伪类选择器，选择具有特定状态的元素，例如:hover、:active等。

6. 伪元素选择器，选择元素的特定部分，例如::before、::after等。

二、CSS盒模型。

1. 内容区域（content），元素的实际内容。

2. 内边距（padding），内容区域与边框之间的空间。

3. 边框（border），内边距与外边距之间的边框线。

4. 外边距（margin），边框与相邻元素之间的空间。

三、CSS布局。

1. 相对定位（relative），相对于元素原本位置进行定位，不影响其他元素的位置。

2. 绝对定位（absolute），相对于最近的已定位父元素进行定位，若无则相对于文档进行定位。

3. 固定定位（fixed），相对于浏览器窗口进行定位，元素固定在页面上的位置不变。

4. 浮动（float），使元素脱离文档流，可以实现多列布局。

5. 弹性布局（flexbox），通过设置容器和项目的属性，实现灵活的布局效果。

四、常用CSS属性。

1. 字体属性，font-family、font-size、font-weight等。

2. 文本属性，color、text-align、text-decoration等。

3. 背景属性，background-color、background-image、background-size等。

前端学习计划（必备6篇）

前端学习计划（必备6篇）还不确定如何寻找优秀的范文？学术研究中文档处理是必须的基本技能之一，参考范文的写作方法，能帮助我们快速完成任务。

借鉴范文的整体构思非常之重要，找到了有关“前端学习计划”的好东西让我们一起看一看，希望您能把这篇文章收藏起来以便日后查看！前端学习计划篇1前端学习计划随着互联网的快速发展，前端开发技术也不断地与时俱进。

在这样的背景下，想成为一名优秀的前端开发工程师，必须不断地学习和更新自己的知识技能，掌握相关的编程语言和开发框架。

为此，制定一份适合自己的前端学习计划是非常必要的。

一、基本知识学习在学习前端之前，需要先掌握一些基本知识，比如HTML、CSS 和JavaScript。

这些知识是前端技术的基础。

HTML负责页面的结构和内容的展示，CSS负责页面的样式和布局，JavaScript负责页面的交互和动态效果。

学习这些基本知识后，可以通过一些小项目来进行练习和巩固。

二、框架学习学习了基本知识之后，可以开始学习一些前端开发框架，比如Bootstrap、Vue和React等。

Bootstrap是一个流行的前端开源框架，它可以帮助开发人员快速地构建各种网站和应用程序。

Vue是一个渐进式框架，它具有高效、灵活、易用的特点，是近年来前端开发中使用广泛的框架之一。

React是另一个常用的前端开发框架，它可以构建快速、丰富和交互性强的Web应用程序。

学习这些框架可以提高开发效率，快速开发出符合市场需求的应用程序。

三、项目实战学习框架之后，需要进行一些项目实战。

通过实现一些真实的案例，可以更好地掌握框架的应用和相关技术。

项目实战可以帮助开发人员更好地理解开发需求，寻找最佳的解决方案，也可以培养解决问题的能力。

常见的项目实战有电商网站、音乐播放器、社交应用等。

四、持续学习、总结和分享前端开发技术每天都在不断地更新和变化，因此需要持续地学习和掌握新的技术和知识。

学习新知识的过程中，还要不断总结和分享给其他人，以便大家共同进步。

Bootstrap的使用手册及学习笔记

Bootstrap的使用手册及学习笔记Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。

关于Bootstrap的介绍和下载，大家可以去搜索查看。

Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。

因此这一文档类型必须出现在项目的每个页面的开始部分：<!DOCTYPE html>2 <html lang="en">3 ...4 </html>HTML中定义的所有标题标签, 从<h1> 到 <h6> 都是可用的。

Bootstrap定义的全局font-size 是 14px，line-height 是 20px。

这些样式应用到了 <body> 和所有的段落上。

另外，对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。

在使用Bootstrap之前必须要将bootstrap.css或者bootstrap.min.css（压缩版）引入到页面中，它定义了Bootstrap的基本样式。

如果需要使用Bootstrap提供的组件，要将bootstrap.js或者bootstrap.min.js（压缩版）引入到页面中。

因为bootstrap的JS插件需要Jquery的支持，所有在引入bootstrap.js之前必须将Jquery.js也引入到页面上。

另外如果你希望你的页面支持响应式布局，必须引入bootstrap-responsive.css或者bootstrap-responsive.min.css（压缩版），它主要提供页面在移动设备上的显示样式支持，需要注意的是bootstrap-responsive.css必须放置在bootstrap.css之后，否则便不具有响应式布局功能。

当然在Bootstrap3的版本中，bootstrap.css和bootstrap-responsive.css已经合并了。

css知识点

css知识点CSS（层叠样式表）是一种用于设计网页外观的标记语言。

它是网页开发者常用的一项技能，掌握了CSS知识，我们可以更好地控制网页的布局和样式。

在本文中，我将介绍一些重要的CSS知识点，帮助大家更好地理解和运用这项技术。

盒模型是CSS中的一个重要概念。

每个HTML元素都可以被看作一个矩形的盒子，这个盒子由内容、内边距、边框和外边距组成。

内容是元素中实际显示的部分，内边距是内容和边框之间的空间，边框是包围内容和内边距的线条，外边距则是盒子与其他元素之间的距离。

理解盒模型有助于我们更好地进行布局和样式的控制。

定位是CSS中常用的一种布局技术。

有三种常见的定位方式：静态定位、相对定位和绝对定位。

静态定位是元素的默认定位方式，元素按照正常的文档流进行排列。

相对定位允许我们通过top、bottom、left、right属性来调整元素的位置，相对于它在文档流中的原始位置。

绝对定位则是相对于最近的已定位祖先元素进行定位，或者相对于整个页面进行定位。

通过这些定位方式，我们可以更灵活地控制元素的布局。

选择器是CSS中用于选择要样式化的元素的方式。

有多种选择器可供选择，每个选择器都有不同的用途。

常见的选择器有标签选择器、类选择器、ID选择器和层级选择器等。

标签选择器通过选择HTML元素标签来选中元素，类选择器通过选择元素的class属性来选中元素，ID选择器则是通过选择元素的id属性来选中元素。

层级选择器允许我们通过元素之间的父子关系来选择元素。

选择器的使用让我们可以有针对性地为元素添加样式。

CSS还提供了丰富的样式属性，可以用来调整元素的外观。

例如，我们可以使用背景属性来设置元素的背景色或者背景图片。

我们可以使用字体属性来设置元素的字体样式，包括字体种类、字号和字重等。

边框属性则可以用来设置元素的边框样式，包括边框的宽度、样式和颜色等。

通过这些样式属性的组合和调整，我们可以创建出各种各样的视觉效果。

除了上述的知识点外，CSS还有许多其他的特性和技巧。

amazeui学习笔记--css（常用组件6）--图标Icon

amazeui学习笔记--css（常⽤组件6）--图标Icon amazeui学习笔记--css（常⽤组件6）--图标Icon ⼀、总结1、关注⽤法即可：在 HTML 上添加添加am-icon-{图标名称} class。

<span class="am-icon-weixin"> Wechat</span>2、图标⼤⼩：.am-icon-sm，放⼤ 150%.am-icon-md，放⼤ 200%.am-icon-lg，放⼤ 250%3、icon button：在 Icon 上添加.am-icon-btn class。

<a href="##" class="am-icon-btn am-icon-twitter"></a>4、旋转动画：注意：Chrome 和 Firefox 下，display: inline-block;或display: block;的元素才会应⽤旋转动画。

<i class="am-icon-spinner am-icon-spin"></i>5、固定宽度（⾮常有⽤）：FontAwesome 在绘制图标的时候不同图标宽度有差异，添加.am-icon-fw将图标设置为固定的宽度，解决宽度不⼀致问题（v2.3 新增）。

<li><i class="am-icon-qq am-icon-fw"></i> QQ</li>6、图标不⽀持的情况可以直接写编码形式：<span> What a fuck.</span>⼆、图标IconIcon⽬录Amaze UI Icon 组件⽬前使⽤了（Amaze UI 2.2.0 中升级⾄ 4.3.0），涵盖除部分国内社交⽹站图标以外的其他常见图标。

渡一教育前端笔记

渡一教育前端笔记一、前端开发概述前端开发是指网页制作的过程，是通过浏览器渲染HTML、CSS和JavaScript来实现页面效果和交互的技术。

在现代的Web开发中，前端开发扮演着至关重要的角色，其负责构建用户界面，设计交互效果，使网站/应用更加美观、友好、易用。

渡一教育前端笔记将系统地介绍前端开发的相关知识和技术，帮助学习者全面掌握前端开发的基本概念和实际操作技能。

二、HTML与CSS基础1. HTMLHTML（Hyper Text Markup Language）是一种用来描述文档结构的标记语言，用于构建网页的基础。

在渡一教育前端笔记中，学习者将学习HTML的基本语法和标签用法，掌握如何构建HTML文档、创建文本、图像、链接等基本元素，以及表单、表格、多媒体等内容的制作方法。

2. CSSCSS（Cascading Style Sheets）是一种用来描述文档样式的样式表语言，用于控制网页的布局和外观。

在渡一教育前端笔记中，学习者将学习CSS的基本语法和属性用法，了解如何为HTML文档添加样式、设置字体、颜色、背景、布局等样式，同时掌握响应式设计、动画效果等实用技巧。

三、JavaScript进阶JavaScript是一种用来向网页添加交互功能的脚本语言，具有动态性和灵活性，是前端开发中不可或缺的一部分。

在渡一教育前端笔记中，学习者将深入学习JavaScript的语法和特性，了解DOM操作、事件处理、Ajax异步请求、模块化开发、面向对象编程等高级技术，掌握如何通过JavaScript实现网页的交互效果和动态效果。

四、前端框架与工具在现代的前端开发中，前端框架和工具的使用变得越来越重要，能够帮助开发者更高效地构建复杂的前端应用。

在渡一教育前端笔记中，学习者将学习如何使用Vue、React等主流前端框架，了解Webpack、Babel等常用的构建工具和辅助工具的使用方法，同时掌握如何进行前端项目的工程化、模块化开发等实践技巧。

《网页设计与制作》笔记_学习笔记

《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。

这包括网页的整体外观、结构和交互功能。

网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。

一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。

重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。

2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。

3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。

4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。

考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。

当时网页主要是以文本为主，简单的超链接连接不同的信息。

css 总结

css 总结CSS是网页设计中不可或缺的基础技术之一，它实现了网页的布局、样式和交互效果等方面的功能。

对于前端开发人员来说，掌握CSS 的基本知识和技巧非常重要，下面就对CSS进行一些简单的总结。

一、基本语法CSS代码由选择器和声明块组成，选择器用于确定需要应用样式的元素，而声明块则包含一个或多个属性和对应的值。

例如：```h1 {color: red;font-size: 24px;}```上面的代码使用了h1选择器，表示应用样式到网页中所有的h1元素。

花括号内是声明块，其中color和font-size是两个属性，而red和24px则是对应属性的值。

二、选择器CSS中有各种各样的选择器，用于指定需要应用样式的元素。

下面列出一些常见的选择器：- 标签选择器：根据元素的标签名来选择元素，如div、p、h1等；- 类选择器：根据元素的class属性来选择元素，用“.”加类名表示，如.class；- ID选择器：根据元素的id属性来选择元素，用“#”加id名称表示，如#id；- 伪类选择器：可以根据元素的状态来选择元素，如:hover表示当鼠标放在元素上方时的状态；- 后代选择器：可以通过两个或多个选择器的组合来选择元素，如divp表示选择div元素下的所有p元素。

三、基本样式属性CSS中有众多的样式属性，下面列出一些常用的基本样式属性：- color：设置文字的颜色，可以使用颜色名称、16进制RGB值或RGB值；- font-size：设置文字大小，可以使用像素、em、rem单位等；- background：设置元素的背景，可以设置颜色或背景图片等；- border：设置元素的边框，可以设置边框颜色、粗细和样式等；- margin：设置元素的外边距，可以设置上下左右四个方向的外边距；- padding：设置元素的内边距，可以设置上下左右四个方向的内边距。

四、盒模型CSS中的盒模型指的是网页中的元素在样式效果下所占的空间范围。

css学习心得

css学习心得CSS学习心得。

在学习CSS的过程中，我深刻体会到了它在网页设计中的重要性和作用。

CSS（Cascading Style Sheets）是一种用来描述网页样式和布局的标记语言，它可以让我们轻松地控制网页的外观和排版，使得网页更加美观和易于阅读。

通过学习和实践，我对CSS有了更深入的了解，也积累了一些心得体会。

首先，我发现CSS的语法相对简单易懂。

与HTML相比，CSS的语法更加直观和灵活。

它由选择器、属性和值组成，通过选择器来选中HTML元素，然后为这些元素指定样式。

属性用来定义样式的具体内容，比如颜色、字体、大小等，而值则确定了属性的具体取值。

这种直观的语法使得我们能够快速地理解和掌握CSS的用法，也让网页设计变得更加简单和高效。

其次，我学会了如何使用CSS来实现网页布局。

通过CSS的盒模型和浮动等属性，我们可以轻松地控制网页元素的位置和大小，实现各种不同的布局效果。

我学会了如何使用浮动来实现多栏布局，如何使用定位来实现绝对定位布局，以及如何使用弹性盒子布局来实现响应式布局。

这些技能让我能够更加灵活地设计网页，满足不同设备和屏幕尺寸的需求，提升了用户体验和网页的可访问性。

另外，我也学会了如何使用CSS来美化网页。

通过CSS的各种属性和值，我们可以为网页添加背景、边框、阴影等效果，使得网页更加美观和吸引人。

我学会了如何使用字体属性来设置字体的样式和大小，如何使用颜色属性来设置文本和背景的颜色，以及如何使用过渡和动画来为网页添加动态效果。

这些技能让我能够设计出更加独特和个性化的网页，吸引用户的注意力，提升了网页的吸引力和用户体验。

最后，我发现CSS的层叠机制和选择器的灵活运用，让网页设计变得更加高效和便捷。

通过层叠机制，我们可以轻松地管理和组织各种样式，使得网页的样式更加清晰和易于维护。

而选择器的灵活运用，让我们能够精确地选中和控制各种HTML元素，实现更加精细和个性化的样式效果。

这些特性让我在实际的网页设计中能够更加高效地工作，提升了工作的效率和质量。

前端初期学习心得（HTML5+CSS3）

前端初期学习⼼得（HTML5+CSS3）随着前后端分离的概念⽇益深⼊⼈⼼，伴随着移动互联⽹时代的到来，HTML5应声⽽起，随之⽽来的是⼀⼤批开发者涌⼊了这个⾏业，学习H5。

⽹络上的资料五花⼋门，参差不齐，结合我个⼈情况，跟⼤家分享我的学习历程。

⼀开始是从极客学院上接触到H5的，从最开始的Hello Wrold到现在已经有⼤半年了，还记得第⼀次与计算机成功交流那⼀瞬间的激动⼈⼼！！从那时起，我就⼀头扎进了前端开发，从⼀个连C都不懂的菜鸟开始慢慢琢磨。

前端的第⼀门课，就是认识标签，是的，HTML5⾥⾯的核⼼就是认识各种各样的标签，以及它们的属性和允许的属性值，这是程序课程⾥⾯的⽂科，没有逻辑，没有类，也没有包闭.....正因如此，我只⽤了两天的时间，我认识了H5⾥⾯的所有标签，⽤4天的时间看完了CSS3的所有内容，⽽⽇后的事实证明，这种焦躁的学习态度和不合理的进度是极其不可取的，由于急功近利，让我的知识构架处处都是缺陷，简单的静态页⾯就能让我痛不欲⽣，所以，千万不要认为，没有逻辑的编程就是简单的编程。

万⾥长城始于⾜下，如果没有细致和耐⼼，没有带着⼯匠精神进⾏学习，基础不扎实会让你在⽇后的学习感到困难重重。

如何学好前端的基础呢（HTML5和CSS3）？郭靖学武拜江南七怪为师，⽤了8年的时间练习扎马步 NBA的球星，每天都在罚球线练习500个投篮优秀的⾜球运动员每天都要跑⼏⼗公⾥的路不管在哪个领域，基础的重要性都是不⾔⽽喻的，想学好前端的基础，就必须要有耐⼼，和⼯匠般的细致。

1.归纳每⼀个，注意是每⼀个标签！各个标签拥有的属性及其取值，做成笔记，或者是速查⼿册2.每⼀个标签及其属性都要踏踏实实的敲⼀遍，在浏览器观看⽣成的效果。

3.做成思维导图（我⾮常喜欢的⼀个办法），树状图，维恩图，流程图，关系图等等....。

css学习笔记

1-CSS初体验层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

提示：属性名和属性值成对出现→键值对。

02-CSS引入方式•内部样式表：学习使用o CSS 代码写在 style 标签里面•外部样式表：开发使用o CSS 代码写在单独的 CSS 文件中（.css）o在 HTML 使用 link 标签引入•行内样式：配合 JavaScript 使用o CSS 写在标签的 style 属性值里03-选择器作用：查找标签，设置样式。

标签选择器标签选择器：使用标签名作为选择器→选中同名标签设置相同的样式。

例如：p, h1, div, a, img......注意：标签选择器无法差异化同名标签的显示效果。

类选择器作用：查找标签，差异化设置标签的显示效果。

步骤：•定义类选择器→.类名•使用类选择器→标签添加class="类名"注意：•类名自定义，不要用纯数字或中文，尽量用英文命名•一个类选择器可以供多个标签使用•一个标签可以使用多个类名，类名之间用空格隔开开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。

id选择器作用：查找标签，差异化设置标签的显示效果。

场景：id 选择器一般配合 JavaScript使用，很少用来设置 CSS 样式步骤：•定义 id 选择器→ #id名•使用 id 选择器→标签添加 id= "id名"规则：同一个 id 选择器在一个页面只能使用一次。

通配符选择器作用：查找页面所有标签，设置相同样式。

通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

ext学习总结

1.Ext前台显示页面设计文件结构：WebRoot：app ---common、controller、model、stroe、view、app.jsCss---.cssData----.jsonLib---local、override、resources、ext-all.jsWEB-INF ----conf（配置文件）、lib（jre包）、web.xmlIndex.jsp页面设计：Define相当于创建一个类，creat相当于在类的基础之上创建一个对象Pannel显示的实际页面Model与数据库相对应的一个实例模型Stroe与数据库进行数据通讯Controller页面显示逻辑控制实现Add(),方法在容器组件内添加控件2.前台与后台数据交互页面与后台数据通信的桥梁，是view页面显示中的name属性的值。

与后台定义的成员变量保持一致，否则传值不成功。

前台与后台通信有同步和异步2种方式有session jsonExt.getCmp('jxgrid').getStore().load({params:{id:id}});//传递参数进行store加载Ext.getCmp('processImgBrowser').getStore().getProxy().extraParams = {'lplan.pid': type}; //前台向后台传参，把前台的参数type传递到后台的lplan.pid,其中extraParams是前台后台参数传递的媒介桥梁，type先放在extraParams中在赋值给lplan.pid。

注意：getCamp（）内参数id要与store在同一级：示例me.processPanel = Ext.create('Ext.panel.Panel', {id: 'processPanel',width: '100%',height: 120,autoScroll: true,items: [{id: 'processImgBrowser',xtype: 'imgbrowser',itemId: 'processImgBrowser',store: me.processstore,cls: 'img-chooser-view'}]});3.智能电厂学习总结1>、文件下载window.open('export_download.action?fileName=' + file, '_self'); 在当前窗口打开一个新的窗口如下window.open()的基本语法：window.open(pageURL,name,parameters)其中：pageURL 为子窗口路径name 为子窗口句柄parameters 为窗口参数(各参数用逗号分隔)示例：<SCRIPT></SCRIPT>2>、后台接受前台数据Ext.getCmp('zxtree').getStore().getProxy().extraParams = {'zxTask.type': dbtype}; //把前台数据dbtype通过桥梁extraparams赋值给后台zxTask.type后台使用get方法接受前台页面属性信息时，使用ISO8859-1格式传输，接收道德数据中文乱码，需要转码，转码方法如下：fname = new String(this.getFileName().getBytes("ISO8859-1"),"utf-8"); //把接收到的this.getFileName(),转码为utf-8并赋值给fname。

学习使用Bootstrap4开发网页前端笔记

学习使⽤Bootstrap4开发⽹页前端笔记学习使⽤Bootstrap4开发⽹页前端笔记Bootstrap 是全球最受欢迎的前端组件库，⽤于开发响应式布局、移动设备优先的 WEB 项⽬。

Bootstrap4 ⽬前是 Bootstrap 的最新版本，是⼀套⽤于 HTML、CSS 和 JS 开发的开源⼯具集。

好处：•1.定义了很多的css样式和js插件。

我们开发⼈员直接可以使⽤这些样式和插件得到丰富的页⾯效果。

•2.响应式布局。

⼆、css相关知识：(⼀)、script在html中的摆放位置：⼀般script标签会被放在头部或尾部。

头部就是<head>⾥⾯，尾部⼀般指<body>⾥。

但有些script的位置也不是随便放的。

⾸先我们需要了解的⼀点就是，在浏览器渲染页⾯之前，它需要通过解析HTML标记然后构建DOM树。

在这个过程中，如果解析器遇到了⼀个脚本(script)，它就会停下来，并且执⾏这个脚本，然后才会继续解析HTML。

如果遇到了⼀个引⽤外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，⽽这个⾏为会导致⼀个或者多个的⽹络往返，并且会延迟页⾯的⾸次渲染时间。

因为，html⽂件是⾃上⽽下的执⾏⽅式，但引⼊的css和javascript的顺序有所不同，css引⼊执⾏加载时，程序仍然往下执⾏，⽽执⾏到<script>脚本是则中断线程，待该script脚本执⾏结束之后程序才继续往下执⾏。

所以，⼀般将script放在body之后是因为避免长时间执⾏script脚本⽽延迟阻塞。

⽽有⼀些页⾯的效果的实现，是需要预先动态的加载⼀些js脚本，所以这些脚本应该放在<body>之前。

其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始⽣成dom，所以在body之前的访问dom元素的js会出错，或者⽆效，这种情况下则只能放到尾部。

总结出⼀些加载JavaScript⽂件的最佳实践:对于必须要在DOM加载之前运⾏的JavaScript脚本，我们需要把这些脚本放置在页⾯的head中，⽽不是通过外部引⽤的⽅式，因为外部的引⽤增加了⽹络的请求次数；并且我们要确保内敛的这些JavaScript脚本是很⼩的，最好是压缩过的，并且执⾏的速度很快，不会造成浏览器渲染的阻塞。

CSS3学习笔记

border-image:url("/52e22a1c0001406e03040221.jpg颜色RGBAcolor：rgba(R,G,B,A)background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号normal为浏览器默认值，break-word设置在长单词地址内部进行换行，此属性不常用，用浏览器长单词或URL地址文本阴影text-shadowtext-shadow可以用来设置文本的阴影效果。

语法：text-shadow: X-Offset Y-Offset blur color;X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color：是指阴影的颜色，其可以使用rgba色。

比如，我们可以用下面代码实现设置阴影效果。

text-shadow: 0 1px 1px #fffbackground-origin原始起始位置。

设置元素背景图片的原始起始位置语法：background-origin ： border-box | padding-box | content-box;内容区域开始显示。

内边距（默认值），或者是内容区域参数分别表示背景图片是从边框边框，还是内边距（默认值）效果如下：需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

需要注意的是background-clip裁剪以适应实际需要。

用来将背景图片做适当的裁剪语法：background-clip ： border-box | padding-box | content-box | no-clip参数border-box 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。

前端手册印象笔记

前端手册印象笔记1. 前端手册和印象笔记，那可真是咱前端小伙伴的两大神器啊！你知道吗？就像厨师离不开他的刀具和菜谱一样。

前端开发的时候，各种代码片段、样式规则，要是没个好地方整理，那脑袋不得乱成一锅粥？我就有个朋友，之前没使用印象笔记整理前端手册里的知识，每次找个小知识点都得翻半天资料，急得直冒汗。

可一旦用上了，就像在混乱的衣柜里找到了分类整理的魔法抽屉，啥都井井有条了。

2. 前端手册是知识的海洋，印象笔记就是咱航行在这海洋里的坚固小船。

想象一下，你在前端的世界里探索，面对各种HTML、CSS、JavaScript的知识浪潮，要是没有印象笔记这个可靠的“小船”承载前端手册里的那些宝藏知识，你很可能就被淹没啦。

比如说，学习新的CSS 布局技巧的时候，我把从前端手册上看到的各种案例和解释都存到印象笔记里，等我自己做项目要用的时候，轻松就能找到，就像从小船的储物箱里拿出工具一样方便。

3. 嘿，你有没有想过，前端手册和印象笔记组合起来就像超级英雄的搭档？前端手册充满了各种代码秘籍，而印象笔记就负责把这些秘籍保管好并且随时能让你调用。

我同事就是个例子，他要做一个复杂的网页交互效果，在前端手册里找到了相关的JavaScript算法，但如果只是看一眼就忘掉了怎么办？他把这些内容存到印象笔记里，然后在实际开发的时候，就像超级英雄呼唤伙伴一样，轻松从印象笔记里调出这些知识，顺利完成了项目，那成就感，简直爆棚！4. 前端手册就像一座巨大的知识金矿，印象笔记则是你挖矿的小推车。

在前端开发这个充满挑战的领域里，每天都有新的东西要学。

你看那些新的前端框架不断出现，就像金矿里不断冒出新的矿脉。

我自己每次从前端手册里挖到“金子”（新知识）的时候，就赶紧放到印象笔记这个小推车里。

像我上次学习Vue.js框架，从前端手册上把重要的概念、语法和示例都收集到印象笔记里，后来做项目用到的时候，就感觉自己像是一个富有的矿工，不慌不忙地从推车里拿出需要的东西。

拉勾教育前端笔记

拉勾教育前端笔记一、前端学习的初体验刚接触拉勾教育的前端课程的时候，我就感觉像是打开了一个新世界的大门。

那一堆堆的代码，就像神秘的符号一样，既让人觉得高深莫测，又充满了无限的吸引力。

前端这玩意儿啊，就像是给网站或者APP穿上漂亮衣服的魔法师，能让一个光秃秃的框架变得超级酷炫。

我还记得刚开始学HTML的时候，那些标签就像一个个小积木，只要按照一定的规则拼接起来，就能构建出网页的基本结构。

比如说那个<h1>标签，一看到它，我就知道这是用来做一级标题的，就像文章里的大标题一样重要。

二、CSS的奇妙之旅学完HTML之后就进入到CSS的世界啦。

CSS可太好玩儿了，它就像是给网页化妆的化妆品。

可以改变字体的颜色、大小，还能调整元素的布局。

比如说我想让一个按钮看起来很时尚，我就可以给它设置一个漂亮的背景颜色，再调整一下边框的样式。

而且啊，CSS 还有很多神奇的属性，像display:flex，这个属性一用，元素的排列就变得超级整齐，就像一群训练有素的士兵。

我在学习这个属性的时候，可费了不少劲儿呢，要不断地调整参数，才能达到理想的效果。

三、JavaScript的挑战与乐趣JavaScript可就是前端的大boss了。

它的功能超级强大，可以让网页动起来，实现各种交互效果。

比如点击一个按钮，就弹出一个小窗口，或者让一个图片在页面上滑动。

不过JavaScript也很难，它的语法很复杂，有很多概念需要理解。

我记得在学习函数的时候，一开始总是搞不清楚函数的参数和返回值是怎么回事。

但是当我终于理解了之后，那种成就感简直无法形容。

就像攻克了一座很难攀登的山峰一样。

四、前端框架的探索在学了基础的HTML、CSS和JavaScript之后，就开始接触前端框架了，像Vue和React。

这些框架就像是一个超级工具包，里面有很多现成的组件和功能，可以让开发效率大大提高。

比如说Vue 的组件化开发，就可以把一个复杂的页面拆分成很多小的组件，每个组件负责自己的功能，这样代码就变得更加清晰和易于维护。

【学习】htmlcss前台学习技巧总结

【关键字】学习htmlcss前台学习技巧总结篇一：前端面试题总结HTML CSS部分前端面试题总结HTML CSS部分1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;2.xhtml和html有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?用于声明文档使用那种规范(html/Xhtml)一般为严格过度基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug4.行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引入的方式有哪些? link和@import的区别是?内联内嵌外链导入区别：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?标签选择符类选择符id选择符继承不如指定Id>class>标签选择后者优先级高7.前端页面有哪三层构成，分别是什么?作用是什么?结构层Html 表示层CSS 行为层js8.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)10.写出几种IE6 BUG的解决方法1.双边距BUG float引起的使用display2.3像素问题使用float引起的使用dislpay:inline -3px3.超链接hover 点击后失效使用正确的书写顺序link visited hover active4.Ie z-index问题给父级添加position:relative5.Png 透明使用js代码改6.Min-height 最小高度!Important 解决’7.select 在ie6下遮盖使用iframe嵌套8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)9.ie 6 不支持!important11.img标签上title与alt属性的区别是什么?Alt 当图片不显示是用文字代表。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

第一节——层叠样式表（多种样式一起使用）1.什么是CSS设置网页的显示格式及位置，2.CSS语法任何标签都可以有四个属；……性（Id class style name）格式：属性+值；属性+值（属性和值使用冒号“：”，多个属性之间使用分号“；”）单位：颜色#rgb #8法（f绿a蓝）大小px，cm mm（米）URL注释：/* */（在注释中不要在包含注释）3.CSS的四种设置方式a)内联样式表：在HTML元素标签中使用style属性内联每个HTML标签都可以加样式（工作量大）b)嵌入样式表：通过HTML的<style>标签将CSS嵌入到HTML中使用可以控制当前页面的所有样式（<head>CSS的语法设置</head>）c)外部样式表：将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用。

（<link rel=”stylesheet”链接样式表type=”text/css”什么类型 href=”css/layout.css”在哪 />）多个页面都可以使用d)输入样式表：可以将一个样式文件输入到另外一个样式文件的中，或将一个样式文件输入到<style>元素中@import url(css文件)他们的优先级别：内联的高于其它的，其它的和加载的顺序有关第二节——多种样式选择器的使用1.什么是样式选择器（形式有div{ } P{ }HTML.nav{ }类#left{ }IDa,b,h1,#one{ }组合a b h1 #two{ }关联 a:hover,a:link{ }等）Selector { /* Selector 是样式选择器*/property:value; /* color:red; */property:value; /* font-size:4cm; */…}Selector:当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。

2.什么是HTML选择器HTML有标签，CSS就用选择器选择符就是赋予内部或外部样式表的名字HTML的标签，用来改变一个指定标签的样式任何一个元素（html标签）都可以是一个CSS选择符3.什么是类选择器同一个选择器能有不同的类，因而允许同一个元素有不同的样式定的方法[tag].类名，用来区分同类型，便于加不同的样式（类名是自定义的,如果不加tag则代表所有HTML元素）<tag class=“类名类名1 类名2”>（同一个元素可以使用多个类，类名之间使用空格分开）4.什么是ID选择器在HTML页面中，ID属性指定了某个单一元素，id属性就用来对单一元素定义单独样式一个HTML页面中，ID属性值要唯一（控制一个元素）格式：#idname { 属性值} (idname是自定义的名称)<tag id=“idname”>5.什么是关联选择器关联选择器只不过是一个用空格隔开的两个或更多的单一选择器给成的字符串因为层叠顺序的规则，它们的优先权比单一的选择符大必须按关联关系使用，不能有反顺序只要能保持关联关系就可以，不管是在多少层6.什么是组合选择器为了减少样式表的重复声明，组合是允许的只要使用英文逗号（,）隔开每个选择符就可以了7. 伪元素选择器伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义方式目前只有a和p（有多个状态）两处HTML元素可以使用为元素使用时的语法标签：伪元素标签［.类名］：伪元素a:link 没有任何运作前的状态a:hover 光标移到到超链接上的状态a:active: 选择超链接的状态a:visited 访问过超连接的状态p:first-letter 一个段落中首个字母的状态P:first-line 一个段落中首行的状态8.样式规则的继承所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

Eg:……div { color:red;font-size:2cm;}……<div><p>wwwwwwww</p></div>……9.样式规则的优先级关联>ID选择器>CLASS（类）选择器>HTML标签选择器第三节——常见的CSS属性和值1.字体族科（font-family不同的字体）可以给多个（第一个不存在可以用第二个），用逗号隔开，防止不存在的字体。

字体大小（font-size）：绝对大小，相对大小，长度，百分比，像素px字体风格（font-style）：normal（普通），italic（斜体）或oblique（倾斜）字体加粗（font-weight）：bold、bolder或lighter字体变形（font-variant）：normal（普通）或small-caps（小型大写字母）字体颜色（color）：格式：font: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科>2.文本a.字母间距（letter-spacing）：该值必须符合长度格式，允许使用负值b.文字间距（word-spacing）：该值必须符合长度格式，允许使用负值c.横向排列（text-align）：right，left，centerd.文字修饰（text-decoraction）：underline（下划线），overline（上划线），line-through（删除线），blink（闪烁），none（或默认地使用无）、text-transform：uppercase；（大写）、text-transform：lowercase；（小写）e.文字缩进（text-indent）该值必须是一个长度或一个百分比，若百分比则视上级元素的宽度而定f.行高（line-height）：可以接受一个控制文本基线之间的间隔的值。

当值为数字时，行高由元素字体大小的量与该数字相乘所得。

百分比的值相对于元素字体的大小而定。

不允许使用负值3.背景a.颜色（background-color）：值和color属性值设定方式相同，或使用transparent（透明）值b.图像（background-image）：图片URL（“文件全名”）或none（无）c.（图片）重复（background-repeat）：background-repeat（默认平铺）、background-repeat-x（水平重复）、background-repeat-y（竖直重复）、background-no-repeat（不重复）多个图标放到同一个图片里，通过定义某区块的背景定位，调用同一个图片中不同位置上的小图标，好处是可以减少对服务器的请求次数，从而加快页面的访问速度d.附件（background-attachment）：background-scroll（背景跟着滚动）或background-fixed（背景固定）e.位置（background-position）：横向的关键字（left, center, right），纵向的关键字（top, center,bottom）百分比和长度也可用做安排背景图象的位置格式：background: <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背景位置>4.位置5.边框a.任何一个元素都可以设置边框b.边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写，可以一起设置4边的边框，也可对上边框、右边框、下边框和左边框单独设置。

c.可以通过边框风格属性border-style设定上下左右边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。

可以使用1到4个关键字，如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。

如果给出一个值，它将被运用到各边上。

如果两个或三个值给出了，省略了的值与对边相等也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格d.边框样式none：没有边框，无论边框宽度设为多大、dotted：点线式边框、dashed：破折线式边框、solid：直线式边框、double：双线式边框、groove：槽线式边框、ridge：脊线式边框、inset：内嵌效果的边框、outset：突起效果的边框e.边框宽度属性：可以通过边框宽度属性border-width设定上下左右边框的宽度，该属性用1到4个值来设置元素的边界，值是一个关键字或长度，不允许使用负值长度。

如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。

如果只给出一个值，它将被运用到各边上。

如果两个或三个值给出了，省略了的值与对边相等。

这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。

也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。

除了可以使用长度单位定值外，还可以用medium（是默认值）、thin（比medium细）或thick（比medium粗）值。

f.边框颜色属性：可以通过边框颜色属性border-color设定上下左右边框的颜色，可以使用1到4个关键字。