学习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知识后再进行修改。

HTML5+CSS3笔记

HTML5一、HTML5 概述二、HTML5基本格式一．HTML5 文档结构1.第一步：打开Sublime Text 3，打开指定文件夹；2.第二步：保存index.html 文件到磁盘中，.html 是网页后缀；3.第三步：开始编写HTML5 的基本格式。

<!DOCTYPE html> //文档类型声明<html lang="zh-cn"> //表示HTML 文档开始<head> //包含文档元数据开始<meta charset="utf-8"> //声明字符编码<title>基本结构</title> //设置文档标题</head> //包含文档元数据结束<body> //表示HTML 文档内容<a href="">百度</a> //一个超链接元素（标签）</body> //表示HTML</html> //表示HTML 文档结束二．文档结构解析1.Doctype文档类型声明（Document Type Declaration，也称Doctype）。

它主要告诉浏览器所查看的文件类型。

在以往的HTML4.01 和XHTML1.0 中，它表示具体的HTML 版本和风格。

而如今HTML5 不需要表示版本和风格了。

<!DOCTYPE html> //不分区大小写2.html 元素首先，元素就是标签的意思，html 元素即html 标签。

html 元素是文档开始和结尾的元素。

它是一个双标签，头尾呼应，包含内容。

这个元素有一个属性和值：lang="zh-cn"，表示文档采用语言为：简体中文。

<html lang="zh-cn"> //如果是英文则为en3.head 元素用来包含元数据内容，元数据包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。

【详解】提示框（tooltip）的使用-bootStrap4常用CSS笔记

【详解】提⽰框（tooltip）的使⽤-bootStrap4常⽤CSS笔记tooltip (提⽰框) 是⼀个⼩⼩的弹窗，在⿏标移动到元素上显⽰，⿏标移到元素外就消失。

属性常⽤的功能，可以通过以下属性来设置：data-toggle = "tooltip"指明这是⼀个tooltip组件对象，其实可以省略title = "这⾥设置展⽰的⽂字"提⽰框显⽰的内容。

data-trigger = "{click | hover | focus | manual}"触发提⽰框的⽅式：1、click 【默认】单击时显⽰或关闭2、hover 移上去显⽰，移出去隐藏3、focus 单击时显⽰，点击空⽩处时隐藏4、manual ⼿动模式。

需要调⽤js代码触发显⽰或关闭提⽰框data-html = "{false | true}"设置提⽰框内容是否⽀持HTML格式。

默认值:false当值为true时，title属性值可以设置成html代码。

不过建议不要这么设置，以防XSS攻击data-delay = "{数值}"设置提⽰框延迟显⽰。

⽐如 data-delay = "1000" 时，提⽰框会在执⾏后1秒才显⽰。

默认值：0 data-animation = {true | false}是否动画效果显⽰提⽰框。

默认值：false不显⽰动画效果。

data-container = {string | false}默认值false，当提⽰框⽤于按钮组、表单或表格时，必须指定选项容器：'body'以避免不必要的副作⽤，（例如当触发弹出窗⼝时元素变宽和/或失去圆⾓）。

