第十二章CSS3盒子模型，background背景属性  浮动

清除浮动：clear:none|right|both;

none是默认值，表示允许元素前有浮动元素，left表示不允许元素前有左浮动元素；right表示不允许元素前有右浮动元素；both表示不允许元素前有浮动元素，无论它是左浮动还是右浮动。

display:inline将块级元素转化成行内元素

例：div{display:inline;}

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。

display:inline-block行内（内联）块状元素

1. 和其它元素都在一行上

2. 元素的高度、宽度、行高以及顶和底边距都可设置

   

display:none【设置此元素不会被显示“隐身”】

内边距：padding-top属性【top内容上边距bottom内容下边距right内容右边距left内容左边距】【属性定义元素边框与元素内容之间的空间】

当只指定一个值时，该值会统一应用到全部四个边的内边距上。

指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。

指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。

指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距

外边距

margin-top/bottom/right/left

边框

图像透明度opacity取值0~1

border

solid实线dotted点线dashed虚线double双线

盒子模型float浮动盒子，top、bottom、left、right

background属性

width设置宽

height设置高

min-width设置元素最小宽度

min-height设置元素最小高度

max-width设置元素最大宽度

max-height设置元素最大高度

none表示默认值

透明颜色transparent

CSS3背景颜色渐变色彩

语法：linear-gradient(渐变方向，颜色，颜色)；线性渐变，颜色后可以加数值，表示颜色渐变的起点位置

radial-gradient径向渐变

background-color： 规定要使用的背景颜色

object-fit:contain;可以实现图片自适应【height:400px;width:400px;】

【object-fit: cover;（确保图片按原始的宽高比例进行缩放，超出如期的部分会被裁切掉）

和它配合的还有一个

object-position: top left;属性，它可以指定图片显示的位置可以配合过度，和hover伪类选择器制作效果】

object-fit的属性值

滤镜filter

背景模糊或颜色偏移，backdrop-filter：

background-position：规定背景图像的位置【left,right,center,bottom,top还可以用百分比或像素，先设置水平方向，再设置垂直方向】

background-size：规定背景图像的尺寸【px或百分比,长、宽】auto默认值，cover覆盖即将背景图片填满整个容器，contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止

background-repeat：规定如何重复背景图像【repeat、repeat-x、repeat-y、no-repeat，默认值、横向平铺、纵向平铺、不重复】

background-origin：规定背景图片的定位区域【padding-box、border-box、content-box】

background-clip：规定背景的绘制区域

【

　　border-box 默认值。背景绘制在边框方框内（剪切成边框方框）

　　padding-box 背景绘制在衬距方框内（剪切成衬距方框）

　　content-box 背景绘制在内容方框内（剪切成内容方框）

　　text 给文本填充图片背景

】

background-attachment：规定背景图像是否固定或随着页面的其余部分滚动

【

scroll：默认值，背景图像会随着页面其余部分的滚动而移动。

fixed：当页面的其余部分滚动时，背景图像不会移动。

loca：背景图像相对于元素的内容固定；当元素的内容滚动时，背景图像总是要跟着内容一起移动

】

background-image：规定要使用的背景图像

可以看出background-image属性就是给html页面设置背景图片的属性，下面看看它的用法

background-image:url(1.jpg)

background:url() 可设置图片居中等;例:background:url() center;

设置元素背景图片的原始起始位置。

background-origin ： border-box | padding-box | content-box;!![前提是背景必须是no-repeat，否则属性无效

例：background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; ]

用来将背景图片做适当的裁剪以适应实际需要。

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

效果图：

css3 背景模糊属性 背景滤镜 backdrop-filter

backdrop-filter: blur(8px);

翻译理解记忆法仅供参考：背景幕布-过滤器 : 模糊(像素)

backdrop-filter与filter的区别

filter：模糊内容
backdrop-filter:透过该层的底部元素模糊化

例：

防止透过遮罩层内容过暗，配合了saturate(150%)使用，意为使…饱和，类似ps饱和度效果，<100%变暗，>100%变亮

backdrop-filter:saturate(150%) blur(8px);

-webkit-backdrop-filter:saturate(150%) blur(8px);

background-color:rgba(0,0,0,.3);

第十章CSS3样式  超链接  关于鼠标光标

-moz代表firedox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

-o代表opera私有属性

HTML超链接及美化（超链接还可以连接文档、邮件地址和应用程序等）

普通链接：<a href="目标地址">载体</a>  有个常用属性target="_blank"/_self/_top/_parent

有title、alt、target属性

内容块链接

<a>标签中的载体可以为文本、图像或内容块等，但不能为其他链接、音频、视频等交互方式内容。

