CSS学习笔记[Web开发]

web前端开发html5+css3(入门学习笔记)(练习题) 图片的列表、京东左侧导航、某某某的列表 阅读详情

CSS学习

本文为学习笔记,参考菜鸟和w3c

CSS 简介

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

CSS 用于定义网页的样式,包括针对不同设备和屏幕尺寸的设计和布局。

  • CSS 指的是层叠样式表* (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局
  • 外部样式表存储在 CSS 文件中 也称级联样式表。

一张 HTML 页面 可以有 多个样式

下面是一张提供了四个不同样式表的 HTML 页面。请单击下面的样式表链接,来查看不同的样式:

样式定义通常保存在外部 .css 文件中。

通过使用外部样式表文件,只需更改一个文件即可更改整个网站的外观!

CSS 插入

有三种插入样式表的方法:

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

外部 CSS

通过使用外部样式表,您只需修改一个文件即可改变整个网站的外观!

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

“mystyle.css” 是这样的:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

**注意:**请勿在属性值和单位之间添加空格(例如 margin-left: 20 px;)。正确的写法是:margin-left: 20px;

内部 CSS

如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义

行内 CSS

行内样式(也称内联样式)可用于为单个元素应用唯一的样式。

如需使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

行内样式在相关元素的 “style” 属性中定义

**提示:**行内样式失去了样式表的许多优点(通过将内容与呈现混合在一起)。请谨慎使用此方法。

多个样式表

如果在不同样式表中为同一选择器(元素)定义了一些属性,则将使用最后读取的样式表中的值。

层叠顺序

当为某个 HTML 元素指定了多个样式时,会使用哪种样式呢?

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表,其中第一优先级最高:

  1. 行内样式(在 HTML 元素中)
  2. 外部和内部样式表(在 head 部分)
  3. 浏览器默认样式

因此,行内样式具有最高优先级,并且将覆盖外部和内部样式以及浏览器默认样式。

CSS 语法

请添加图片描述

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。

多条 CSS 声明用分号分隔,声明块用花括号括起来。

实例

在此例中,所有 <p> 元素都将居中对齐,并带有红色文本颜色:

p {
color: red;
text-align: center;
}

例子解释

  • p 是 CSS 中的选择器(它指向要设置样式的 HTML 元素:<p>)。
  • color 是属性,red 是属性值
  • text-align 是属性,center 是属性值

CSS 选择器

CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类:

  • 简单选择器(根据名称、id、类来选取元素)
  • 组合器选择器(根据它们之间的特定关系来选取元素)
  • 伪类选择器(根据特定状态选取元素)
  • 伪元素选择器(选取元素的一部分并设置其样式)
  • 属性选择器(根据属性或属性值来选取元素)
所有简单的 CSS 选择器例子例子描述
.classro选取所有 class=“intro” 的元素。
#id#firstname选取 id=“firstname” 的那个元素。
**选取所有元素。
elementp选取所有 <p> 元素。
element,element,…div, p选取所有 <div> 元素和所有 <p> 元素。

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例:点击跳转

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!

要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。

实例

这条 CSS 规则将应用于 id=“para1” 的 HTML 元素:

<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>

</body>

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。

**注意:**类名不能以数字开头!

实例

在此例中,所有带有 class=“center” 的 HTML 元素将为红色且居中对齐:

<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 

</body>

还可以指定只有特定的 HTML 元素会受类的影响。

在这个例子中,只有具有 class=“center” 的 <p> 元素会居中对齐:

<style>
p.center {
text-align: center;
color: red;
}
</style>

HTML 元素也可以引用多个类。

在这个例子中,

元素将根据 class=“center” 和 class=“large” 进行样式设置:

<p class="center large">这个段落引用两个类。</p>

CSS 通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素。

实例

下面的 CSS 规则会影响页面上的每个 HTML 元素:

* {
  text-align: center;
  color: blue;
}

CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

多个元素具有相同的样式定义最好对选择器进行分组,最大程度地缩减代码。

如需对选择器进行分组,请用逗号来分隔每个选择器。

请看下面的 CSS 代码(h1、h2 和 p 元素具有相同的样式定义):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}
h1, h2, p {
text-align: center;
color: red;
}