data-container = "body"data-placement = {left | top | right | bottom | auto}设置提⽰框的显⽰位置，⽀持多种设置，⽐如data-placement="auto left"时，提⽰窗尽可能显⽰在左边,在情况不允许的情况下它才显⽰在右边简单的提⽰框HTML代码⽰例：1<a href="#" id="text" data-toggle="tooltip" title="这是⼀段显⽰的⽂字" data-placement="right" data-trigger="hover">右边显⽰内容</a>2<script>3 $(function(){4 $('[data-toggle="tooltip"]').tooltip(); // 也可以使⽤ $('#text').tooltip(); 来启⽤弹窗5 });6</script>⽀持HTML格式的提⽰框⽰例：1<a href="#" id="text" data-toggle="tooltip" title="<h1>bootStrap4学习之路</h1><p>漫漫长路，吾将上下求索之！</p>" data-html="true" data-placement="bottom" data-trigger="hover">显⽰HTML样式提⽰窗</a> 23<script>4 $(function(){5 $('[data-toggle="tooltip"]').tooltip(); // 也可以使⽤ ('#text').tooltip(); 来启⽤提⽰框6 });7</script>⽅法还可以通过tooltip的option设置来实现更多功能，tooltip函数原型：1 $obj.tooltip({2 title: '', // 提⽰框显⽰的⽂本内容。

css总结笔记

css总结笔记
CSS 是层叠样式表的缩写，是一种用于设计和布局网页的编程语言。

以下是CSS 总结笔记的全文:
一、CSS 的概述
CSS 用于设计和布局网页，可以让网页变得更加生动、美观和易读。

CSS 可以用于网页的头部、主体和底部，以及用于网页的各个部分。

二、CSS 的语法
CSS 的语法包括选择器、属性和值等。

选择器用于选择网页中的元素，属性和值用于设置元素的样式。

三、CSS 的样式
CSS 的样式包括颜色、字体、大小、边框、背景等。

通过设置这些样式，可以让网页变得更加美观。

四、CSS 的应用场景
CSS 的应用场景包括网页的布局、元素的样式设置和网页的颜色搭配等。

通过使用 CSS，可以让网页变得更加生动、美观和易读。

五、CSS 的兼容性
CSS 在不同的浏览器中有不同的兼容性问题。

为了解决这个问题，可以使用CSS 的媒体查询和伪元素等方法。

六、CSS 的优化
CSS 的优化可以提高网页的加载速度和用户体验。

可以通过减少重排、减少重写和压缩 CSS 等方式进行优化。

七、CSS 的拓展
CSS 还有很多拓展功能，如响应式设计、动画效果、Web 组件等。

通过使用CSS，可以让网页变得更加生动、美观和易读。

八、CSS 的总结
CSS 是网页设计中不可或缺的一部分。

通过使用 CSS，可以让网页变得更加生动、美观和易读。

在学习 CSS 时，需要熟练掌握语法、样式和应用场景，并了解 CSS 的兼容性和拓展功能。

计算机专业读书笔记

计算机专业读书笔记【篇一：计算机书籍读书笔记】读书笔记第一篇 css精粹之布局技巧1. 若有疑问立即检测。

在出错时若能对原始代码做简单检测可以省去很多头痛问题。

w3c对于xhtml与css都有检测工具可用，请见请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令。

浮动是个危险的功能，未必会产生您所期望的结果。

如果您遇到浮动元素延伸到外围器的边框或者其他不正常情况，请先确定您的做法是正确的。

3.边界重合时利用padding或border来避免。

您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来。

如果您有用到margin，那么很容易产生边界的重合；andy budd在他的网站上解释了可能的做法。

4.尝试避免同时对元素指定padding/border以及高度或宽度。

windows版ie经常导致width与height的计算问题。

有些方法可以解决此问题，但如果母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时，在母元素套用padding以达效果。

5.不要依赖min-width/min-height。

windows版ie并不支援两种语法。

但是在某种程度下，windows版ie可以达到相当于min-width/min-height的效果，所以只要对ie 做点过滤功能，即可达到您想要结果。

第二篇何为一个“丰满”的设计1.“丰满”的含义并不代表将一个版面撑满。

每个设计都必须含有一个点子，点子以“产品特性”、“目标消费群”及“卖点”所支撑。

整个设计围绕其而发展，统一与一个中心，环环相扣，由浅入深或由深化浅，循序渐进，有规律，有节奏，有重点，才不失为一个“丰满”的设计。

2.做一个“不浪费”的设计大多数设计由图片及文案两部分组成。

传智韩顺平 html+css+javascrtpt 课程笔记3(吐血整理)

javascript 3=============================================================================== 1.Dom（文档对象模型）编程简介DOM = Document Object Model(文档对象模型)，根据W3C的DOM规范，DOM是HTML 与XML的应用编程接口（API），它将整个页面映射为一个由层次节点组成的文件。

编程人员通过访问dom 对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。

2.html dom层次图dom编程的核心是各个dom 对象。

HTML DOM定义了访问和操作HTML文档的标准方法。

HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)，每个节点是一个HTML DOM内置对象。

3.BOM（浏览器对象模型）介绍通过使用BOM，可移动窗口、更改状态栏文本。

bom 是w3c 组织提出的，他建议所有的浏览器都应当遵循这样的设计规范。

可以说bom 和dom 关系密切, 相互影响，bom 为纲，dom为目，我们可以简单的理解，dom 是bom 中document的具体实现。

要求浏览器必须支持4.常用dom对象window对象window 对象表示一个浏览器窗口或一个框架。

在客户端JavaScript中，Window 对象是全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用。

注：在使用window对象的方法和属性的时候，可以不带window，如下window.alert(“韩顺平!”)等价于：alert(“韩顺平”)。

常用方法和属性：✧alert() 显示消息和一个确认按钮的警告框✧confirm() 显示消息以及确认按钮和取消按钮的对话框✧setInterval() 按照指定的周期(毫秒计)来循环调用函数或计算表达式✧clearInterval() 取消由setInterval()设置的定时器✧setTimeout() 指定的毫秒数后调用一次函数或计算表达式✧clearTimeout() 取消由setTimeout()设置的定时器✧moveTo() 把窗口的左上角移动到一个指定的坐标✧moveBy() 可相对窗口的当前坐标把它移动指定的像素✧resizeBy() 按照指定的像素调整窗口的大小✧resizeTo() 把窗口的大小调整到指定的宽度和高度✧open() 打开一个新的浏览器窗口或查找一个已命名的窗口✧close() 关闭窗口✧closed 返回窗口是否已被关闭✧status 设置窗口状态栏的文本✧opener 返回对创建此窗口的窗口的引用✧onload 页面装载✧onunload 关闭窗口案例：一个js版用户登录系统，当用户输入顺平密码是123，就跳到第二个页面，5秒后，自动跳转到第三个页面。

div+css笔记

DIV+CSS学习笔记Div是用于存放内容（文字，图片，元素）的容器Css是用于指定在div中的内容如何显示，包括这些内容的位置和外观快速入门案例（体验案例）：Css.html:<link rel="stylesheet" type="text/css" href="my.css"></head><body><div class="style1"><img src="F:\photo\QzonePic\0.jpg" width="200"></div></body>My.css:.style1{/*宽度*/width:400px;height:300px;background-color:silver;border:1px solid red;margin-left:400px;margin-top:250px;padding-top:50px;padding-left:50px;}Css中常用的四种选择器1、类选择器（class选择器）基本使用.类选择器{属性名:属性值;…}2、.id选择器基本使用：#id选择器{属性名:属性值;…}案例：/*id选择器的使用*/#id1{background-color:silver;font-size:"40px";}3、Html元素选择器基本使用某个html元素{属性名:属性值;…}4、通配符选择器该选择器可以用到所有的html元素，但是其优先权最低基本使用*{属性名:属性值;…}☞css文件可以使用在各种文件（php、html、jsp、asp...）四个选择器优先级如下：id选择器 > class选择器 > html选择器 > 通配符选择器案例：我们希望所有的超链接（1）默认样式是黑色，24px。

CSS学习笔记-边框(border)

第12节 CSS Border(边框）12.1边框样式边框样式属性指定要显示什么样的边界。

border-style属性用来定义边框的样式可以设置的值:none: 默认无边框dotted:点线边框dashed:虚线边框solid:实线边框double: 双线边框groove: 3D沟槽边框ridge: 3D脊边框;inset: 3D嵌入边框。

12.2边框宽度border-width 属性为边框指定宽度。

可以设置的值:可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为border-color属性用于设置边框的颜色。

可以设置的值:name - 指定颜色的名称，如 "red"RGB - 指定 RGB 值, 如 "rgb(255,0,0)"Hex - 指定16进制值, 如 "#ff0000"12.4四个边框四个边框分别对应四个属性值：border-left左边框border-right右边框border-top上边框border-bottom下边框12.5每个边框上、右、下、左四个边框中，每个边框分别对应三个属性，比如对于上边框有：border-top-color设置元素的上边框的颜色。

border-top-style设置元素的上边框的样式。

border-top-width设置元素的上边框的宽度。

12.6使用方法[border].c{border-width:5px;border-style:solid; /*这个属性是必须的*/border-color:red;}也可以写为：.c{border:5px solid red;}12.7使用方法[border-style]-四个参数“上、右、下、左”.d{border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style: dashed;}也可以写为：.d{border-style:dotted solid double dashed;}12.8使用方法[border-style]-三个参数“上、左右、下”{border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style: solid;}也可以写为：.e{border-style:dotted solid double;}12.9使用方法[border-style]-两个参数“上下、左右”.f{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style: solid;}也可以写为：.f{border-style:dotted solid;}12.9使用方法[border-style]-一个参数“上右下左”.g{border-top-style:dotted;border-right-style: dotted;border-bottom-style:dotted;border-left-style: dotted;}也可以写为：.g{border-style:dotted;}12.9使用方法[其他]类似的用法。

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

《网页设计与制作》笔记第一章：网页设计基础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学习笔记

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 选择器在一个页面只能使用一次。

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

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

HTML+CSS常用代码（笔记）

HTML+CSS常⽤代码（笔记）注释标签：对代码进⾏说明常⽤格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换⾏<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调⽂本</strong>../：返回上⼀级（⽗级）⽬录标题标签<h1>我是⼀级标题标签(最⼤)</h1><h2>我是⼆级标题标签</h2><h3>我是三级标题标签</h3><h4>我是四级标题标签</h4><h5>我是五级标题标签</h5><h6>我是六级标题标签(最⼩)</h6>列表标签⽆序列表：<ul type="disc"> <li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>有序列表：<ol type="1"> <li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>⾃定义列表：图⽂混排<dl><dt>标题，图⽚</dt><dd>描述</dd></dl>CSS样式内嵌样式:放在<head>标签之间语法：<style type="text/css">选择器名 {属性名:属性值;}</style>所有标签（*）* {padding:0px; /*清除默认内边距*/margin:0px; /*清除默认外边距*/}⽂本属性line-height:20px; /*⾏⾼*/text-align:center; /*对齐：Left|right|center|justify*/text-decoration:none; /*⽂本修饰None：默认|underline：定义⽂本下的⼀条线|overline：定义⽂本上的⼀条线|line-through：定义穿过⽂本下的⼀条线*/ Letter-spacing:5px; /*字母之间的间距*/Text-indent:40px; /*⾸⾏的缩进⽅式：px/%*/字体标签及属性<font>字体标签</font><style type="text/css">font-size:字体⼤⼩（常⽤单位：px/%/em...）;color:颜⾊;font-style:字体样式;font-family:字体系列;font-weight:字体粗细;</style>例：<font size="6" color="#FF0000" face="微软雅⿊">我是字体标签</font>背景相关的属性background-color: red; /*设置背景颜⾊*/background-image: url(图⽚路径); /*设置背景图⽚（图⽚路径没有引号包裹）*/background-repeat: no-repeat; /*设置背景的平铺⽅式：Repeat-x、repeat-y、no-repeat*/Background-attachment: Fixed; /*设置滚动：Scroll、Fixed*/background-position: center; /*设置背景的坐标，偏移量,如left、right、center、button*/background-position:100px -100px;/*第⼀值：左右偏移量，正：向右偏移，负：向左偏移；第⼆值：上下偏移量，正：向下偏移，负：向上偏移*//*可以为px、%、cover、continuecover: 不会造成图⽚失真，会铺满整个标签。

Web前端学习笔记资料

Web前端学习笔记资料第⼀章：HTML介绍1.1 HTML和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语⾔。

下⾯我们就来了解下这三门技术都是⽤来实现什么的：1. HTML是⽹页内容的载体。

内容就是⽹页制作者放在页⾯上想要让⽤户浏览的信息，可以包含⽂字、图⽚、视频等。

2. CSS样式是表现。

就像⽹页的外⾐。

⽐如，标题字体、颜⾊变化，或为标题加⼊背景图⽚、边框等。

所有这些⽤来改变内容外观的东西称之为表现。

3. JavaScript是⽤来实现⽹页上的特效效果。

如：⿏标滑过弹出下拉菜单。

或⿏标滑过表格的背景颜⾊改变。

还有焦点新闻（新闻图⽚）的轮换。

可以这么理解，有动画的，有交互的⼀般都是⽤JavaScript来实现的。

1.2 html⽂件基本结构1. <html></html>称为根标签，所有的⽹页标签都在<html></html>中。

2. <head> 标签⽤于定义⽂档的头部，它是所有头部元素的容器。

头部元素有<title>、<script>、<style>、<link>、<meta>等标签。

3. 在<body>和</body>标签之间的内容是⽹页的主要内容，如<h1>、<p>、<a>、<img>等⽹页内容标签，在这⾥的标签中的内容会在浏览器中显⽰出来。

1.3 head标签⽂档的头部描述了⽂档的各种属性和信息，包括⽂档的标题等。

绝⼤多数⽂档头部包含的数据都不会真正作为内容显⽰给读者。

下⾯这些标签可⽤在 head 部分：<head><title>...</title><meta><link><style>...</style><script>...</script></head><title>标签：在<title>和</title>标签之间的⽂字内容是⽹页的标题信息，它会出现在浏览器的标题栏中。

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

深入理解css之absolute

深⼊理解css之absolute在慕课⽹上看到的张鑫旭⼤神的视频，做的笔记，以便⽇后翻看。

绝对定位与float 1.绝对定位和float有⼀样的特性，都有包裹性，和破坏性。

2.absolute和relative 如果不把他们俩放在⼀起，absolute越独⽴越强⼤。

relative和absolute是分离的，对⽴的，绝不是什么兄弟关系！独⽴的absolute可以摆脱overflow的限制，⽆论是滚动还是隐藏 <div class="scroll"> <a href="javascript:;" class="close" title="关闭"></a> <img src="mm1" /> <img src="mm2" /> </div> 当两个图⽚⾼度超出容器⼤⼩时，这⾥的a标签⾥⾯是禁⽌不动的。

3.⽆依赖的absolute定位⽆依赖的意思不受relative限制的absolute定位，⾏为表现上是不使⽤top/right/bottom/left任何⼀个属性或使⽤auto作为值！定位的⾏为表现 1.脱离⽂档流 2.保持占位 absolute特性表现 1.去浮动 2.位置跟随配合margin的精确定位 1.⽀持负值定位 2.超赞的兼容性 4.实例 1.图⽚图标绝对定位覆盖 <a>求课<i class="icon-hot"></i></a> .icon-hot{position:absolute;width:28px;height:11px;margin:-6px 0 0 2x;background:url();} ⽤margin负值和position实现。

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），涵盖除部分国内社交⽹站图标以外的其他常见图标。

CSS 笔记大全

# CSS的定义由三部分构成：选择符: selector属性: properties属性值: valueslector {property:value}# 选择符组h1,h2,h3,h4,h5,h6 {color:green}# 类选择符p.right{text-align:right}p.center{text-align:center}.center{text-align:center}.right{text-align:right}# ID选择符定义ID选择符要在ID名称前面加上一个"#" 号。

和类选择符相同,定义ID选择符和属性也有两种方法匹配所有id="intro" 的元素:#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent;}匹配id="intro"的段落元素:p#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent;}包含选择符table a{font-size:12px;}样式表的层叠性:就是继承性，样式表的继承规则是外部的元素样式会保留下来给这个元素所包含的其他元素。

当继承发生冲突时，总是以最后定义的样式为准。

不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。

ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后上元素上的，所以优先级最高，其次是类选择符，如果想超越这三者之间的关系，可以用!important提升样式表的优先权.# 注释p{text-align:center;color:black;font-family:arial;}伪类: pseudo-classselector:pseudo-class {property:value}类选择符及其他选择符也同样可以和伪类混用selector:class:pseudo-class{property:value}其他伪类: first-letter 和first-line<style type="text/css">p:first-letter {font-size:300%}</style>Dreamweaver中CSS属性详解----------------------------------------------------------------->>>>>>>>>>>>>>>>>>>>> Type / Background / Block / Border / List / Positioning / Extensions# Type: 字体，大小颜色;带*星号,只能在IE中才能看到效果line-height:行距# Background:对元素的背景色图进行控制，一般是对body / table / div区域的设置# Block: 对文本对象的文字间距，对齐方式，上标，下标，排列方式，首行缩行等.word spacing:设置单词的间距，可以为负值。

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

各种元素的属性（1）body元素background：定义body元素的背景图片bgcolor：定义body元素的背景颜色leftmargin：定义body元素与浏览器左边界的距离topmargin：定义body元素与浏览器上边界的距离class：链接级联样式style：直接定义级联样式（2）文本元素align：定义文本的水平对齐方式class：链接级联样式style：直接定义级联样式<pre>text</pre>：浏览器保持text文本的原有的格式输出（3）修饰元素hr元素align：控制对齐方式color：控制显示颜色size：控制分隔线的高度width：控制分隔线的宽度img元素scr：指定图片所在的路径alt：指定替代图片的文本width：定义图片的宽度height：定义图片的高度align：定义图片的对齐方式border：定义图片的边框（4）链接元素href：指定链接的路径target：指定链接的显示位置_blank：浏览器在新的窗口打开链接页面_self：在页面所在的窗口显示链接的页面（链接的默认值）_parent：在父窗口中打开链接页面_top：在本窗口中取代框架内容并打开链接页面（5）表单元素action：指定处理提交数据的的程序路径method：设置传送数据的方法id：用来标记表单class：使用级联样式控制表单的表现type：指定元素的类型size：指定表单的宽度border：指定表单的边框（5）表格元素table：用来定义一个表格tr：定义表格中的行元素td：定义表格中的单元格align：定义表格的水平对齐方式border：定义表格的边框bgcolor：定义表格的背景颜色background：定义表格的背景图片cellspacing：控制表格相邻单元格的间距cellpadding：单元格边缘和内容之间的距离valign：定义单元格中内容的垂直对齐方式width：定义表格或者单元格的宽度height：定义表格或者单元格的高度colspan：合并表格的列rowspan：合并表格的行CSS命名参考CSS样式表书写顺序显示属性（display list-style position float clear）自身属性（width height margin padding border background）文本属性（color font text-decoration text-align vertical-align white-space other content）应用样式的优先级最近最优先原则，是决定元素使用哪些属性的关键。

元素中直接使用的CSS > 页面头部调用的CSS > 链接形式调用的CSSID选择符> 类选择符> 类型选择符CSS基布局属性（1）定位属性（1）定位模式position: static | relative | absolute | fixed (不可继承)static：元素按照普通方式生成relative：元素将保持原来的大小偏移一定的距离absolute：元素将人页面元素中被告独立出来，使用边偏移进行定位fixed：元素将从页面元素中被独立出来，但其位置相对于屏幕本身，而不是文档的本身（2）边偏移top：定义元素相对于其父元素上边线的距离right：定义元素相对于父元素右边线的距离bottom：定义元素相对于父元素下边线的距离left：定义元素相对于父元素左边线的距离（3）层叠定位属性z-index：定义元素层叠的顺序（为没有单位的数字值）（2）页面的背景设定background: 背景颜色| 背景图像| 背景位置| 背景重复| 背景附件background-color：定义背景颜色background-image: url(图片路径)：定义背景图片background-repeat: repeat | no-repeat | repeat-x | repeat-y：定义背景图片的重复性repeat：背景图片执照从左到右，从上到下的顺序进行排列no-repeat：背景图片不重复，没有定义位置时，默认出现在容器的左上角repeat-x：背景图片横向排列，没有定义位置时，在容器顶部从左和右重复排列repeat-y：背景图片纵向排列，没有定义位置时，在容器左侧从上向下重复排列background-position: 长度值| 百分比值| top | right |bottom | left | centertop：背景图片出现在容器的上边bottom：背景图片出现在容器的底边left：背景图片出现在容器的左边right：背景图片出现在容器的右边center：背景图片的横向和纵向居中background-attachment: scroll | fixed ：定义图片的附件属性scroll：背景图像随内容滚动fixed：背景图像固定（3）控件内容显示属性display: block | none | inline | list-item | compact | marker | inline-table | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group |table-header-group | table-row | table-row-groupblock：定义元素为块对象inline：定义元素为内联对象list-item：定义元素为列表项目none：隐藏对象，同时元素所占有的空间也被清除visibility: visible | collapse | hiddenvisible：元素可见hidden：元素不可见collapse：隐藏表格中的行或列（4）浮动属性float: none | left | rightnone：元素不浮动left：元素浮动在左侧right：元素浮动在右侧（5）ul和li的样式(1)list-style属性list-style: list-style-type | list-style-image | list-style-position(2)list-style-type: disc | circle | square | decimal | lower-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latindisc：实心圆circle：空心圆square：实心方块decimal：阿拉伯数字lower-roman：小写罗马数字upper-roman：大写罗马数字lower-alpha：小写英文字母upper-alpha：大写英文字母none：不使用项目符号(3)list-style-position: outside | insideoutside：项目符号放置在文本以外inside：项目符号放置在方本以内(4)list-style-image: none | urlnone：没有替换的图片url：替换图片的路径（6）清除浮动clear: none | left | right | bothnone：允许两边都有浮动元素left：不允许左边有浮动元素right：不允许右边有浮动元素both：两边都不允许有浮动元素（7）补白属性padding: 长度值| 百分比值padding: padding-top padding-right padding-bottom padding-leftpadding-top：上侧补白属性padding-right：右侧补白属性padding-bottom：下侧补白属性padding-left：左侧补白属性（8）边框属性（1）边框的综合定义border: border-style border-width border-color（2）单侧边框的综合定义border-top: border-style border-width border-colorborder-right: border-style border-width border-colorborder-bottom: border-style border-width border-colorborder-left: border-style border-width border-color（3）边框样式border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetn one：没有边框即忽略所有边框的宽度h idden：隐藏边框d otted：点线d ashed：虚线s olid：实线d ouble：双线g roove：3D凹槽r idge：菱形边框i nset：3D凹边o utset：3D凸边（4）边框宽度border-width: medium | thin | thick | 长度值m edium：默认值t hin：比默认值细t hick：比默认值粗长度值：可以使用所有长度值border-width: border-top-width border-right-width border-bottom-width border-left-width（5）边框颜色border-color: border-top-color border-right-color border-bottom-color border-left-color （6）表格边框属性border-collapse: separate | collapses eparate：HTML默认设置，边框分开c ollapse：边框合并（9）边界属性margin: auto | 长度值| 百分比值margin: margin-top margin-right margin-bottom margin-left（10）固定大小overflow: visible | auto | hidden | scrollvisible：不剪切内容也不产生滚条auto：在需要时产生滚条hidden：不显示超出的内容部分scroll：总是显示滚条（11）文本的缩进和对齐text-indent: 长度值| 百分比值：控制段首缩进first-letter{属性:值}：控制段首字符下沉与大写text-align: left | center | right | justify ：控制水平对齐方式vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length ：控制竖直对齐方式（12）行高与间隔line-height: normal | 长度值| 百分比值| 数字值：控制文本行与行之间的距离letter-spacing: normal | 长度值：控制中文文字之间的间距word-spacing: normal | 长度值：控制字母之间的间距white-spacing: normal | pre | nowrap ：控制页面中空白的显示方式normal：默认值，忽略多余的空白pre：不忽略多余的空白nowrap：文本保持同一行显示，直到文本结束或者遇到br元素（13）文本的转换text-transform: none | uppercase | lowercase | capitalizenone：文本不进行大小写的转换uppercase：转换成大写lowercase：转换成小写capitalize：文本中每个单词的第一个字母大写（14）字体的综合属性font: 字体选择| 字体大小| 字体加粗| 字体变形| 行高font-family: 字体名称：字体的选择属性font-size: small | medium | large | smaller | larger | 长度值| 百分比值：字体的大小属性font-weight: normal | bold | bolder | lighter ：字体的加粗属性font-style: normal | italic | oblique ：字体样式属性font-variant: normal | small-caps ：字体的变形属性normal：默认值字体不变形small-caps：使用小型大写字母text-decoration: none | underline | overline | line-through | blink ：文本的修饰属性none：没有任何修饰underline：给文本增加下划线overline：给文本增加上划线line-through：给文本增加删除线blink：添加闪烁效果:link，:visited，:hover，:active ：链接样式的顺序（没有访问过，内容访问后，鼠标悬停状态，内容被激活）cursor: auto | crosshair | default | hand | move | wait | text | w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize | pointer | url(url)auto：默认值，显示效果由用户所在的环境而定crosshair：鼠标显示为“十”字的形状default：鼠标显示为“箭头”的形状hand：鼠标显示为“手”的形状move：鼠标显示为有4个方向的“十字箭头”形状text：鼠标显示如大写“I”的形状。