例：<a href="https://www.baidu.com" target="_blank">

<img src="images/p1.jpg" width="200px" />

</a>

图像链接：超链接中的地址写入图片地址

下载地址：当链接的文件不能被浏览器解析时，如压缩文件，单击超链接后将直接下载链接的文件至本地计算机中，这种链接就是下载链接。对于能够被浏览器解析和识别的文件，如“.jpg”“.png”“.gif”“.txt”等，也可以使用HTML5新增属性download强制浏览器执行下载操作，其属性值可以为下载文件的名字，也可以省略.

属性值：download可执行强制下载

也可在超链接中写入图片或文件的压缩包地址，点击后将直接下载其压缩包

例：<a href="images/p2.jpg"><img src="images/p2.jpg" width="150px" alt="松鼠" /><p>在线预览</p></a>

<a href="images/p2.jpg" download="松鼠">下载图片</a>

<a href="images/test.rar">下载压缩包</a>

锚点链接（是指向同一页面或其他页面中特定元素的链接。例如，在篇幅较长的网页底部设置一个返回顶部的锚点链接，可以通过单机链接快速返回到网页顶部，省去移动滚动条的麻烦。）

（1）创建锚点。锚点就是锚点链接所指向的元素位置，为元素设置了id属性后，其属性值即可作为该元素的锚点。

（2）添加链接。锚点链接的href属性值为“#锚点名”，锚点名即目标元素的id属性值，如href=“#p5”；表示链接至当前页面中id属性值为p5的元素。当指向其他页面中的某个元素时，需要在“#”符号前加上页面的名称，如href=“test.html#p1;”（书本p132）

电子邮件链接  使用电子邮件可以打开客户端浏览器默认的电子邮件应用程序，收件人的地址由电子邮件链接指定，无须手动输入

电子邮件的href属性值为“mailto:电子邮件地址?subject=邮件主题”

cursor属性设置鼠标光标

值：url    

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default    默认光标（通常是一个箭头）    

auto    默认。浏览器设置的光标。    

crosshair    光标呈现为十字线。    

pointer    光标呈现为指示链接的指针（一只手）    

move    此光标指示某对象可被移动。    

e-resize    此光标指示矩形框的边缘可被向右（东）移动。    

ne-resize    此光标指示矩形框的边缘可被向上及向右移动（北/东）。    

nw-resize    此光标指示矩形框的边缘可被向上及向左移动（北/西）。    

n-resize    此光标指示矩形框的边缘可被向上（北）移动。    

se-resize    此光标指示矩形框的边缘可被向下及向右移动（南/东）。    

sw-resize    此光标指示矩形框的边缘可被向下及向左移动（南/西）。    

s-resize    此光标指示矩形框的边缘可被向下移动（南）。    

w-resize    此光标指示矩形框的边缘可被向左移动（西）。    

text    此光标指示文本。    

wait    此光标指示程序正忙（通常是一只表或沙漏）。    

help    此光标指示可用的帮助（通常是一个问号或一个气球）    

CSS3颜色之RGBA

滤镜filter

透明颜色transparent

color：rgba(R,G,B,A)

以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值

CSS3背景颜色渐变色彩

语法：linear-gradient(渐变方向，颜色，颜色)；线性渐变，颜色后可以加数值，表示颜色渐变的起点位置

radial-gradient径向渐变

font-family设置字体

word-wrap可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。【norma表示控制连续文本换行也是默认值，

break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可】

文本溢出text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出-------但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果

font-size设置字体大小单位px

font-weight设置字体粗细（bold默认值 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ）

font-style：设置字体的样式（默认值也就是正常字体normal，斜体italic,设置倾斜oblique）

font-variant：所有的小写字母均会被转换为大写字母，但是被转换的字母大小与其余文本相比，其字体更小

text-decoration:underline字体添加下划线

text-decoration:none去除下划线

text-decoration【underline线条装饰在文本底部overline线条装饰在文本顶部line-through线条穿过文本】

text-align居中center靠右对齐right靠左对齐left（设置水平对齐）

vertical-align（设置元素的垂直排列）

它的值比较多：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit

比如说top就是垂直对齐文本的顶部

 letter-spacing 用于设置中文字、字母之间的间距单位px

word-spacing用于设置单词间距单位px

text-indent【为段落或文本添加首行缩进，2em意思是缩进两个文字的大小】

line-height行高，指的是两行文字基线之间的距离【用em做单位】

text-shadow:h-shadow v-shadow blur color;（水平阴影的位置，垂直阴影的位置二者可负值，表示阴影模糊的距离，阴影的颜色）

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