补充:

CSS 后代选择器

我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:

h1 em {color:red;}
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>

<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>

当然,您也可以在 h1 中找到的每个 em 元素上放一个 class 属性,但是显然,后代选择器的效率更高。

CSS 子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

CSS 相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。

请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;color:red;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

相邻兄弟结合符还可以结合其他结合符:

html > body table + ul {margin-top:20px;}

这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。

CSS 注释

注释用于解释代码,以后在您编辑源代码时可能会有所帮助。

浏览器会忽略注释。

注释能横跨多行。

位于 <style> 元素内的 CSS 注释,以 /* 开始,以 */ 结束:

CSS 颜色

指定颜色是通过使用预定义的颜色名称,或 RGB、HEX、HSL、RGBA、HSLA 值。

颜色名称

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

CSS/HTML 支持140 种标准颜色名。

RGB 颜色

rgb(*red*, *green*, *blue*)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

RGBA 值

RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。

rgba(*red*, *green*, *blue*, *alpha*)

alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字

HEX 颜色

在 CSS 中,可以使用以下格式的十六进制值指定颜色:

#rrggbb

其中 rr(红色)、gg(绿色)和 bb(蓝色)是介于 00 和 ff 之间的十六进制值(与十进制 0-255 相同)。

HSL 颜色

在 CSS 中,可以使用色相、饱和度和明度(HSL)来指定颜色,格式如下:

hsla(*hue*, *saturation*, *lightness*)

色相(hue)是色轮上从 0 到 360 的度数。0 是红色,120 是绿色,240 是蓝色。

饱和度(saturation)是一个百分比值,0% 表示灰色阴影,而 100% 是全色。

亮度(lightness)也是百分比,0% 是黑色,50% 是既不明也不暗,100%是白色。

HSLA 值

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。

HSLA 颜色值指定为:

hsla(*hue*, *saturation*, *lightness*, *alpha*)

alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字

背景色

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>

China

China is a great country!

文本颜色

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

China

China is a great country!

China, officially the People's Republic of China...

边框颜色

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Hello World

Hello World

Hello World

CSS 背景

CSS 背景属性用于定义元素的背景效果。

背景属性

属性说明
background-color指定元素的背景色
background-image属性指定用作元素背景的图像。默认情况下,属性在水平和垂直方向上都重复图像。
注意:使用背景图像时,请使用不会干扰文本的图像。
background-repeat属性指定用作元素背景的图像的重复效果。
background-attachment属性指定背景图像是应该滚动还是固定的(不会随页面的其余部分一起滚动)
background-position属性用于指定背景图像的位置。
background-size规定背景图像的尺寸。
background-origin规定在何处放置背景图像。
background-clip规定背景的绘制区域。
opacity指定元素的透明度。取值范围为 0.0 - 1.0。值越低,越透明

background-color 页面的背景色设置如下:

body {
background-color: lightblue;
}

background-image 页面的背景图像可以像这样设置:

body {
background-image: url("paper.gif");
}

background-repeat: repeat-x,否则它们看起来会很奇怪,这种图像仅在水平方向重复,则背景看起来会更好:

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

background-repeat: no-repeat; 背景图像仅显示一次:

body {
background-image: url("tree.png");
background-repeat: no-repeat;
}

background-position; 把背景图片放在右上角:

body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}

固定背景图像:fixed 随页面的其余部分一起滚动:scroll

body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

背景简写

如需缩短代码,也可以在一个属性中指定所有背景属性。它被称为简写属性。

使用简写属性 background

在使用简写属性时,属性值的顺序为:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
body {
background: #ffffff url("tree.png") no-repeat right top;
}

CSS 框模型

所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。下图展示了框模型:
在这里插入图片描述

  • 内容 - 框的内容,其中显示文本和图像。
  • 内边距 - 清除内容周围的区域。内边距是透明的。
  • 边框 - 围绕内边距和内容的边框。
  • 外边距 - 清除边界外的区域。外边距是透明的。

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

**提示:**背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

元素的总宽度应该这样计算:

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算:

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:
在这里插入图片描述

CSS 边框

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

border-style 属性指定要显示的边框类型。属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。

允许以下值:

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

点状边框

虚线边框。

实线边框。

