学习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秒后，自动跳转到第三个页面。
- 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”的形状。