语法：

@font-face {
   font-family : 字体名称;
   src : 字体文件在服务器上的相对或绝对路径;
}

font样式的简写方式

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：

body{

  font:12px/1.5em  "宋体",sans-serif;
}只是有字号、行间距、中文字体、英文字体设置。

【关于family】

serif：衬线字体，就是边角有特殊修饰的字体。宋体字就是有衬线字体。Serif的意思是，在字的笔划开始及结束的地方有额外的装饰，而且笔划的粗细会因直横的不同而有不同。

sans-serif：无衬线字体，无特殊修饰的字体。sans是法语，意思是“没有”。黑体字就是无衬线字体。Sans Serif则没有这些额外的装饰，笔划粗细大致差不多。

monospace：等宽字体，每个字母都一般宽的字体。平时所用的Georgia、Times New Roman等就属于Serif字体，而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，宋体、细明体(繁体中常用)等就属于Serif，而黑体、幼圆等则属于Sans Serif

line-height行高，指的是两行文字基线之间的距离【用em做单位】

第八章CSS3选择器         (!important可以为某些样式设置最高权值)语法 ：p{color:red!important;}                                                        选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100                                1,类选择器（.）

a  .类选器名称（英文圆点开头）                                                                                   2.ID选择器（#）

注意：                                                                                                                          3.包含选择器（空格）

1、英文圆点开头                                                                                                           4.通用选择器（*）

2、其中类选器名称可以任意起名（但不要起中文噢）                                                     5.伪类选择器

使用方法：                                                                                                                    6.分组选择器（,）

第一步：使用合适的标签把要修饰的内容标记起来，如下：                                             7.子选择器（>）

<span>胆小如鼠</span>                                                                                            8.root选择器（：root）结构性伪类选择器

第二步：使用class="类选择器名称"为标签设置一个类，如下：                                  【 :root选择器相当于html标签可以，可以更改背景】色                                                                                                                                 9.not选择器（：not）:not选择器称为否定选择    <span class="stress">胆小如鼠</span>                                                                     器，和jQuery中的:not选择器一模一样，可以选择

第三步：设置类选器css样式，如下：                                                                             除某个元素之外的所有元素

.stress{color:red;}/*类前面要加入一个英文圆点*/                                                          10.伪元素选择器

a   ID选择器（#号开头）

1、使用ID选择器，必须给标签添加上id属性，为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

3、id属性的值既为当前标签的id，尽量见名思意，语义化

ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次

可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）

例子：.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

b  子选择器(圆点开头子选择器用>选择第一代子元素)

还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框

<ul class="food">

        <li>水果

            <ul>

                <li>香蕉</li>

                <li>苹果</li>

                <li>梨</li>

            </ul>

<li>蔬菜

            <ul>

                <li>白菜</li>

                <li>油菜</li>

                <li>卷心菜</li>

            </ul>

        </li>

b  包含选择器（用空格连接子元素）

 即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码

总结：>作用于元素的第一代后代，空格作用于元素的所有后代

c 通用选择器（*开头）

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

伪类选择器

:hover代表鼠标滑过时的状态

分组选择器

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}
span{color:red;}

结构伪类选择器（：not）【:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素】

例

input:not([type="submit"]){
 border:1px solid red;
}

标签:not([选择器："元素名"]){

}

结构伪类选择器（：root）

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>

我们可以在：root里面声明css全局变量，变量的声明对大小写敏感，且需要在被声明的变量前加上"--",且变量只能作为属性值，不能作为属性名！

既然声明了css全局变量，我们就得调用它，通过var（）函数调用:

background-color: var(--secondary-color,#ff434f);var（）也可以有第二个参数，表示默认值，如果调用的变量不存在则使用默认值

别以为var（）的妙用就只有定义颜色，它还能定义字符串和数值：

            --hello:'hello';

            --max:1920px;

            --marigin:30px 20px 40px;

结构性伪类选择器（:empty）

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格

注：有时候网页需要空标签

结构性伪类选择器（:target）

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素

例：

示例展示

点击链接显示隐藏的段落

HTML代码：

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
   content for Brand
</div>

CSS代码：

.menuSection{
 display: none;
}:target{/*这里的:target就是指id="brand"的div对象*/
 display:block;

}

伪元素选择器

伪元素

例子

例子描述

块级元素可能需要添加display:block;

::after    p::after    在每个 <p> 元素之后插入内容    

::before    p::before    在每个 <p> 元素之前插入内容    

::first-letter    p::first-letter    匹配每个 <p> 元素中内容的首字母    

::first-line    p::first-line    匹配每个 <p> 元素中内容的首行    

::selection    p::selection    匹配用户选择的元素部分    

::placeholder    input::placeholder    匹配每个表单输入框（例如 <input>）的 placeholder 属性    

在元素上，content 的初始值为 ‘normal’。在:before和:after上，如果指定了content 的初始值为 ‘normal’，则计算为 ‘none’ 。content 的值设置为 ‘none’ 不会生成伪元素。所以:before和:after才需要指定一个看似无意义的 content: ""; 来初始化content的值

HTML5表单标签按钮等，与浏览者交互，按钮超链接，有序列表

css：

outline:none;去除输入框轮廓线

border-collapse:separate|collapse表示默认效果|表示尽可能将单元格边框合并显示

visibility:hidden表示设置该元素不可见

响应式布局媒体查询功能@media,它可以查询设备的屏幕宽度、高度等。在其基础上设置表格样式就实现了自适应表格书本P177面

rules属性的属性值：

none不显示内边框

groups仅显示按行或按列分组的边框

rows显示行之间的边框

cols显示列之间的边框

all显示行与列之间的边框

frame属性的属性值：

void不显示外边框

above显示上外边框

below显示下外边框

box、border显示所有外边框

lhs显示左外边框

rhs显示右外边框

hsides显示上、下外边框

vsides显示左、右外边框

<input />文本输入框

表单标签<form>创建表单

语法：<form method="传送方式(get/post)" action="服务器文件"></form>

type="button"表示设置为按钮

type="text" 账号

type="password" 密码(输入隐藏)

type="number" 数字类型（只允许输入数字）

type="url"  网址类型

type="email" 邮箱类型

type="设置为submit时，按钮才有提交作用"value：按钮上显示的文字

type="设置为reset时，按钮才有重置作用"

type="radio",控件为单选框（单选效果必须保证name取值相同）

type="checkbox",控件为复选框

checked="checked"（该选项被默认选中）

onclick="内容";告诉浏览器在鼠标点击时候要做什么

输入框占位符-placeholder属性

<form>

<input type="属性" name="为文本框命名，以备后台程序ASP、PHP使用" value="为文本输入框设置默认值" />

</form>

<textarea>标签

语法：<textarea rows="行数" cols="列数">默认值</textarea>

两个属性可以用width和height代替

label标签（点击标签中的文本即可触发控件）

语法：<label for="控件id名称">

<form
 <label for="email">输入你的邮箱地址</label>
 <input type="email" id="email" placeholder="Enter email">
</form>

6-10使用select、option标签创建下拉菜单

select标签里面只能放option标签，表示下拉列表的选项。

option标签放选项内容，不放置其他标签

selected="selected"：

设置selected="selected"属性，则该选项就被默认选中,size属性可设置显示大小

html按钮设置超链接的方法一：使用超链接与button结合的方法

html按钮超链接代码如下：

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<a href="http://www.gxlcms.com/">
<input type=button value="Gxl网" >
</a>
</body>
</html>

html按钮超链接效果如下：

说明：<a> 标签的 href 属性用于指定超链接目标的URL。

html按钮设置超链接的方法二：使用链接和css样式设置将超链接设置成按钮的形状

html按钮超链接代码如下：

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
  a.button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
   text-decoration: none;
   color: initial;
}
</style>
</head>
<body>
<a href="http://www.gxlcms.com" class="button">Gxl网</a>
</body>
</html>

html按钮设置超链接的方法三：使用 form表单来设置html按钮超链接

html按钮超链接代码如下：

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>
<form method="get" action="http://www.gxlcms.com/">
   <button type="submit">Gxl网</button>
</form>
</body>
</html>

html按钮设置超链接的方法四：使用window.location.href方法

完整的写法：

<a href="链接">
　　<input type=button onclick="window.location.href('连接')">
</a>

说明：

1、若直接在本页跳转到新的页面，则用： <input type=button onclick=“window.location.href（'连接'）”>
2、如果需要打开一个新的页面进行跳转，则用： <input type=button onclick=“window.open（'连接'）”>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

a{display:block;}将内联元素变为块状元素

1. 独占一行

2. 宽高行顶和底边距都可设置

3. 宽度与父元素宽度一致
   

长度值单位：都是相对单位

1. 像素px，像素指的是显示器上的小点，CSS规范中假设“90像素=1英寸”

2. em，本元素给定字体的 font-size 值，根据px值变化的

3. 百分比，px为基础
   

placeholder属性为输入框占位符,里面可以放提示的输入信息。

1. border=1有边框

2. caption标签

3. tr行

4. th加粗列，td列
   

target：_self当前页面，_blank新窗口

<ol><li>标签来制作有序列表