双线边框。

凹槽边框。

垄状边框。

3D inset 边框。

3D outset 边框。

无边框。

隐藏边框。

混合边框。

border-width 属性指定四个边框的宽度。属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)

可以将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thin、medium 或 thick

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px,右边框 10px,下边框 4px,左边框 35px */
}

border-color 属性用于设置四个边框的颜色。属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。

可以通过以下方式设置颜色:

  • name - 指定颜色名,比如 “red”
  • HEX - 指定十六进制值,比如 “#ff0000”
  • RGB - 指定 RGB 值,比如 “rgb(255,0,0)”
  • HSL - 指定 HSL 值,比如 “hsl(0, 100%, 50%)”
  • transparent

**注释:**如果未设置 border-color,则它将继承元素的颜色。

单独的边可以为每一侧指定不同的边框。

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

如果 border-style 属性设置四个值:

border-style: dotted solid double dashed;

  • 上边框是虚线
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

如果 border-style 属性设置三个值:

border-style: dotted solid double;

  • 上边框是虚线
  • 右和左边框是实线
  • 下边框是双线

如果 border-style 属性设置两个值:

border-style: dotted solid;

  • 上和下边框是虚线
  • 右和左边框是实线

如果 border-style 属性设置一个值:

border-style: dotted;

  • 四条边均为虚线

边框属性简写

为了缩减代码,也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性:

  • border-width
  • border-style(必需)
  • border-color
p {
border: 5px solid red;
}

左边框

p {
border-left: 6px solid red;
background-color: lightgrey;
}

下边框

p {
border-bottom: 6px solid red;
background-color: lightgrey;
}

圆角边框

border-radius 属性用于向元素添加圆角边框

p {
  border: 2px solid red;
  border-radius: 5px;
}

CSS 外边距

CSS margin 属性用于在任何定义的边框之外,为元素周围创建空间。

通过 CSS,您可以完全控制外边距。有一些属性可用于设置元素每侧(上、右、下和左)的外边距。

CSS 拥有用于为元素的每一侧指定外边距的属性:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

所有外边距属性都可以设置以下值:

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

**提示:**允许负值。

Margin - 简写属性

为了缩减代码,可以在一个属性中指定所有外边距属性。

margin 属性是以下各外边距属性的简写属性:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

如果 margin 属性有四个值:

  • margin: 25px 50px 75px 100px;

    • 上外边距是 25px
    • 右外边距是 50px
    • 下外边距是 75px
    • 左外边距是 100px

如果 margin 属性设置三个值:

  • margin: 25px 50px 75px;

    • 上外边距是 25px
    • 右和左外边距是 50px
    • 下外边距是 75px

如果 margin 属性设置两个值:

  • margin: 25px 50px;

    • 上和下外边距是 25px
    • 右和左外边距是 50px

如果 margin 属性设置了一个值:

  • margin: 25px;

    • 所有四个外边距都是 25px

auto 值

您可以将 margin 属性设置为 auto,以使元素在其容器中水平居中。

然后,该元素将占据指定的宽度,并且剩余空间将在左右边界之间平均分配。

使用 margin: auto:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

inherit 值

本例使 <p class=“ex1”> 元素的左外边距继承自父元素(<div>):

使用 inherit 值:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS,您可以完全控制内边距(填充)。有一些属性可以为元素的每一侧(上、右、下和左侧)设置内边距。

CSS 拥有用于为元素的每一侧指定内边距的属性:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

所有内边距属性都可以设置以下值:

  • length - 以 px、pt、cm 等单位指定内边距
  • % - 指定以包含元素宽度的百分比计的内边距
  • inherit - 指定应从父元素继承内边距

**提示:**不允许负值。

Padding - 简写属性

为了缩减代码,可以在一个属性中指定所有内边距属性。

padding 属性是以下各内边距属性的简写属性:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

内边距和元素宽度

CSS width 属性指定元素内容区域的宽度。内容区域是元素(盒模型)的内边距、边框和外边距内的部分。

因此,如果元素拥有指定的宽度,则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

实例

在这里,<div> 元素的宽度为 300px。但是,<div> 元素的实际宽度将是 350px(300px + 左内边距 25px + 右内边距 25px):

