这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。
由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。
所有的主流浏览器均支持层叠样式表。
1.2 样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。
1.3 多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
2.CSS 的引入方式
2.1 引入方式
一般来说,我们的引入方式一般分为三种。
内联样式表 :直接在 HTML 元素内部进行样式的设置。
内部样式表 :在
标签内部设置
标签,设置样式。
外部样式表 :在
标签内部设置
标签,进入外部 CSS 文件。
2.2 不同引入方式的优缺点
2.2.1 内联样式表
内联样式表
优缺点
1
优先级最高
2
多余代码多
3
不利于维护
4
配合 JS 使用
2.2.2 内部样式表
内部样式表
优缺点
1
速度快,没有请求压力
2
相对外部引用代码较少
3
不宜改版和维护
4
代码较乱,不方便前后台沟通
5
主要使用在主页和活动页
2.2.3 外部样式表
外部样式表
优缺点
1
一个 CSS 样式可以控制多个页面
2
方便改版和维护
3
减少代码量,代码简洁,便于分工协作
4
有效利用缓存机制
5
相对单页来说,会有垃圾代码,外部引入也会给服务器造成压力
6
主要使用在内容页和复杂度较高的页面
2.3 CSS 引入优先级
我们控制样式的精确度越高,它相对于其他控制的优先级也就更高。(范围越小,精确度越高)
也就是 内联样式表 > 内部样式表 ? 外部样式表 .
需要注意,内部样式表和外部样式表其实优先级是不确定的,当他们内部样式设置相同时,判断他们谁生效,主要是看谁是最后引入的。 但是,如果设置的是不同的,则看谁的内容优先级更高,则哪个生效。
3.CSS 语法
3.1 CSS 规则
一般 CSS 规则 由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。
每个属性有一个值。属性和值被冒号分开。
selector {property: value}
3.2 值的不同写法和单位
除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:
p { color: #ff0000; }
为了节约字节,我们可以使用 CSS 的缩写形式:
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值:
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。
但是在其他的情况下就不需要这么做了。
比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
3.3 记得写引号
提示:如果值为若干单词,则要给值加引号:
p {font-family: "sans serif";}
3.4 多重声明:
提示:如果要定义不止一个声明,则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。
最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。
然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,
当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样:
p {text-align:center; color:red;}
你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:
p {
text-align: center;
color: black;
font-family: arial;
}
3.5 空格和大小写
大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。
多重声明和空格的使用使得样式表更容易被编辑:
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不会影响 CSS 在浏览器的工作效果,
同样,与 XHTML 不同,CSS 对大小写不敏感。
不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。
4 CSS 基础设置
4.1 字体的设置
-
字体的设置
1
font-family
2
font-size
3
font-weight
4
font-style
4.1.1 font-family
font-family规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。
如果浏览器不支持第一个字体,则会尝试下一个。
也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。
浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称:
指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。
注意:使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;
这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。
p
{
font-family:"Times New Roman",Georgia,Serif;
}
值
描述
family-name,generic-family
用于某个元素的字体族名称或/及类族名称的一个优先表。默认值:取决于浏览器。
inherit
规定应该从父元素继承字体系列。
使用通用字体系列
如果你希望文档使用一种 sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:
body {font-family: sans-serif;}
这样用户代理就会从 sans-serif 字体系列中选择一个字体(如 Helvetica),并将其应用到 body 元素。
因为有继承,这种字体选择还将应用到 body 元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。
指定字体系列
除了使用通用的字体系列,您还可以通过 font-family 属性设置更具体的字体。
下面的例子为所有 h1 元素设置了 Georgia 字体:
h1 {font-family: Georgia;}
这样的规则同时会产生另外一个问题,如果用户代理上没有安装 Georgia 字体,就只能使用用户代理的默认字体来显示 h1 元素。
我们可以通过结合特定字体名和通用字体系列来解决这个问题:
h1 {font-family: Georgia, serif;}
如果读者没有安装 Georgia,但安装了 Times 字体(serif 字体系列中的一种字体),
用户代理就可能对 h1 元素使用 Times。
尽管 Times 与 Georgia 并不完全匹配,但至少足够接近。
因此,我们建议在所有 font-family 规则中都提供一个通用字体系列。
这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。
如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。
要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif 字体。
使用引号 您也许已经注意到了,上面的例子中使用了单引号。
只有当字体名中有一个或多个空格(比如 New York),
或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。
但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,
则需要使用该属性本身未使用的那种引号:
...
4.1.2 font-size
font-size 属性可设置字体的尺寸。
说明
该属性设置元素的字体大小。
注意,实际上它设置的是字体中字符框的高度;
实际的字符字形可能比这些框高或矮(通常会矮)。
各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%}
值
描述
xx-small,x-small,small,medium,large,x-large,xx-large
把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。默认值:medium。
smaller
把 font-size 设置为比父元素更小的尺寸。
larger
把 font-size 设置为比父元素更大的尺寸。
length
把 font-size 设置为一个固定的值。
%
把 font-size 设置为基于父元素的一个百分比值。
inherit
规定应该从父元素继承字体尺寸。
font-size 值可以是绝对或相对值。
绝对值:
1.将文本设置为指定的大小
2.不允许用户在所有浏览器中改变文本大小(不利于可用性)
3.绝对大小在确定了输出的物理尺寸时很有用
相对大小:
1.相对于周围的元素来设置大小
2.允许用户在浏览器改变文本大小
注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小,可以对文本大小进行完全控制:
实例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
在 Firefox, Chrome, and Safari 中,可以重新调整以上例子的文本大小,但是在 Internet Explorer 中不行。
虽然可以通过浏览器的缩放工具调整文本大小,但是这实际上是对整个页面的调整,而不仅限于文本。
使用 em 来设置字体大小 如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels。
W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。
在设置字体大小时,em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em:pixels/16=em
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)
实例
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
在上面的例子中,以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。
不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。
不幸的是,在 IE 中仍存在问题。在重设文本大小时,会比正常的尺寸更大或更小。
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:
实例
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
我们的代码非常有效。在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
4.1.3 font-weight
font-weight 属性设置文本的粗细。
说明
该属性用于设置显示元素的文本中所用的字体加粗。
数字值 400 相当于 关键字 normal,700 等价于 bold。
每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。
值
描述
normal
默认值。定义标准的字符。
bold
定义粗体字符。
bolder
定义更粗的字符。
lighter
定义更细的字符。
100-900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit
规定应该从父元素继承字体的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。
如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,
100 对应最细的字体变形,900 对应最粗的字体变形。
数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。
与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
实例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
4.1.4 font-style
font-style属性最常用于规定斜体文本。
该属性有三个值:
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
该属性设置使用斜体、倾斜或正常字体。
斜体字体通常定义为字体系列中的一个单独的字体。
理论上讲,用户代理可以根据正常字体计算一个斜体字体。
值
描述
normal
默认值。浏览器显示一个标准的字体样式。
italic
浏览器会显示一个斜体的字体样式。
oblique
浏览器会显示一个倾斜的字体样式。
inherit
规定应该从父元素继承字体样式。
4.2 文本的设置
-
文本的设置
1
color
2
text-align
3
line-height
4
text-decoration
5
text-indent
4.2.1 color
color 属性规定文本的颜色。
这个属性设置了一个元素的前景色(在 HTML 表现中,就是元素文本的颜色);
光栅图像不受 color 影响。
这个颜色还会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖。
body
{
color:red;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}
4.2.2 text-align
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。
通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;
不同用户代理可能会得到不同的结果。
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
4.2.3 line-height
line-height 属性设置行间的距离(行高)。
注释:不允许使用负值。
说明
该属性会影响行框的布局。
在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,
分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。
p.small {line-height:90%}
p.big {line-height:200%}
4.2.4 text-decoration
text-decoration属性规定添加到文本的修饰。
注释:修饰的颜色由 "color" 属性设置。
说明
这个属性允许对文本设置某种效果,如加下划线。
如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。
不要求用户代理支持 blink。
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
4.2.5 text-indent
text-indent属性规定文本块中首行文本的缩进。
注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。
注意:在 CSS 2.1 之前,text-indent 总是继承计算值,而不是声明值。
p
{
text-indent:50px;
}
4.3 背景的设置
-
背景的设置
1
background-color
2
background-image
3
background-repeat
4
background-position
5
background-attachment
4.3.1 background-color背景色
属性为元素设置背景色。
这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色:
p {background-color: gray;}
如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:
p {background-color: gray; padding: 20px;}
4.3.2 background-image背景图像
要把图像放入背景,需要使用 background-image 属性。
background-image 属性的默认值是 none,表示背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:
body {background-image: url(/i/eg_bg_04.gif);}
大多数背景都应用到 body 元素,不过并不仅限于此。
下面例子为一个段落应用了一个背景,而不会对文档的其他部分应用背景:
p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至可以为行内元素设置背景图像,下面的例子为一个链接设置了背景图像:
a.radio {background-image: url(/i/eg_bg_07.gif);}
4.3.3 background-repeat背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,
no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子:
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
4.3.4 background-position背景定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。
首先,可以使用一些关键字:top、bottom、left、right 和 center。
通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,
如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解,其作用如其名称所表明的。
例如,top right 使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字.
一个对应水平方向,另一个对应垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
下面是等价的位置关键字 :
单一关键字
等价的关键字
center
center center
top
top center 或 center top
bottom
bottom center 或 center bottom
right
right center 或 center right
left
left center 或 center left
百分数值 百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
这会导致图像适当放置,其中心与其元素的中心对齐。
换句话说,百分数值同时应用于元素和图像。
也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。
如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。
这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。
这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。
也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
4.3.5 background-attachment背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。
当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。
通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
你可能感兴趣的:(CSS 基础_第三天)
三菱PLC全套学习资料及应用手册
good2know
本文还有配套的精品资源,点击获取简介:三菱PLC作为工业自动化领域的核心设备,其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源,包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析,旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器(PLC)是工业自动化
移动端城市区县二级联动选择功能实现包
good2know
本文还有配套的精品资源,点击获取简介:本项目是一套为移动端设计的jQuery实现方案,用于简化用户在选择城市和区县时的流程。它包括所有必需文件:HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项,实现城市到区县的联动效果,支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用,并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
《极简思维》第三部分
小洋苏兮
整理你的人际关系如何改善人际关系?摘录:因为人际关系问题是人们生活中不快乐的主要原因。感想:感觉这个说的挺对,之前我总是埋头学习,不管舍友不管自己的合作伙伴的一些事情,但实际上,这学期关注了之后好多了摘录:“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说,人类就是建立在人脉关系上的。”感想:但是如果有时想的太多就不太好,要以一个开放的心态跟别
Spring进阶 - SpringMVC实现原理之DispatcherServlet处理请求的过程
倾听铃的声
后端 spring java mvc 开发语言 分布式
前文我们有了IOC的源码基础以及SpringMVC的基础,我们便可以进一步深入理解SpringMVC主要实现原理,包含DispatcherServlet的初始化过程和DispatcherServlet处理请求的过程的源码解析。本文是第二篇:DispatcherServlet处理请求的过程的源码解析。@pdaiSpring进阶-SpringMVC实现原理之DispatcherServlet处理请求的
JVM 内存模型深度解析:原子性、可见性与有序性的实现
练习时长两年半的程序员小胡
JVM 深度剖析:从面试考点到生产实践 jvm java 内存模型
在了解了JVM的基础架构和类加载机制后,我们需要进一步探索Java程序在多线程环境下的内存交互规则。JVM内存模型(JavaMemoryModel,JMM)定义了线程和主内存之间的抽象关系,它通过规范共享变量的访问方式,解决了多线程并发时的数据一致性问题。本文将从内存模型的核心目标出发,详解原子性、可见性、有序性的实现机制,以及volatile、synchronized等关键字在其中的作用。一、J
Flowable 高级扩展:自定义元素与性能优化实战
练习时长两年半的程序员小胡
Flowable 流程引擎实战指南 流程图 flowable BPMN 流程引擎 java
在前五篇文章中,我们从基础概念、流程设计、API实战、SpringBoot集成,到外部系统协同,逐步构建了Flowable的应用体系。但企业级复杂场景中,原生功能往往难以满足定制化需求——比如需要特殊的审批规则网关、与决策引擎联动实现动态路由,或是在高并发场景下优化流程引擎性能。本文将聚焦Flowable的高级扩展能力,详解如何自定义流程元素、集成规则引擎,并掌握大型系统中的性能调优策略。一、自定
互信息:理论框架、跨学科应用与前沿进展
大千AI助手
人工智能 Python # OTHER 人工智能 深度学习 算法 互信息 香农 通信 随机变量
1.起源与核心定义互信息(MutualInformation,MI)由克劳德·香农(ClaudeShannon)在1948年开创性论文《AMathematicalTheoryofCommunication》中首次提出,该论文奠定了现代信息论的基础。互信息用于量化两个随机变量之间的统计依赖关系,定义为:若已知一个随机变量的取值,能为另一个随机变量提供的信息量。数学上,对于离散随机变量XXX和YYY,
车载刷写架构 --- 刷写思考扩展
汽车电子实验室
电子电器架构——刷写方案 架构 开发语言 关于网关转发性能引起的思考 汽车中央控制单元HPC软件架构 车载诊断进阶篇
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师:做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是系统思考、大胆设计、小心求证;三是“一张纸制度”,也就是无论多么复杂的工作内容,要在一张纸上描述清楚;四是要坚决反对虎头蛇尾,反对繁文缛节,反对老
js操作样式
郝加升
DOM样式属性和方法:指定的元素,它的style有这么几个属性和方法:cssText:通过这个属性可以访问到元素的特性style设置的属性,并且可以直接赋值设置。removeProperty(属性名称):从样式中删除给定属性。setProperty(属性名称,值,权重):可以通过这个方法设置给定样式的同时设置其权重,可以传入”important”或者一个空字符串。获取计算后样式:window.ge
C++编程基础与面向对象概念解析
侯昂
面向对象编程 C++语法 函数 类与对象 继承与多态性
C++编程基础与面向对象概念解析背景简介C++是一种广泛使用的面向对象编程语言,它允许开发者创建高效、灵活且功能强大的程序。本文基于《C++Primer》一书的章节内容,深入解析C++的核心概念和面向对象编程原则,旨在帮助读者构建扎实的C++编程基础。面向对象编程的原则软件危机与进化介绍了软件危机的产生和软件进化的必要性,强调了面向对象编程(OOP)在应对这些问题中的优势。面向对象编程范式讨论了面
K8s常用的命令
尚未来-
运维 k8s
一、基础命令查看集群信息bashkubectlcluster-info#显示集群端点和服务信息查看节点bashkubectlgetnodes#列出所有节点kubectldescribenode#查看节点详细信息查看命名空间bashkubectlgetnamespaces#列出所有命名空间切换命名空间bashkubectlconfigset-context--current--namespace=二
Anaconda 和 Miniconda:功能详解与选择建议
古月฿
python入门 python conda
Anaconda和Miniconda详细介绍一、Anaconda的详细介绍1.什么是Anaconda?Anaconda是一个开源的包管理和环境管理工具,在数据科学、机器学习以及科学计算领域发挥着关键作用。它以Python和R语言为基础,为用户精心准备了大量预装库和工具,极大地缩短了搭建数据科学环境的时间。对于那些想要快速开展数据分析、模型训练等工作的人员来说,Anaconda就像是一个一站式的“数
Pandas:数据科学的超级瑞士军刀
科技林总
DeepSeek学AI 人工智能
**——从零基础到高效分析的进化指南**###**一、Pandas诞生:数据革命的救世主****2010年前的数据分析噩梦**:```python#传统Python处理表格数据data=[]forrowincsv_file:ifrow[3]>100androw[2]=="China":data.append(float(row[5])#代码冗长易错!```**核心痛点**:-Excel处理百万行崩
大数据之路:阿里巴巴大数据实践——大数据领域建模综述
为什么需要数据建模核心痛点数据冗余:不同业务重复存储相同数据(如用户基础信息),导致存储成本激增。计算资源浪费:未经聚合的明细数据直接参与计算(如全表扫描),消耗大量CPU/内存资源。数据一致性缺失:同一指标在不同业务线的口径差异(如“活跃用户”定义不同),引发决策冲突。开发效率低下:每次分析需重新编写复杂逻辑,无法复用已有模型。数据建模核心价值性能提升:分层设计(ODS→DWD→DWS→ADS)
学C++的五大惊人好处
为什么要学c++学c++有什么用学习c++的好处有1.中考可以加分2.高考可能直接录取3.就业广且工资高4.在未来30--50年c++一定是一个很受欢迎的职业5.c++成功的例子deepsick等AI智能C++语言兼备编程效率和编译运行效率的语言C++语言是C语言功能增强版,在c语言的基础上添加了面向对象编程和泛型编程的支持既继承了C语言高效,简洁,快速和可移植的传统,又具备类似Java、Go等其
Android 基础知识:Android 应用权限详解
流水mpc
android
这篇文章为大家系统的梳理一下Android权限相关的知识,在日常开发中,我们都用过权限,但是对于权限的一些细节我们可能掌握的还不够全面,这篇文章会全面的为大家介绍权限相关的知识。当然,本篇文章依然是参考了Google的官方文档:应用权限。本文目录一、认识Android权限(一)Android系统为什么需要权限?Android系统设置权限的目的是保护Android用户的隐私。对于用户的敏感数据And
Selenium基础教程
lemontree1945
selenium python 测试工具
1.Selenium环境安装1.1浏览器安装Chrome和ChromeDriver下载地址:https://googlechromelabs.github.io/chrome-for-testing/注意:驱动版本号要和浏览器版本号一致;安装后关闭浏览器自动更新:services.msc:打开系统服务找到和google相关的服务,全部修改为禁用1.2安装第三方库seleniumpipinstall
机器学习必备数学与编程指南:从入门到精通
a小胡哦
机器学习基础 机器学习 人工智能
一、机器学习核心数学基础1.线性代数(神经网络的基础)必须掌握:矩阵运算(乘法、转置、逆)向量空间与线性变换特征值分解与奇异值分解(SVD)为什么重要:神经网络本质就是矩阵运算学习技巧:用NumPy实际操作矩阵运算2.概率与统计(模型评估的关键)核心概念:条件概率与贝叶斯定理概率分布(正态、泊松、伯努利)假设检验与p值应用场景:朴素贝叶斯、A/B测试3.微积分(优化算法的基础)重点掌握:导数与偏导
Android 媒体播放开发完全指南
安卓开发者
Android Jetpack android 媒体 python
引言在当今移动应用生态中,媒体播放功能已成为许多应用的核心组成部分。无论是音乐流媒体应用、视频平台、播客客户端还是游戏应用,都需要强大的媒体播放能力。Android平台提供了丰富的API来支持各种媒体播放场景。本文将全面介绍Android媒体播放的开发技术,从基础到高级功能实现。一、Android媒体播放基础1.1支持的媒体格式Android原生支持多种媒体格式:音频:MP3、AAC、FLAC、W
Android通知(Notification)全面解析:从基础到高级应用
一、Android通知概述通知(Notification)是Android系统中用于在应用之外向用户传递信息的重要机制。当应用需要告知用户某些事件或信息时,可以通过通知在状态栏显示图标,用户下拉通知栏即可查看详细信息。这种机制几乎被所有现代应用采用,用于推送新闻、消息、广告等内容3。与Toast相比,Notification的优势在于:可以长时间停留在通知栏,适合内容较多且需要持久展示的信息支持丰
镜中往事(79)大漠雪(上)
Drosia
“诸位,目前西都上下都在搜寻我们洪盟成员,我私下见过当今西都主事,对方是一个非常爱民的好官,他一定能够让百姓过上好日子,于是我决定,我们洪盟需要去别处发展壮大。”槲枫的眼中有不容动摇的坚定。几位元老都没有说话。“既然盟主决定迁出西都,那洪盟的未来在哪里呢?”“南下,南方物资丰富,商业城市多,可以为洪盟打下好基础。”在场的人几乎都同意了这个建议。“哥哥,有消息说洪盟要迁出西都?”云芙刚刚从洪盟的工具
免费编程课程大汇总:从入门到精通的一站式资源
大力出奇迹985
人工智能 大数据
在数字化时代,编程已成为一项至关重要的技能,无论是为了职业发展还是个人兴趣,学习编程都极具价值。本文精心汇总了丰富的免费编程课程资源,涵盖从基础入门到精通的各个阶段。通过全面介绍如Coursera、edX等在线学习平台,Codecademy、freeCodeCamp等交互式学习网站,以及B站、网易云课堂等视频课程平台的免费课程,为编程学习者提供了一站式的资源指南,帮助读者轻松开启编程学习之旅,逐步
AI 生成虚拟宠物:24 小时陪你聊天解闷
大力出奇迹985
人工智能 宠物
本文围绕AI生成虚拟宠物展开,介绍这类依托人工智能技术诞生的虚拟伙伴,能实现24小时不间断陪伴聊天,为人们解闷。文中详细阐述其技术基础,包括自然语言处理、机器学习等;分析多样功能,如个性化互动、情绪回应等;探讨在独居人群、压力大者等不同群体中的应用场景,最后总结其为人们生活带来的积极影响及未来发展潜力,展现AI虚拟宠物在陪伴领域的独特价值。一、AI生成虚拟宠物的诞生背景与技术基石在快节奏的现代社会
用代码生成艺术字:设计个性化海报的秘密
本文围绕“用代码生成艺术字:设计个性化海报的秘密”展开,先概述代码生成艺术字在海报设计中的独特价值,接着介绍常用的代码工具(如HTML、CSS、JavaScript等),详细阐述从构思到实现的完整流程,包括字体样式设计、动态效果添加等,还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势,为设计师提供打造个性化海报的实用指南,助力提升海报设计的独特性与吸引力,符合搜索引擎SEO标准
用 Python 开发小游戏:零基础也能做出《贪吃蛇》
本文专为零基础学习者打造,详细介绍如何用Python开发经典小游戏《贪吃蛇》。无需复杂编程知识,从环境搭建到代码编写、功能实现,逐步讲解核心逻辑与操作。涵盖Pygame库的基础运用、游戏界面设计、蛇的移动与食物生成规则等,让新手能按步骤完成开发,同时融入SEO优化要点,帮助读者轻松入门Python游戏开发,体验从0到1做出游戏的乐趣。一、为什么选择用Python开发《贪吃蛇》对于零基础学习者来说,
文科生转行编程:从月薪 3 千到 2 万的真实经历
在当下就业市场中,文科生往往面临诸多挑战,薪资水平也不尽如人意。然而,有不少勇敢的文科生成功实现了向编程领域的转行,薪资更是实现了从月薪3千到2万的飞跃。本文将深入剖析文科生转行编程的真实经历,从最初对现状的不满萌生出转行念头,到如何艰难地开启学习之旅,克服基础薄弱、思维转换难等重重困难,再到求职时凭借策略与努力获得宝贵机会,以及入职后持续学习保持竞争力。希望通过这些真实历程,为有志于转行编程的文
AI人工智能中的数据挖掘:提升智能决策能力
AI人工智能中的数据挖掘:提升智能决策能力关键词:数据挖掘、人工智能、机器学习、智能决策、数据分析、特征工程、模型优化摘要:本文深入探讨了数据挖掘在人工智能领域中的核心作用,重点分析了如何通过数据挖掘技术提升智能决策能力。文章从基础概念出发,详细介绍了数据挖掘的关键算法、数学模型和实际应用场景,并通过Python代码示例展示了数据挖掘的全流程。最后,文章展望了数据挖掘技术的未来发展趋势和面临的挑战
lesson20:Python函数的标注
你的电影很有趣
python 开发语言
目录引言:为什么函数标注是现代Python开发的必备技能一、函数标注的基础语法1.1参数与返回值标注1.2支持的标注类型1.3Python3.9+的重大改进:标准集合泛型二、高级标注技巧与最佳实践2.1复杂参数结构标注2.2函数类型与回调标注2.3变量注解与类型别名三、静态类型检查工具应用3.1mypy:最流行的类型检查器3.2Pyright与IDE集成3.3运行时类型验证四、函数标注的工程价值与
K8S 常用命令全解析:高效管理容器化集群
恩爸编程
docker kubernetes 容器 k8s常用命令 k8s有哪些常用命令 k8s命令有哪些 K8S常用命令有哪些
K8S常用命令全解析:高效管理容器化集群一、引言Kubernetes(K8S)作为强大的容器编排平台,其丰富的命令行工具(kubectl)为用户提供了便捷的方式来管理集群中的各种资源。熟练掌握K8S常用命令对于开发人员和运维人员至关重要,能够有效提高容器化应用的部署、监控与维护效率。本文将详细介绍一些K8S常用命令及其使用案例。二、基础资源操作命令(一)kubectlcreate功能:用于创建K8
前端面试每日 3+1 —— 第39天
浪子神剑
今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么?[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么?《论语》,曾子曰:“吾日三省吾身”(我每天多次反省自己)。前端面试每日3+1题,以面试题来驱动学习,每天进步一点!让努力成为一种习惯,让奋斗成为一种享受!欢迎在Iss
TOMCAT在POST方法提交参数丢失问题
357029540
java tomcat jsp
摘自http://my.oschina.net/luckyi/blog/213209
昨天在解决一个BUG时发现一个奇怪的问题,一个AJAX提交数据在之前都是木有问题的,突然提交出错影响其他处理流程。
检查时发现页面处理数据较多,起初以为是提交顺序不正确修改后发现不是由此问题引起。于是删除掉一部分数据进行提交,较少数据能够提交成功。
恢复较多数据后跟踪提交FORM DATA ,发现数
在MyEclipse中增加JSP模板 删除-2008-08-18
ljy325
jsp xml MyEclipse
在D:\Program Files\MyEclipse 6.0\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\jsp 目录下找到Jsp.vtl,复制一份,重命名为jsp2.vtl,然后把里面的内容修改为自己想要的格式,保存。
然后在 D:\Progr
JavaScript常用验证脚本总结
eksliang
JavaScript javaScript表单验证
转载请出自出处:http://eksliang.iteye.com/blog/2098985
下面这些验证脚本,是我在这几年开发中的总结,今天把他放出来,也算是一种分享吧,现在在我的项目中也在用!包括日期验证、比较,非空验证、身份证验证、数值验证、Email验证、电话验证等等...!
&nb
微软BI(4)
18289753290
微软BI SSIS
1)
Q:查看ssis里面某个控件输出的结果:
A MessageBox.Show(Dts.Variables["v_lastTimestamp"].Value.ToString());
这是我们在包里面定义的变量
2):在关联目的端表的时候如果是一对多的关系,一定要选择唯一的那个键作为关联字段。
3)
Q:ssis里面如果将多个数据源的数据插入目的端一
定时对大数据量的表进行分表对数据备份
酷的飞上天空
大数据量
工作中遇到数据库中一个表的数据量比较大,属于日志表。正常情况下是不会有查询操作的,但如果不进行分表数据太多,执行一条简单sql语句要等好几分钟。。
分表工具:linux的shell + mysql自身提供的管理命令
原理:使用一个和原表数据结构一样的表,替换原表。
linux shell内容如下:
=======================开始 
本质的描述与因材施教
永夜-极光
感想 随笔
不管碰到什么事,我都下意识的想去探索本质,找寻一个最形象的描述方式。
我坚信,世界上对一件事物的描述和解释,肯定有一种最形象,最贴近本质,最容易让人理解
&
很迷茫。。。
随便小屋
随笔
小弟我今年研一,也是从事的咱们现在最流行的专业(计算机)。本科三流学校,为了能有个更好的跳板,进入了考研大军,非常有幸能进入研究生的行业(具体学校就不说了,怕把学校的名誉给损了)。
先说一下自身的条件,本科专业软件工程。主要学习就是软件开发,几乎和计算机没有什么区别。因为学校本身三流,也就是让老师带着学生学点东西,然后让学生毕业就行了。对专业性的东西了解的非常浅。就那学的语言来说
23种设计模式的意图和适用范围
aijuans
设计模式
Factory Method 意图 定义一个用于创建对象的接口,让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。 适用性 当一个类不知道它所必须创建的对象的类的时候。 当一个类希望由它的子类来指定它所创建的对象的时候。 当类将创建对象的职责委托给多个帮助子类中的某一个,并且你希望将哪一个帮助子类是代理者这一信息局部化的时候。
Abstr
Java中的synchronized和volatile
aoyouzi
java volatile synchronized
说到Java的线程同步问题肯定要说到两个关键字synchronized和volatile。说到这两个关键字,又要说道JVM的内存模型。JVM里内存分为main memory和working memory。 Main memory是所有线程共享的,working memory则是线程的工作内存,它保存有部分main memory变量的拷贝,对这些变量的更新直接发生在working memo
js数组的操作和this关键字
百合不是茶
js 数组操作 this关键字
js数组的操作;
一:数组的创建:
1、数组的创建
var array = new Array(); //创建一个数组
var array = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]
别人的阿里面试感悟
bijian1013
面试分享 工作感悟 阿里面试
原文如下:http://greemranqq.iteye.com/blog/2007170
一直做企业系统,虽然也自己一直学习技术,但是感觉还是有所欠缺,准备花几个月的时间,把互联网的东西,以及一些基础更加的深入透析,结果这次比较意外,有点突然,下面分享一下感受吧!
&nb
淘宝的测试框架Itest
Bill_chen
spring maven 框架 单元测试 JUnit
Itest测试框架是TaoBao测试部门开发的一套单元测试框架,以Junit4为核心,
集合DbUnit、Unitils等主流测试框架,应该算是比较好用的了。
近期项目中用了下,有关itest的具体使用如下:
1.在Maven中引入itest框架:
<dependency>
<groupId>com.taobao.test</groupId&g
【Java多线程二】多路条件解决生产者消费者问题
bit1129
java多线程
package com.tom;
import java.util.LinkedList;
import java.util.Queue;
import java.util.concurrent.ThreadLocalRandom;
import java.util.concurrent.locks.Condition;
import java.util.concurrent.loc
汉字转拼音pinyin4j
白糖_
pinyin4j
以前在项目中遇到汉字转拼音的情况,于是在网上找到了pinyin4j这个工具包,非常有用,别的不说了,直接下代码:
import java.util.HashSet;
import java.util.Set;
import net.sourceforge.pinyin4j.PinyinHelper;
import net.sourceforge.pinyin
org.hibernate.TransactionException: JDBC begin failed解决方案
bozch
ssh 数据库异常 DBCP
org.hibernate.TransactionException: JDBC begin failed: at org.hibernate.transaction.JDBCTransaction.begin(JDBCTransaction.java:68) at org.hibernate.impl.SessionImp
java-并查集(Disjoint-set)-将多个集合合并成没有交集的集合
bylijinnan
java
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.ut
Java PrintWriter打印乱码
chenbowen00
java
一个小程序读写文件,发现PrintWriter输出后文件存在乱码,解决办法主要统一输入输出流编码格式。
读文件:
BufferedReader
从字符输入流中读取文本,缓冲各个字符,从而提供字符、数组和行的高效读取。
可以指定缓冲区的大小,或者可使用默认的大小。大多数情况下,默认值就足够大了。
通常,Reader 所作的每个读取请求都会导致对基础字符或字节流进行相应的读取请求。因
[天气与气候]极端气候环境
comsci
环境
如果空间环境出现异变...外星文明并未出现,而只是用某种气象武器对地球的气候系统进行攻击,并挑唆地球国家间的战争,经过一段时间的准备...最大限度的削弱地球文明的整体力量,然后再进行入侵......
那么地球上的国家应该做什么样的防备工作呢?
&n
oracle order by与union一起使用的用法
daizj
UNION oracle order by
当使用union操作时,排序语句必须放在最后面才正确,如下:
只能在union的最后一个子查询中使用order by,而这个order by是针对整个unioning后的结果集的。So:
如果unoin的几个子查询列名不同,如
Sql代码
select supplier_id, supplier_name
from suppliers
UNI
zeus持久层读写分离单元测试
deng520159
单元测试
本文是zeus读写分离单元测试,距离分库分表,只有一步了.上代码:
1.ZeusMasterSlaveTest.java
package com.dengliang.zeus.webdemo.test;
import java.util.ArrayList;
import java.util.List;
import org.junit.Assert;
import org.j
Yii 截取字符串(UTF-8) 使用组件
dcj3sjt126com
yii
1.将Helper.php放进protected\components文件夹下。
2.调用方法:
Helper::truncate_utf8_string($content,20,false); //不显示省略号 Helper::truncate_utf8_string($content,20); //显示省略号
&n
安装memcache及php扩展
dcj3sjt126com
PHP
安装memcache tar zxvf memcache-2.2.5.tgz cd memcache-2.2.5/ /usr/local/php/bin/phpize (?) ./configure --with-php-confi
JsonObject 处理日期
feifeilinlin521
java json JsonOjbect JsonArray JSONException
写这边文章的初衷就是遇到了json在转换日期格式出现了异常 net.sf.json.JSONException: java.lang.reflect.InvocationTargetException 原因是当你用Map接收数据库返回了java.sql.Date 日期的数据进行json转换出的问题话不多说 直接上代码
&n
Ehcache(06)——监听器
234390216
监听器 listener ehcache
监听器
Ehcache中监听器有两种,监听CacheManager的CacheManagerEventListener和监听Cache的CacheEventListener。在Ehcache中,Listener是通过对应的监听器工厂来生产和发生作用的。下面我们将来介绍一下这两种类型的监听器。
activiti 自带设计器中chrome 34版本不能打开bug的解决
jackyrong
Activiti
在acitivti modeler中,如果是chrome 34,则不能打开该设计器,其他浏览器可以,
经证实为bug,参考
http://forums.activiti.org/content/activiti-modeler-doesnt-work-chrome-v34
修改为,找到
oryx.debug.js
在最头部增加
if (!Document.
微信收货地址共享接口-终极解决
laotu5i0
微信开发
最近要接入微信的收货地址共享接口,总是不成功,折腾了好几天,实在没办法网上搜到的帖子也是骂声一片。我把我碰到并解决问题的过程分享出来,希望能给微信的接口文档起到一个辅助作用,让后面进来的开发者能快速的接入,而不需要像我们一样苦逼的浪费好几天,甚至一周的青春。各种羞辱、谩骂的话就不说了,本人还算文明。
如果你能搜到本贴,说明你已经碰到了各种 ed
关于人才
netkiller.github.com
工作 面试 招聘 netkiller 人才
关于人才
每个月我都会接到许多猎头的电话,有些猎头比较专业,但绝大多数在我看来与猎头二字还是有很大差距的。 与猎头接触多了,自然也了解了他们的工作,包括操作手法,总体上国内的猎头行业还处在初级阶段。
总结就是“盲目推荐,以量取胜”。
目前现状
许多从事人力资源工作的人,根本不懂得怎么找人才。处在人才找不到企业,企业找不到人才的尴尬处境。
企业招聘,通常是需要用人的部门提出招聘条件,由人
搭建 CentOS 6 服务器 - 目录
rensanning
centos
(1) 安装CentOS
ISO(desktop/minimal)、Cloud(AWS/阿里云)、Virtualization(VMWare、VirtualBox)
详细内容
(2) Linux常用命令
cd、ls、rm、chmod......
详细内容
(3) 初始环境设置
用户管理、网络设置、安全设置......
详细内容
(4) 常驻服务Daemon
【求助】mongoDB无法更新主键
toknowme
mongodb
Query query = new Query(); query.addCriteria(new Criteria("_id").is(o.getId())); &n
jquery 页面滚动到底部自动加载插件集合
xp9802
jquery
很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件:
1. jQuery ScrollPagination
jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。
2. jQuery Screw
S