html5+css3知识整理(1)
最近要把之前学过的知识重新串联一下，从web前端开始，依次会更新html5+css3、JavaScript+jQuery。内容大概5月前更新完成，大致的内容分为知识的整理和案例的分享。每次的代码都会分享的。因为是手敲的加上前端知识琐碎，文中难免出错，欢迎指正和建议。
希望浏览到的你从某篇中获的知识后给个赞，谢谢。
资料书：《HTML5+CSS3网页设计与制作》黑马程序员编著
编程软件：Dreamweaver 说明：这个编程工具对于css3的某些属性不能正常使用，所以有时会使用Webstorm，这次的内容一般的前端编程工具也可以正常运行。
文中有错的地方请及时更正，谢谢！
效果图：
代码分享：
html文件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本、样式、复合选择器、C3新增特性、超链接和列表</title>
<style type="text/css">
.tit {text-align: center;font-size: 16px;font-weight: bold;}</style>
<link type="text/css" rel="stylesheet" href="one_C3.css"/>
</head>
<body>
<p class="tit">采用链入式CSS3，前六个章节的内容逐个出现的拼接网页(第一章概述html和css省略)</p>
<hr size="2px" color="blue" />
<p>使用锚点链接来定位每个章节的内容</p>
<ul>
<li><a href="#one">html</a></li>
<li><a href="#two">css</a></li>
<li><a href="#three">伪类/伪元素选择器</a></li>
<li><a href="#four">盒子模型</a></li>
<li><a href="#five">列表和超链接</a></li>
</ul>
<h3 id="one">html</h3>
<img src="img/bg1.jpg" alt="一张图片" width="50%" height="200px" align="right"/>
<p id="one1">html为超文本标记语言，编写网页结构和内容;根标签(html),头部标签(head),主体标签(body);<br /><br />
标签分为单标签和双标签(是否成对出现)，标签按照格式划分为嵌套和并列两种关系;<br />
标签的属性多以键值对的形式存在。其中在对图像标签进行操作时;<br/><br />
<span id="one2">注意相对路径和绝对路径的使用，由于网页制作完成之后需要将所有的文件上传到服务器，因此不建议使用绝对路径，多使用相对路径。</span>
</p>
<h3 id="two">css</h3>
<p id="two1">css为层叠样式表，对网页的版面布局、文本或图片的显示样式都使用css控制；css3最突出的有事在于节约成本和提高性能，因为提供了很多新特性。<br /><br />
<span class="two2">css样式规则采用：</span>选择器{键值对；键值对；...}的方式，选择器严格区分大小写。<br /><br />
<span class="two2">css样式表分为：</span>行内式、内嵌式、外链式和导入式，其优先级逐渐降低，而且外链式和导入式实现了结构和表现分离;<br /><br />
<span class="two2">基础选择器：</span>标签(快速统一样式但无法差异化)、类(不同元素可重复使用一个且每个元素可以设置多个类，注意：类名第一个字符不能使用数字且严格区分大小写，一般为小写)、id(不可重复，且一个元素只有一个)和通配符选择器(“*”不建议使用，因为对所有的标签都生效)，其优先级逐渐升高，同时权重依次为1，10，100；<br /><br />
<span class="two2">文本样式：</span>字体样式有字号、字体、字体粗细、字体风格和行高，可以使用font属性综合设置字头属性，特别提到，@font-face规则可以从服务器中导入字体；<br /><br />
<span class="two2">文本外观属性：</span>颜色、字间距、单词间距、行间距、文本转换、文本修饰、水平对齐方式(仅适用于块级元素，行内元素无效)、首行缩进(em为处理单位)、空白符处理、阴影效果、标示对象内溢出文本和word-wrap属性(实现长文本自动换行)；<br /><br />
<span class="two2">高级特性：</span>复合选择器：标签选择器：由两个选择器构成，第一个为标签选择器，第二个为类或者id选择器且两个选择器之间不能有空格；后代选择器：外层标签写在前面，内层标签写在后面，中间用空格隔开；并集选择器：各个选择器通过逗号链接而成的，任何选择器都可以作为并集选择器的一部分。使用并集选择器定义样式与各个基础选择器单独定义的样式效果完全相同且这种书写使代码更加方便和简洁、高效。<br /><br />
<span class="two2">层叠性和继承性：</span>层叠性为多种css样式的叠加，多在嵌套标签中见到，此时注意选择器的优先级的不同会使层叠的效果可能不同。继承性是子标签会继承父标签的某些样式。<br /><br />
<span class="two2">css的优先级：</span>复合选择器的权重无论为多少个标签选择器的叠加，其权重都不会高于类选择器，同理，复合选择器的权重无论为多少个类选择器和标签选择器的叠加，其权重都不会高于id选择器。
</p>
<h3 id="three">伪类/伪元素选择器</h3>
<p id="three1"> 使用属性、关系、伪类、伪元素选择器选择器可以大幅度提高设计者书写和修改样式表的效率;<br />
<span class="three2">属性选择器：</span>E[att*=value]:其中E为标签，att和value表示基础选择器，*号表示匹配前缀为value的标签；若为^则表示匹配后缀为value的标签；$表示匹配带有value的标签；<br />
<span class="three2">关系选择器：</span>关系选择器主要包括子元素选择器和兄弟选择器；其中子元素选择器用符号>连接,兄弟选择器有相邻兄弟用符号+连接和普通兄弟-连接；<br />
<span class="three2">结构化伪类选择器：</span>结构化伪类选择器允许开发者根据文档结构来指定元素的样式，常用的结构化味蕾选择器有:root选择器(对html中的元素全部有效)、:not(排除某个结构元素下面的子结构元素)。<br />
<span class="three3">使用格式：body *:not(){}</span>、:only-first、:first-child选择器、:last-child选择器(上三种匹配父元素中各个位置的子元素)、:nth-first、:nth-last-child、:nth-of-type(n)和nth-last-of-type(n)(用于匹配属于
父元素的特定类型的第n个子元素和倒数第n个子元素)、:empty选择器(选择没有子元素或者文本内容为空的所有元素);<br />
<span class="three2">伪元素选择器：</span>伪元素选择器是针对css中已经定义好的伪元素使用的选择器，css中常用的伪元素选择器有:before伪元素选择器(在被选元素的内容前面插入内容)和:after伪元素选择器(在被选元素的内容后面
插入内容)；伪元素选择器必须配合content属性来指定要插入的具体内容。语法格式：<元素>:before(after){content:文字、url();其他属性;};<br />
<span class="three3">伪类和伪元素可以简单理解为不能被css获取到的抽象信息。</span>
</p>
<h3 id="four">盒子模型</h3>
<p>盒子模型是网页布局的基础；掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。在网站页面中，承载内容的区域被称为盒子模型，盒子模型就把html页面中的元素看作是一个方形的盒子，也就是一个盛装内容的容器。每个方形都由元素的内容、内边距(padding)、边框(border)和外边距(margin：是该元素与相邻元素之间的距离):组成。值得一提的是，这些都是复合属性。<br />
<span class="four1">复合属性的写法：</span>样式的写法会按照上右下左的顺时针顺序排列，当省略某个属性值时，边框样式会采用值复制的原则，将省略的属性值默认为某一边的样式。设置3个属性值时，为上、左右、下；设置两个属性值时，为上下和左右，设置1个属性值时，为4边的公用样式。<br />
<ul><li>边框属性：边框样式(border-style)、边框宽度(border-weight)、边框颜色(border-color:可以设置透明色为值(transparent))、单侧边框的属性、边框的综合属性(宽度 样式 颜色);</li></ul>
<p class="four2">
<span class="four3">内边距属性：</span>调整内容在盒子中的显示位置。内边距也称为内填充，指的是元素内容与边框之间的距离。padding-top/right/bottom/left(顺时针)或padding:上、右、下、左。padding的取值不允许
使用负值。当块元素的内边距设置为百分数值时，拖动浏览器窗口改变其宽度时，块元素的内边距会随之发生变化。<br />
<span class="four3">外边距属性：</span>外边距指的是标签边框与相邻标签之间的距离。margin取值与padding相同，但外边距可以使用负值，市相邻标签发生重叠。当对块级元素应用宽度属性width，并将左右的外边距
都设置为auto时，可使块级元素水平居中，实际工作中常用这种方式进行页面布局，实例：.类名{margin:0 auto;};
</p>
<ul><li>背景属性：网页能通过背景图像给浏览者第一印象，控制背景颜色和背景图像时一个很重的步骤。</li></ul>
<p class="four2">
<span class="four3">背景颜色：</span>网页元素的背景颜色使用background-color属性设置，属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)，默认为transparent，即背景透明，这时子元素会显示其父元素的背景。<br />
<span class="four3">背景图像：</span>使用background-image:url(路径)属性设置背景图像;background-repeat属性用来设置图像是否平铺；当图像设置为不平铺时可以用(background-positon：属性 属性)来设置图像的位置；
background-attachment属性用来设置图形是否随页面滚动，属性值为sroll和fixed；背景(background-positon)相关的样式样式一个复合样式，格式：(background:背景色/url("图像") 平铺 定位 固定;)
</p>
<ul><li>盒子的宽与高：网页是由多个盒子排列而成的，每个盒子都有固定的大小，在css中使用宽度属性width和高度属性height可以对合资的大小进行控制。width和height常用的属性值为像素。</li></ul>
<p class="four2">
<span class="four3">在css规范中，元素的width和height属性仅指匀速内容的宽度和高度，其周围的内边距、边框和外边距是单独计算的。</span>
<span class="four3">盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和；
盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和；
注意：宽度属性和高度属性仅适用于块级元素，堆焊内元素无效(<img/>和<input/>标签除外)</span>
</p>
<ul><li>css3新增盒子模型属性：为了丰富网页的样式功能，去除一些冗余的样式代码，css3中添加了一些新的盒子模型属性。</li></ul>
<p class="four2">
<span class="four3">颜色透明度：</span>css3中使用了两种设置颜色不透明度的方法，一种是使用rgba模式设置，另一种是使用opacity属性设置；
语法：(rgba(r,g,b,alpha);)alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的数字。
语法：opacity是css3新增属性，该属性能够使任何元素呈现出透明效果且作用范围要比rgba模式大得多(opacity：参数;)参数表示不透明度的值，是介于0~1之间的浮点数值。<br />
<span class="four3">圆角：</span>网页设计中经常会看到一些圆角的图形，运用css3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。语法(border-radius:水平半径1 水平半径2 水平半径3 水平半径4/垂直半径1
垂直半径2 垂直半径3 垂直半径4;)水平和垂直的四个参数值分别对应着矩形的4个圆角。
水平半径参数和垂直半径参数设置1个参数值时，表示四角的圆角半径均相同。
水平半径参数和垂直半径参数设置2个参数值时，第1个参数值代表左上圆角半径和右下圆角半径，第2个参数值代表右上和左下圆角半径。
水平半径参数和垂直半径参数设置3个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上和左下圆角半径，第3个参数值代表右下圆角半径。
<span class="four3">特别地，(border-radius：50%)用于设置圆形。</span>
<span class="four3">图形边框：</span>网页设计中还可以使用图片作为元素的边框。语法格式：(border-image：border-image-source(图片路径)/ border-image-slice(图片的裁切位置)/ border-image-width(边框宽度)/
border-image-outset(边框背景向盒子外部延伸的距离)/ border-image-repeat(背景图片的平铺方式);)，是一个复合属性。<br />
<span class="four3">阴影：</span>使用css3中的box-shadow属性可以轻松实现阴影的添加，语法格式:(box-shadow:h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(模糊半径) spread(扩展半径) color outset(内外阴影);)
其中前两个为必选项且可为负。<br />
<span class="four3">渐变：</span>css3的渐变属性主要包括线性渐变、径向渐变和重复渐变。<br />
<span class="four3">线性渐变：</span>在线性渐变过程中，其实颜色会沿着一条直线按顺序过渡到结束颜色。语法格式：(background-image:linear-gradient(渐变角度，颜色值1，颜色值2...，颜色值n)；)渐变角度是指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值
或“to”加“left/right/bottom/top”等关键词。此时设置的位置上下和左右颠倒。<br />
<span class="four3">径向渐变：</span>径向渐变同样是网页中一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，按照椭圆或圆形形状进行扩张渐变。语法格式：(background-image:radial-gradient((circle/ellipse)渐变形状 (at top/right/bottom/left)圆心位置
颜色值1，颜色值2...，颜色值n);)。<br />
<span class="four3">重复渐变：：</span>语法格式：(background-image:repeating-linear-gradient(渐变角度，颜色值1，颜色值2...，颜色值n)；background-image:repeating-radial-gradient((circle/ellipse)渐变形状 (at top/right/bottom/left)圆心位置
颜色值1，颜色值2...，颜色值n);)<br />
<span class="four3">多背景图像：</span>在css3之前的版本中，一个容器只能填充一张背景图片，如果重复设置，最后设置的背景图片将覆盖之前的背景，css3中增加了背景图像的功能，允许一个容器里显示多个背景图像，让背景图像效果更容易控制。
</p>
<ul><li>元素的类型和转换:不同的标签有着不同的类型，不同类型的标签可以设置的属性也不同。</li></ul>
<p class="four2">
<span class="four3">元素的类型：</span>一般分为块元素和行内元素，也称为快标签和行内标签。
块元素：块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。<div>标签是最典型的块元素。
行内元素：行内元素也称内联元素或内嵌元素，其特点是，不会占据一行，也不强迫其他的标签在新的一行显示。一个行内标签通常会和其他行内标签显示在同一行中，它们不占有独立的区域，仅仅靠自身的文本内容大小和图像尺寸来支撑结构，
一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。其中<span>是最典型的行内元素。
<span class="four3">行内元素可以嵌套在块元素中，而块元素步可以嵌套在行内元素中。</span>
<span class="four3"><div></span>div的英文全称为“divsion”，中文是“分割、区域”。<div>标签简单而言就是一个快标签，可以实现网页的规划和布局。<br />
<span class="four3"><span></span>span的中文“范围”，作为容器标签被广泛应用在html语言中，和<div>标签不同的是，<span>是行内元素，仅作为只能包含文本和各种行内标签的容器；<span>标签中可以嵌套多层<span>;<br />
<span class="four3">元素类型的转换：</span>网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，例如可以设置宽高，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，
可以使用display属性对元素的类型进行转换。display的属性值：inline(此元素将显示为行内元素) block(此元素将显示为行内块元素) inline-block(此元素将显示为行内块元素，可以对其设置宽高属性但不会独占一行)
none(此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在)。
<span class="four3">行内元素只可以定义左右外边距，定义上下外边距无效。</span>
</p>
<ul><li>块元素垂直外边距的合并：两个相邻或嵌套的块元素相遇时，其垂直方向的外边距会自动合并，发生重叠。</li></ul>
<p class="four2">
<span class="four3">相邻块元素垂直外边距的合并：</span>当上下相邻的两个块元素相遇时，它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。<br />
<span class="four3">嵌套块元素垂直外边距的合并：</span>对于两个嵌套关系的块元素，如果父标签没有上内边距及边框，则父标签的上外边距会与子标记的上外边距发生合并，合并后的外边距为两者中较大者，即使父标签的上外边距为0，也会发生合并。
</p>
</p>
<h3 id="five">列表和超链接</h3>
<p>一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序、条理清晰且网页与网页之间有一定的关联，就需要使用列表和超链接。
<ul><li class="five1">列表标签：列表标签是网页结构中最常用的标签，按照列表结构划分，网页中的列表通常分为3类，分别是无序列表<ul>、有序列表<ol>和定义列表<dl>。</li></ul>
<p class="five2">
<span class="five3">无序列表：</span>ul是英文unordered list的缩写，中文是无序列表。无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分。无序列表使用<ul>标签定义，内部可以嵌套多个<li>标签(<li>是列表项)。
语法格式：<ul>
<li>列表项< /li>
<li>列表项< /li>
<li>列表项< /li>
...
< /ul>
每对<ul>和< /ul>中至少包含一对<li>< /li>。<ul>和<li>都拥有type属性，用于指定列表项目符号，不同type属性值可以呈现不同的项目符号。其中disc(默认值)：圆形实点；circle：圆形空点；square:方形实点。
一般通过css样式属性替代无序列表的type属性；<ul>和< /ul>中只能嵌套<li>< /li>，直接在<ul>< /ul>标签中输入文字是不被允许的。<br />
<span class="five3">有序列表：</span>ol是英文ordered list的缩写，中文是有序列表。有序列表是一种强调排列顺序的本列表，使用<ol>标签定义，内部可以嵌套多个<li>标签。
语法格式：<ol>
<li>列表项< /li>
<li>列表项< /li>
<li>列表项< /li>
...
< /ol>
在有序列表中，除了type属性之外，还可以为<ol>定义start属性(项目符号的起始值)、为<li>定义value属性(项目是符号的数字)；<br />
<span class="five3">定义列表<dl>：</span>dl是英文definition list的缩写，中文是定义列表。它包含了3个标签，即dl、dt、dd。
语法格式：<dl>
<dt>名词1< /dt>
<dd>dd是名词1的描述信息< /dd>
<dd>dd是名词1的描述信息< /dd>
...
<dt>名词2< /dt>
<dd>dd是名词2的描述信息< /dd>
<dd>dd是名词2的描述信息< /dd>
...
< /dl>
<dl>、<dt>、<dd>3个标签之间不允许出现其他标签；<dl>标签必须与<dt>标签相邻。
</p>
<ul><li class="five1">css控制列表样式：定义有序或无序列表时，可以通过标签的属性控制列表的项目符号，但该方式不符合结构表现分离的网页设计原则，为此css提供了一系列的列表样式属性来单独控制列表项目符号。</li></ul>
<p class="five2">
<span class="five3">list-style:</span>列表样式是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-type中，格式(list-style:list-style-type(列表项目符号)/list-style-image(列表项目图像) list-style-posittion(列表项目符号的位置);)
其中list-style-type(列表项目符号)用于控制列表项显示符号的类型，取值多种，效果各自不同。
list-style-position(列表项目符号的位置)取值有inside(符号位于列表文本以内)和outside(符号位于列表文本以外，默认值)
list-style-image(列表项目图像)其取值为url。
</p>
<ul><li class="five1">超链接：超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接定义的对象可以是图片，也可以是文本，或者是网页中的任何元素，只有通过超链接定义的对象，才能在单击后进行跳转。</li></ul>
<p class="five2">
<span class="five3">创建超链接：</span>超链接在网页中占有不可替代的第位，但是在html中创建超链接非常简单，只需要用<a></ a>标签环绕需要被链接的对象即可。
语法(<a href="跳转对象" target="目标窗口的弹出方式">文本或者图像</ a>)其中<a>标签是一个行内元素，用于定义超链接，href和target为其常用属性；href用于指定链接目标的url地址；target用于指定链接页面的打开方式，
其取值有_self(原窗口)和_blank(新窗口)两种。
<span class="five3">暂时没有去欸的那个链接目标时，通常将<a><标签的href属性值定义为“#”，表示该链接暂时为一个空链接；不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接;
设置图像超链接时，在某些浏览器中，图像会自动添加边框效果，影响页面的美观，去掉边框最直接的方法是将边框设置为0，语法(<a href="#"><img src="图像url" border="0" /></ a>。</span>
<span class="five3">锚点链接：</span>为了提高信息的检索速度，html语言提供了一种特殊的链接--锚点链接，通过创建锚点链接，用户能够直接跳到指定位置的内容。
</p>
<ul><li class="five1">链接伪类控制超链接：定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。</li></ul>
<p class="five2">
<span class="five3">属性介绍：</span>a:link(超链接的默认样式)
a:visited(超链接被访问过之后的样式)
a:hover(鼠标指针经过、悬停时超链接的样式)
a:active(鼠标点击不放时超链接的样式)
<span class="five3">注意：使用超链接的4中伪类时，对排列顺序是有要求的，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用；超链接的4种伪类状态并非全部定义，一般只需要设置3种状态即可，
如link、hover和active。值设定两种状态的话，即用link、hover来定义；除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。</span>
</p>
</p>
<hr size="2px" color="blue"/>
<p class="six">未完待续...</p>
</body>
</html>
css文件：
@charset "utf-8";
/* CSS Document */
/**{margin: 0;padding: 0;}*/
a:link,a:visited,a:hover {
text-decoration: none;
}
#one1 {
height: 200px;
}
#one2 {
color: red;
font-style: italic;
font-weight: bold;
}
.two2 {
color: red;
font-style: italic;
font-weight: bold;
}
#three1 {
white-space: pre;
}
.three2 {
color: red;
font-style: italic;
font-weight: bold;
}
.three3 {
color: red;
font-style: italic;
font-weight: bold;
}
.four3 {
color: red;
font-style: italic;
font-weight: bold;
}
.four1 {
color: red;
font-style: italic;
font-weight: bold;
}
.four2 {
white-space: pre;
margin-top:-20px;
margin-bottom:-20px;
}
.five3 {
color: red;
font-style: italic;
font-weight: bold;
}
.five2 {
white-space: pre;
margin-top:-20px;
margin-bottom:-20px;
}
.five1 {
list-style-type: square;
}
.six {
text-align: center;font-size: 16px;font-weight: bold;
}
未完待续...
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