div {
width: 300px;
padding: 25px;
}

CSS 尺寸属性

属性描述
height设置元素的高度。
width设置元素的宽度。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值:

  • auto - 默认。浏览器计算高度和宽度。
  • *length* - 以 px、cm 等定义高度/宽度。
  • % - 以包含块的百分比定义高度/宽度。
  • initial - 将高度/宽度设置为默认值。
  • inherit - 从其父值继承高度/宽度。

max-width 属性用于设置元素的最大宽度。

可以用长度值(例如 px、cm 等)或包含块的百分比(%)来指定 max-width(最大宽度),也可以将其设置为 none(默认值。意味着没有最大宽度)。

若设置 width:500px; 当浏览器窗口小于元素的宽度(500px)时,浏览器会将水平滚动条添加到页面。

若设置 max-width:500px; 当浏览器窗口小于元素的宽度(500px)时,元素宽度将随浏览器大小改变。

**提示:**将浏览器窗口拖动到小于500px的宽度,以查看两个 div 之间的区别!

CSS轮廓

轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素。

CSS 拥有如下轮廓属性:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

**注意:**轮廓与边框不同!不同之处在于:轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。

CSS 轮廓样式

outline-style 属性指定轮廓的样式,并可设置如下值:

  • dotted - 定义点状的轮廓。
  • dashed - 定义虚线的轮廓。
  • solid - 定义实线的轮廓。
  • double - 定义双线的轮廓。
  • groove - 定义 3D 凹槽轮廓。
  • ridge - 定义 3D 凸槽轮廓。
  • inset - 定义 3D 凹边轮廓。
  • outset - 定义 3D 凸边轮廓。
  • none - 定义无轮廓。
  • hidden - 定义隐藏的轮廓。

CSS 轮廓宽度

outline-width 属性指定轮廓的宽度,并可设置如下值之一:

  • thin(通常为 1px)
  • medium(通常为 3px)
  • thick (通常为 5px)
  • 特定尺寸(以 px、pt、cm、em 计)

CSS 轮廓颜色

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色:

  • name - 指定颜色名,比如 “red”
  • HEX - 指定十六进制值,比如 “#ff0000”
  • RGB - 指定 RGB 值,比如 “rgb(255,0,0)”
  • HSL - 指定 HSL 值,比如 “hsl(0, 100%, 50%)”
  • invert - 执行颜色反转(确保轮廓可见,无论是什么颜色背景)

反转颜色

使用 outline-color: invert执行颜色反转。这样可以确保无论颜色背景如何,轮廓都是可见的

CSS 轮廓简写

outline 属性是用于设置以下各个轮廓属性的简写属性:

  • outline-width
  • outline-style(必需)
  • outline-color

从上面的列表中,outline 属性可指定一个、两个或三个值。值的顺序无关紧要。

CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

CSS 文本

文本颜色

color 属性用于设置文本的颜色。

background-color背景色

文本对齐

水平对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐,或居中对齐 :left,right,center

当 text-align 属性设置为 “justify” 后,将拉伸每一行,以使每一行具有相等的宽度,并且左右边距是直的

垂直对齐

vertical-align 属性设置元素的垂直对齐方式:top,middle,bottom

文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向:

文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线:

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

文本转换

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母,或将每个单词的首字母大写:uppercase,lowercase,capitalize

文字间距

文字缩进

text-indent 属性用于指定文本第一行的缩进:

p {
  text-indent: 50px;
}

字母间距

letter-spacing 属性用于指定文本中字符之间的间距。

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

行高

line-height 属性用于指定行之间的间距:

字间距

word-spacing 属性用于指定文本中单词之间的间距。

空白

white-space 属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行:

p {
  white-space: nowrap;
}

文本阴影

text-shadow 属性为文本添加阴影。

指定水平阴影(2px)垂直阴影(2px)模糊效果(5px)阴影颜色(红色):

h1 {
  text-shadow: 2px 2px 5px red;
}

CSS 字体

通用字体族

在 CSS 中,有五个通用字体族:

  • 衬线字体(Serif)- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体(Sans-serif)- 字体线条简洁(没有小笔画)。它们营造出现代而简约的外观。
  • 等宽字体(Monospace)- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体(Cursive)- 模仿了人类的笔迹。
  • 幻想字体(Fantasy)- 是装饰性/俏皮的字体。

**提示:**在计算机屏幕上,无衬线字体被认为比衬线字体更易于阅读。

通用字体族字体名称实例
SerifTimes New Roman
Georgia
Garamond
Sans-serifArial
Verdana
Helvetica
MonospaceCourier New
Lucida Console
Monaco
CursiveBrush Script MT
Lucida Handwriting
FantasyCopperplate
Papyrus

font-family 属性

在 CSS 中,我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为“后备”系统,以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始,并以通用系列结束(如果没有其他可用字体,则让浏览器选择通用系列中的相似字体)。字体名称应以逗号分隔。

.p1 {
  font-family: "Times New Roman", Times, serif;
}

字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值:

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”(倾斜与斜体非常相似,但支持较少)

字体粗细

font-weight 属性指定字体的粗细:

normal,lighter,bold和数字

字体变体

font-variant 属性指定是否以 small-caps 字体(小型大写字母)显示文本。

在 small-caps 字体中,所有小写字母都将转换为大写字母。但是,转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

My name is Bill Gates.

字体大小

font-size 属性设置文本的大小。

在网页设计中,能够管理文本大小很重要。但是,不应使用调整字体大小来使段落看起来像标题,或是使标题看起来像段落。

请始终使用正确的 HTML 标签,例如 <h1> - <h6> 用于标题,而 <p> 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸:

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小(可访问性不佳)
  • 当输出的物理尺寸已知时,绝对尺寸很有用

相对尺寸:

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改文本大小

**注释:**如果您没有指定字体大小,则普通文本(如段落)的默认大小为 16px(16px = 1em)。

以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小:

h1 {
  font-size: 40px;
}

**提示:**如果您使用了像素,则仍然可以使用缩放工具来调整整个页面的大小。

用 em 设置字体大小

为了允许用户调整文本大小(在浏览器菜单中),许多开发人员使用 em 而不是像素。

建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此,默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小:pixels/16=em。

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

使用百分比和 Em 的组合

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

响应式字体大小

可以使用 vw 单位设置文本大小,它的意思是“视口宽度”(“viewport width”)。

这样,文本大小将遵循浏览器窗口的大小,随浏览器窗口的大小改变而改变文本大小

<h1 style="font-size:10vw;">响应式文本</h1>

谷歌字体

如果您不想使用 HTML 中的任何标准字体,则可以使用 Google Fonts API 向页面添加数百种其他字体。

只需添加一个样式表链接并引用您选择的字体系列:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

简写字体属性

为了缩短代码,也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

注意:font-size 和 font-family 的值是必需的。如果缺少其他值之一,则会使用其默认值。

CSS 图标

向 HTML 页面添加图标的最简单方法是使用图标库,比如 Font Awesome。

将指定的图标类的名称添加到任何行内 HTML 元素(如 <i> 或 <span>)。

下面的图标库中的所有图标都是可缩放矢量,可以使用 CSS进行自定义(大小、颜色、阴影等)。

Bootstrap 图标

如需使用 Bootstrap glyphicons,请在 HTML 页面的 <head> 部分内添加这行:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Google 图标

如需使用 Google 图标,请在HTML页面的 <head> 部分中添加以下行:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

**提示:**无需下载或安装!

CSS 链接

设置链接样式

链接可以使用任何 CSS 属性(例如 color、font-family、background 等)来设置样式。

根据链接状态设置链接的不同样式。

四种链接状态分别是:

  • a:link - 正常的,未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时
/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

如果为多个链接状态设置样式,请遵循如下顺序规则:

  • a:hover 必须 a:link 和 a:visited 之后
  • a:active 必须在 a:hover 之后

CSS 列表

在 HTML 中,列表主要有两种类型:

  • 无序列表(<ul>)- 列表项用的是项目符号标记
  • 有序列表(<ol>)- 列表项用的是数字或字母标记

CSS 列表属性使您可以:

  • 为有序列表设置不同的列表项标记
  • 为无序列表设置不同的列表项标记
  • 将图像设置为列表项标记
  • 为列表和列表项添加背景色
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

图像作为列表项标记

list-style-image 属性将图像指定为列表项标记:

ul {
  list-style-image: url('sqpurple.gif');
}

定位列表项标记

list-style-position 属性指定列表项标记(项目符号)的位置。

“list-style-position: outside;” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的:

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • Tea
  • Coca-cola

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分,因此它将成为文本的一部分,并在开头推开文本:

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • Tea
  • Coca-cola
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意,列表还拥有默认的外边距和内边距。要删除此内容,请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 :

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性:

ul {
  list-style: square inside url("sqpurple.gif");
}

在使用简写属性时,属性值的顺序为:

  • list-style-type(如果指定了 list-style-image,那么在由于某种原因而无法显示图像时,会显示这个属性的值)
  • list-style-position(指定列表项标记应显示在内容流的内部还是外部)
  • list-style-image(将图像指定为列表项标记)

如果缺少上述属性值之一,则将插入缺失属性的默认值(如果有)。

设置列表的颜色样式

我们还可以使用颜色设置列表样式,使它们看起来更有趣。

添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表,而添加到 <li> 标记的属性将影响各个列表项

CSS 表格

表格边框

如需在 CSS 中设置表格边框,请使用 border 属性。

全宽表格

在某些情况下,上表似乎很小。如果您需要一个可以覆盖整个屏幕(全宽)的表格,请为 <table> 元素添加 width: 100%

table {
  width: 100%;
}

双边框

默认情况下的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

合并表格边框

border-collapse 属性设置是否将表格边框折叠为单一边框

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

如果只希望表格周围有边框,则仅需为 <table> 指定 border 属性

table {
  border: 1px solid black;
}

表格宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

下例将表的宽度设置为 100%,将 <th> 元素的高度设置为 50px:

table {
  width: 100%;
}

th {
  height: 50px;
}

水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式(左、右或居中)。

默认情况下,<th> 元素的内容居中对齐,而 <td> 元素的内容左对齐。

<td> 元素居中center,左对齐left,右对齐right

垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式(上、下或居中)。

默认情况下,表中内容的垂直对齐是居中(<th> 和 <td> 元素都是)。

表格内边距

如需控制边框和表格内容之间的间距,请在 <td> 和 <th> 元素上使用 padding 属性

水平分隔线

向 <th> 和 <td> 添加 border-bottom 属性,以实现水平分隔线

th, td {
  border-bottom: 1px solid #ddd;
}

可悬停表格

在 <tr> 元素上使用 :hover 选择器,以突出显示鼠标悬停时的表格行

tr:hover {background-color: #f5f5f5;}

条状表格

为了实现斑马纹表格效果,请使用 nth-child() 选择器,并为所有偶数(或奇数)表行添加 background-color

tr:nth-child(even) {background-color: #f2f2f2;}

表格颜色

下例指定了 <th> 元素的背景颜色和文本颜色

th {
  background-color: #4CAF50;
  color: white;
}

响应式表格

如果屏幕太小而无法显示全部内容,则响应式表格会显示水平滚动条

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素(例如 <div>),以实现响应式效果:

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>
学习笔记:HTML/CSS WEB开发 HTML和CSS是Web开发中最基础、最重要的两种技术。HTML(超文本标记语言)用于创建网页的结构和内容,而CSS(层叠样式表)用于定义网页的样式和布局。本文将介绍HTML和CSS的基本知识,并提供相应的源代码示例。本文介绍了HTML和CSS的基本知识,并提供了相应的源代码示例。HTML用于定义网页的结构和内容,而CSS用于控制网页的样式和布局。通过学习和实践这两种技术,您可以开始构建漂亮和功能丰富的网页。通过选择器(selector)和属性(property)的组合,可以对特定的HTML元素应用样式。 阅读详情

相关推荐

Web前端开发指南:HTML5、CSS3与JavaScript学习笔记

本书《Web前端学习笔记:HTML5+CSS3+JavaScript》由杰瑞教育编著,旨在帮助读者全面学习前端开发所需的HTML5、CSS3和JavaScript技术。全书分为三篇,共18章,详细介绍了Web前端开发的基础知识、核心概念和实践案例。对于初学者来说,本书不仅提供了丰富的学习资源,还强调动手实践能力的培养。同时,对于有一定基础的开发工程师,本书也提供了专业的技术支持服务和就业咨询,帮助他们巩固知识并提升实战技能。

weixin_36288992的博客 543

CSS学习笔记

5.1 边框:border 5.2 内边距:padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局:flex 7.2 水平方向的排列方式:justify-content 7.3 垂直方向的排列方式:align-items

m0_58761900的博客 3532

RT-Thread NANO V4.1.1 在Cortex-M0上移植踩坑记:解决内存分配宏导致的线程创建失败

本文详细记录了RT-Thread NANO V4.1.1在Cortex-M0平台移植过程中遇到的内存分配宏配置问题,导致线程创建失败的解决方案。通过分析内存管理算法宏定义,将RT_USING_SMALL_MEM替换为RT_USING_SMALL_MEM_AS_HEAP,成功解决了线程创建问题,为开发者提供了实用的移植经验。

weixin_29189373的博客 306

CSS学习笔记(详细)

Cascading Style Sheet 级联样式表表现为HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定若将HTML比做人的骨架,那么CSS就是皮肤,在骨架的架构上进行修饰美化。CSS文件后缀名就是.css。

jojo_oulaoula的博客 970

PTA 编程题(C语言)-- 然后是几点

PTA 编程题(C语言)-- 然后是几点

LCCprogrammer 5074

Anaconda报错no qt platform plugin could be initialized

今天因为在anaconda中安装了一个新包,安装成功后运行python 程序报错:no qt platform plugin could be initialized。 1.安装Anaconda3-4.2.0-Windows-x86_64,对应python版本为3.5.2,scikit learn版本是0.17。因为要用Isolation Forest算法,只有0.18以上版本scikit learn才包含此算法,所以想更新scikit learn。 conda install scikit-lear

zhang1806618的博客 1万+

CSS入门详细笔记【2023.07】

CSS层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(

qq_54639969的博客 351

企业微信-审批控件中的外部选项的应用全流程完美解决方案

完美解决企业微信所有JS-SDK调用问题 完美解决苹果和PC端不适配的问题

qq_45195039的博客 5867

CSS笔记汇总-最全最仔细(会时刻更新)

样式表优点缺点使用情况控制范围行内样式书写方便,权重高没有实现样式和结构相分离较少一个标签内部样式部分结构和样式像分离没有彻底分离较多控制一个页面外部样式完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点一个完整的网页 ,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。标准流可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素行显示或者左右对齐盒子 ,多个块级盒子水平显示就用浮动布局。定位。

小女不才 3055

基于深度学习的柠檬等级检测系统 —— YOLOv8 + UI界面 + 数据集

本项目的目标是构建一个柠檬等级检测系统,通过深度学习模型自动检测柠檬的等级。自动检测柠檬等级:通过图像中的柠檬特征,自动判断其成熟度和质量。实时视频检测:通过摄像头实时监控柠檬的质量等级。用户友好的UI界面:为用户提供简洁直观的操作界面,支持图像上传、实时视频检测等功能。本项目展示了如何基于YOLOv8模型开发一个柠檬等级检测系统,结合PyQt5实现了用户友好的UI界面。通过该系统,用户可以快速上传柠檬图像并自动识别其等级,极大提升了检测效率和准确性。数据集的扩展。

YOLO 1111

FPGA SoC 的 RISC-V 固件开发全攻略(三):RISC-V MCU 启动流程深入解析

本文是《FPGA SoC 的 RISC-V 固件开发全攻略》专栏第 3 篇。上一篇:第 2 篇《开发环境搭建与工具链避坑》 | 下一篇:第 4 篇《RISC-V 与 ARM Cortex-M 开发差异对比》

XavierKong的博客 43

前端css基础学习笔记

例如: 效果:例如:效果:例如:效果:选择页面中对应的标签(找她),方便后续设置样式(改她)例如:效果:例如:效果:注意:一个id选中多个标签也有效果,但不符合规范,规范是一个id选择器只选中一个标签例如:效果:例如:效果:例如:效果:注意点:例如:效果:例如:效果:注意:注意:例如:效果:例如:效果:注意:例如:效果:例如:效果:注意:如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置例如:效果:注意:开发中会使用text-decoration:none;清除a标签默认的下

a_big_panda的博客 1379

C#面试题及详细答案120道(61-75)-- 多线程与异步

本文摘要了前后端面试题中关于线程与并发的核心知识点,包括线程与进程的区别(61题)、Thread/ThreadPool/Task的对比(62题)、线程安全实现方法(63题)、lock关键字的原理(64题)、Monitor类的进阶用法(65题)以及死锁的成因与避免(66题)。通过C#代码示例和表格对比,清晰展示了多线程编程的关键概念、应用场景及常见问题解决方案,适合开发者快速掌握面试高频考点。完整内容可访问专栏目录获取更多技术面试题解析。

大剑师兰特的GIS世界 1429

【Web学习笔记1】前端Web开发HTML5+CSS3+移动web

<li>第一项</li><li>第二项</li><li>第三项</li>......

qq_57437052的博客 897

手把手教你学simulink(8.39)--基于Simulink的步进电机(Stepper Motor)仿真实例

通过这个仿真实例,你可以学习如何使用Simulink构建和仿真步进电机(Stepper Motor)系统。你可以根据实际需求调整模型和参数,进行更复杂的仿真和分析。希望这个例子对你有所帮助,祝你学习愉快!

MHD0815的博客 1052

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

学习笔记:前端Web开发HTML5+CSS3+移动web(day9)

网页案例。

2403_87485932的博客 152

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

学习笔记:前端Web开发HTML5+CSS3+移动web(day7)

【代码】学习笔记:前端Web开发HTML5+CSS3+移动web(day7)

2403_87485932的博客 216

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

学习笔记:前端Web开发HTML5+CSS3+移动web(day9)

二者效果一致,推荐第二种。

2403_87485932的博客 202

学习笔记:前端Web开发HTML5+CSS3+移动web(day5)

写实际网站先有内容在进行优化。在生成的页面点击检查。

2403_87485932的博客 137

学习笔记:前端Web开发HTML5+CSS3+移动web(day8)

flex布局(学习重点)

2403_87485932的博客 199

学习笔记:前端Web开发HTML5+CSS3+移动web(day6)

选择器选中的范围越大,他的优先级越低。css的特性:继承性,层叠性,优先性。

2403_87485932的博客 769

Web开发学习笔记4——CSS学习笔记

本文已搬家至【CSS学习】CSS学习笔记

gnuhpc的专栏 1084

Web前端html5+css3前端开发入门学习笔记

Web前端html5+css3前端开发入门学习笔记

m0_62516225的博客 2444

学习笔记:前端Web开发HTML5+CSS3+移动web(day1)

html: 超文本语言------hyper text markup language。vscode的英文!加tab或者enter生成html基本骨架。注意:打开网页测试的时候必须要先ctrl+s保存。向前缩进tab 向后缩进tab+shift。标记:也叫标签,带尖括号的文本。ctrl+/:添加/删除注释。双标签:成对出现的标签。单标签:实现一个横线。

2403_87485932的博客 222

CSS学习笔记(二) 移动WEB开发

思维导图 文章目录思维导图1. 移动端基础1.1 浏览器现状1.2 手机屏幕现状1.3 移动端调试方法2. 视口2.1 布局视口2.2 视觉视口2.3 理想视口2.4视口总结meta视口标签3. 二倍图3.1 物理像素&物理像素比3.2 背景缩放3.3 多倍图切图工具4. 移动端开发选择4.1 单独移动端页面4.2 响应式兼容PC移动端5. 移动端技术解决方案5.1 移动端浏览器5.2 CSS初始化5.3 盒子模型选择5.4 特殊样式6. 移动端常见布局 1. 移动端基础 1.1 浏览器现状

kianagrow的博客 390

2024年Web前端最新CSS学习笔记,web可视化开发

天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错,灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王,这调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对哪吒的误解和即将来临的天雷的降临,哪吒是否命中注定会立地成魔,他将何去何从哪吒之魔童降世结果图展示4.4阴影。

2401_84434237的博客 907
上一篇: JavaScript函数学习笔记[Web开发]
下一篇: [ 一 ] JAVA概述-学习笔记
Jenlibein
博客等级 码龄4年 187粉丝 27原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值