CSS教学

CSS是用来给HTML元素标签设置样式用的。

CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明:

选择器：是html元素标签，即你要给哪个元素设置css样式
声明：则是给这个元素设置什么样式，每个声明都由两部分组成，一个是属性，另一个是这个属性的值。属性是您希望设置的样式属性。值则是给这个属性设置什么样式值。

如：CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来
p {color:red;text-align:center;}
给p标签设置样式 {设置他的颜色样式:为red色;
                文本对齐方式为:居中对齐;}

一些属性介绍：

box-sizing

:content-box; ：如果给一个元素设置大小的话，该大小只为实际作用范围的大小，不包括内外边框等。如：给一个元素设置大小为100，其实际大小不止一百，还必须加上内外边框等才是他的实际大小，还得时刻注意元素的大小，麻烦。不推荐。
:border-box; ：如果给一个元素设置大小的话，该大小内包含了内外边框所有的大小，也就是说给一个元素设置大小为100的话，那他的实际大小就是一百，方便，推荐。

元素选择器

如果你要给HTML元素设置CSS样式，你需要在元素中设置"id" 和 "class"属性。

通过 id 属性给元素设置样式:

css中以 # 来为指定的 id 设置样式，如：给 id="papa" 的元素设置样式：
#papa
{
    text-align:center;
    color:red;
}
注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

通过 class 属性给元素设置样式:

为class属性设置样式有别于id属性，因为id是唯一的，所以只能给单个元素设置样式，而 class属性则可以为一类符合要求的元素设置样式。

CSS中以 . 来为指定的 class 设置样式，如：给 class="mom" 的元素设置样式：
.mom {text-align:center;}
你也可以给一类符合规则的 HTML 元素标签设置样式。

如：给 class="mom" 的 p 元素标签设置文本居中样式:
p.mom {text-align:center;}
注意:类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

具体的选择器介绍：
h1,h2,p
{   /* 对所有 h1 - h2 - p 元素设置样式 */
    color:green;
}

p{ color:green; } /* 为所有 p 元素设置样式。*/

.marked{ color:green; } /* 为所有 class="marked" 的元素设置样式。*/

.marked p{ color:green; } /* 为所有 class="marked" 的元素内的 p 元素设置样式。*/

p.marked{ color:green; } /*为所有 class="marked" 的 p 元素设置样式样式。*/

#mom { color:green; }  /* 为id="mom" 的元素设置样式*/

div p{ background-color:yellow; }  /* 为div标签内所有的 p 标签设置样式 */

div>p{ background-color:yellow; }  /* 为 div 标签下的直系 p 标签设置样式 */

div+p{ background-color:yellow; }  /* 为和 div 标签同级的后面那一个 p 标签设置样式 */

div~p{ background-color:yellow; }  /* 为 div 标签同级后的所有 p 标签设置样式 */

p > i:first-child { color:blue; }  /* 为所有 p 标签下的第一个 i 标签设置样式 */

p:first-child i { color:blue; }  /* 为第一个 p 标签内所有的 i 标签设置样式  */

h1:before { content:url(smiley.gif); } /* 在所有 h1 标签的开头插入图片 */

h1:after{ content:url(smiley.gif); } /* 在所有 h1 标签的结尾插入图片 */

[title]{ color:blue; }  /* 给有 title 属性的元素设置样式 */

[title=run]{ border:5px solid green; }  /* 给 title="run" 的元素设置样式 */

[title*=hello] { color:blue; }  /* 给 title 属性的值内有 "hello" 字眼的元素设置样式  */

input[type="text"] { display:block; }  /* 给input标签中 type="text" 属性的标签设置样式 */


input[type=text]:focus { background-color: red; } /* 当input标签中type="text"的元素获得焦点的时候(被鼠标点击的时候) 改变背景颜色 */

样式表 - 优先级介绍：

当浏览器读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

样式表分为：外部样式表、内部样式表、内联样式。

外部样式表

当样式格式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从 mystyle.css 文件中读到样式声明，并根据它来格式化文档。

外部样式表文件可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
注意：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式

例如当样式仅需要在一个元素上应用一次时，就可以使用内联样式。如：
<p style="color:sienna;margin-left:20px">这是一个段落。</p> 
多重样式

如果某个元素或属性被定义了多个样式表，那么后者会覆盖前者中相同的属性的值，并继承前者中后者没有的属性值。

例如，外部样式表拥有针对 h3 的三个属性：
h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}
而内部样式表拥有针对 h3 的两个属性：
h3
{
    text-align:right;
    font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
优先级关系：

多重样式表的优先级如下：

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

选择器的优先级关系：
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
如：HTML文档标签：
<div class="content-class" id="content-id"></div>
CSS样式设置：
#content-id {
    color: red;
}
.content-class {
    color: blue;
}
div {
    color: grey;
}
则：div 最终的颜色显示为红色。因为 id选择器的优先级大于其他两个选择器

为元素设置背景：

CSS 背景属性用于定义HTML元素的背景。属性介绍：

属性描述
background 简写属性，作用是将背景属性值设置在一个声明中。

background-color
设置元素的背景颜色。
background-image 把图像设置为背景。
background-repeat 设置背景图像是否及如何平铺
background-attachment 背景图像是否固定或者随着页面的滚动而滚动。
background-position 设置背景图像的位置。

background-color：给指定元素设置其的背景颜色。
body {background-color:#b0c4de;}
颜色值可以是：

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

以下实例中, 给 h1、 p 、和 div 元素设置不同的背景颜色:
h6 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
background-image : 给指定元素设置其的图片背景

默认情况下，背景图像会进行重复平铺显示，以覆盖整个元素实体.如：
body
{
	background-image:url("aa.jpg");
}
有些时候这样子就会使得页面很不美观，我们可以通过 background-repeat 属性来控制页面是否平铺或平铺的方向。如：
body
{
	background-image:url("aa.jpg");   /* url("照片所在地及名称") */
    background-repeat:repeat-x;      /* 水平平铺 */
 /* background-repeat:repeat-y; */   /* 垂直平铺 */
 /* background-repeat:no-repeat; */  /* 不平铺 */
}
还可以通过 background-position 属性改变图像在背景中的位置。如：
body
{
	background-image:url("aa.jpg");
    background-repeat:no-repeat; /* 不平铺 */
    background-position:right top;  /* 将图片放在右顶端位置 */
                        /* 可以通过改变值，对图片的位置进行改变 */
}
上面的背景图形在页面移动时会跟着移动，要想页面移动时图形保持不动的话就可以通过 background-attachment 属性来实现该操作。如：
body 
{
	background-image:url("aa.jpg");
    background-repeat:no-repeat;       /* 不平铺 */
    background-attachment:fixed;       /* fixed = 背景图片不会随着页面的滚动而滚动。|
                                          local = 背景图片会随着元素内容的滚动而滚动。*/ 
}
上面所有的设置看起来都太长了，要是想简短点就可以通过简写属性 background 来实现对应的操作。如：
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为：

background-color --------> background-image -----------> background-repeat ---------> background-attachment ---------> background-position

以上属性无需全部使用，你可以按照页面的实际需要使用。

字体样式设置

属性描述
font-family 指定文本使用的字体
font-size 指定文本的字体大小
font-style 将文本转化为斜体文本
font-variant 以小型大写字体或者正常字体显示文本
font-weight 指定字体的粗细。

font-family ：设置文本的字体

可以为 font-family 属性设置多个字体。如果浏览器不支持第一个字体，则会尝试下一个。每个值用逗号分开。如果字体名称包含空格，它必须加上引号。在HTML标签中使用"style"属性时，必须使用单引号。
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:"楷体",Helvetica,sans-serif;}
自定义字体：
@font-face  /* 将指定字体包含到该网页中 */
{
	font-family: myFirstFont;  /* 字体的名称 */
	src: url('Sansation_Light.ttf')   /* 字体文件所在位置 */
}

div
{
	font-family:myFirstFont;
}
font-size ：给字体设置大小
h1 {font-size:larger;}  /* 把该元素字体设置为比父元素更大的尺寸。 */
h2 {font-size:smaller; }/* 把该元素字体设置为比父元素更小的尺寸。 */
p {font-size:100%;}  /* 按百分比来设置元素字体的大小 */
font-style ：将文本转化为斜体文本
p.italic {font-style:italic;}  /* 斜体文字，当有些字体不支持斜体时，不会对其进行斜体转换*/
p.oblique {font-style:oblique;}  /* 将文字强制斜体 */
font-variant : 将英文转为大写且缩小该字母
p.small {font-variant:small-caps;}  /* 将全部小写转为大写，且缩小其的字号，原本就是大写的字母的则保持不变 */
font-weight : 指定字体的粗细。
p.light {font-weight:lighter;}  /* 定义更细的字符。 */
p.thick {font-weight:bold;}    /* 定义粗体字符 */

CSS中对文本进行样式设置:

属性描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 设置文本的对齐方式
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

color:给文本设置颜色。

颜色属性值可为:

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h5 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
text-align：设置文本的对齐方式。
h1 {text-align:center;}       /* 居中对齐 */
p.date {text-align:right;}    /* 右边对齐 */
p.main {text-align:justify;}  /* 两端对齐且换行的话上下文字体会自动对齐 */
text-decoration : 可用来修饰文本，对文本添加或删除上下划线等。
h4.under { text-decoration: underline;  /* 给文本添加下划线 */ }

h4.over { text-decoration: overline;  /* 给文本添加上划线 */ }

p.line { text-decoration: line-through;  /* 定义穿过文本的一条线 */}

p.blink { text-decoration: blink;  /* 定义闪烁的文本 */}

a.none { text-decoration: none;  /* 不对文本进行修饰操作 */ }

p.underover { text-decoration: underline overline;  /* 上下划线 */ }

h2.papa { text-decoration: underline overline dotted red;   /* 点线 */ }

h3.mom { text-decoration: underline overline wavy blue;    /* 波 浪 线 */ }
letter-spacing ：设置字符之间的间距
h2 {letter-spacing:2px;}     /* 设置每个字符之间的间距为两个像素的距离 */
h3 {letter-spacing:-3px;}    /* 设置每个字符之间的间距为负三个像素的距离 */
line-height : 设置每行文本的行高
/* 大多数浏览器的默认行高约为110%至120%。 */

p.small {line-height:3;}    /* 当前元素的行高 x 3 == 120% x 3 */
p.big {line-height:200%;}   /* 按百分比来设置行高 */
text-indent ：对文本进行首行缩进操作
p {text-indent:50px;}   /* 首行缩进50个像素的距离 */
direction ：设置文本的文本方向。
div.ex1
{
	direction:rtl;  /* 设置文本方向为右往左。"ltr"则为从左往右 */
}
text-shadow ：给文本设置阴影效果
h1 {text-shadow:2px 2px 10px green;}  
/* 值顺序为: 
必需，水平阴影的位置，允许负值。  
必需，垂直阴影的位置，允许负值   
可选，阴影模糊的范围   
可选，阴影的颜色  */
text-transform ：设置字母的大小写显示
p.uppercase {text-transform:uppercase;}   /* 将全部字母都转为大写 */
p.lowercase {text-transform:lowercase;}   /* 将全部字母都转为小写 */
p.capitalize {text-transform:capitalize;} /* 每个单词的首字母为大写 */
white-space : 规定文本中空白的处理方式
p
{
	white-space:pre;      /* 保留标签中任何的空白空格，类似 <pre> 标签 */
	white-space:nowrap;   /* 文本不会换行，默认忽略换行符，除非遇到<br>标签才会换行 */
	white-space:pre-line;  /* 去掉文本中的前后空格，但保留换行符 */
}

文本溢出处理：

<p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
<p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><br>
	
<p>div 使用 &quot;text-overflow:clip&quot;:</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

为文本自动换行，不断开其单词的完整性。

p.test
{
	width:11em; 
	border:1px solid #000000;
	word-wrap:break-word;  /* 为文本自动换行 */
}

元素的作用范围介绍：

html中每一个元素都有自己的四个范围值，分别是：外边框、边框、内边框、实际编辑范围。

不同部分的说明：

外边框：该边框是透明色的，作用是让元素与元素之间做隔离用的，这样两个元素就不会挨在一起了。
边框：该边框是可以定义实体的，作用是让用户可以设置自己的边框，这样就可以让元素看起来更美观了。
内边框：该边框的颜色是和实际编辑范围的颜色一样的，但不能在其范围内添加文本，其的作用是隔离边框和实际编辑范围用的，这样就不会因为边框挨着字体而使得该元素不美观了。
实际编辑范围：可编辑范围，可以在这里自行编辑你的内容。
div {
    background-color: lightgrey;
    width: 300px;    /* 设置元素的实际作用范围为 300px */
    border: 25px solid green;   /* 设置元素的边框为 粗25px 实线 绿色的 */
    padding: 50px;  /* 设置元素的内边框为 50px */
    margin: 30px;   /* 设置元素的外边框为 30px */
}

给元素边框设置样式：

提示：border-style 、 border-width 、border-color

当给这三个属性赋四个值时，边框接收到的结果是：上 - 右 - 下 - 左
当给这三个属性赋三个值时，边框接收到的结果是：上 - 右和左 - 下
当给这三个属性赋两个值时，边框接收到的结果是：上和下 - 左和右

border-style：

即可设置四条边的各自样式，也可同时设置四条边的全部样式。
p.none {border-style:none;}         /* 无边框。 */
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.hidden {border-style:hidden;}    /* 隐藏边框。 */
p.mix {border-style: dotted dashed solid double;}  /* 定义四条边都不一样的边框-上-右-下-左 */
border-width:

即可设置四条边的各自的宽度，也可同时设置四条边的全部宽度。
p.one 
{
	border-style:solid;
	border-width:5px 10px 20px 40px;  /* 为每一条边设置不同的宽度 上-右-下-左 */
}
p.two 
{
	border-style:solid;
	border-width:5px;  /* 将四条边的宽度设为 5px */
}
border-color：

即可设置四条边的各自的颜色，也可同时设置四条边的全部颜色。
p.three
{
	border-style:solid;
	border-color:red;    /* 将四条边的颜色都设为红色 */
}
p.four
{
	border-style:solid;
	border-color:#ff0000 red #0210ff rgb(250,0,255);  /* 定义四条边都不一样的颜色 -上-右-下-左 */
}
border-bottom：

设置下边框的宽度 - 样式 - 颜色
p 
{
	border-bottom:8px dotted red;  /* 将下边框的宽度设为 8px 点线的 红色的 */
}
border-left：

设置左边框的宽度 - 样式 - 颜色
p 
{
	border-left:8px double red;   /* 将左边框的宽度设为 8px 双线的 红色的 */
}
border-righ：

设置右边框的宽度 - 样式 - 颜色
p 
{
	border-right:8px double red;   /* 将右边框的宽度设为 8px 双线的 红色的 */
}
border-top：

设置上边框的宽度 - 样式 - 颜色
p 
{
	border-top:8px double red;   /* 将上边框的宽度设为 8px 双线的 红色的 */
}
border-radius：

这个属性即可以为元素设置相同的角度度数，也可以为四个角设置不同的度数。
#example1
{
	border:2px solid #a1a1a1;
	border-radius:25px;  /* 将四个角都设为 25px 的度数 */
}

border-radius: 15px 50px 30px 5px：第一个值是左上角，第二个值是右上角，第三个值是右下角，第四个值是左下角
border-radius: 15px 50px 30px：第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角
border-radius: 15px 50px：第一个值是左上角和右下角，第二个值是右上角和左下角
给边框设置轮廓样式：

在css中可以通过 outline 属性给边框设置轮廓样式，顺序为：颜色 - 线条的样式 - 线条的宽度
p 
{
	border:1px solid red;  /*设置边框，用于区别边框和外边框用的*/
	outline:green dotted 5px;  /* 将外边框设为绿色，点线，宽度为5px */
}
既可以 颜色-线条样式 ，也可以 线条样式-宽度。
设置元素的外边框的边距

在css中可以通过 margin-top 、margin-bottom 、 margin-right 、 margin-left 属性设置外边框的上 - 下 - 右 - 左间距。
p.margin
{
	margin-top:100px;    /* 上外边距为 100px */
	margin-bottom:100px; /* 下外边距为 100px */
	margin-right:50px;    /* 右外边距为 50px */
	margin-left:50px;     /* 左外边距为 50px */
    margin:20px;   /* 同时设置四边的外边距的间距为20px */
}
设置内间距的填充范围:

在css中可以通过以下属性设置元素的内边距的填充范围。
p.padding
{
	padding-top:10px;      /* 上内间距的填充范围为 10px  */
	padding-bottom:50px;   /* 下内间距的填充范围为 50px  */
	padding-right:30px;    /* 右内间距的填充范围为 30px  */
	padding-left:10px;     /* 左内间距的填充范围为 10px  */
    padding:10px;  /* 将四条边的内边距填充范围设置为 10px */
}

列表样式：

可以为有序列表和无序列表添加两种样式，分别是：list-style-type 、list-style-image

list-style-type：

按指定类型值设置列表的标记符。如：
ul.a {list-style-type:disc;}   /* 实心圆标记 */
该属性还有很多可选值，如下所示：

值描述样式
none 无标记
disc 实心圆标记
circle 空心圆标记
square 实心方块标记
decimal 数字标记
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母(a, b, c, d, e, 等。)
upper-alpha 大写英文字母(A, B, C, D, E, 等。)

list-style-image：将图片设置为标记号
ul 
{
	list-style-image:url('sqpurple.gif');  /* 列表符号是这个图片 */
}

值	描述	样式
none	无标记
disc	实心圆标记
circle	空心圆标记
square	实心方块标记
decimal	数字标记
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母(a, b, c, d, e, 等。)
upper-alpha	大写英文字母(A, B, C, D, E, 等。)

设置表格样式：

设置边框的样式
table, td, th {
    border: 5px solid red;  /* 设置表和单元格的边框为 粗5px 实线的 红色的 */
   /* border: 5px dotted red; */  /* 设置表和单元格的边框为 粗5px 点线的 红色的 */
}
默认的表格边框是两条线的，可以通过 border-collapse:collapse; 属性来将边框变为单线的。
table {
    border-collapse: collapse;  /* 将表格线设为单线的 */
}

table, td, th {
    border: 3px dotted red;  /* 设置表和单元格的边框为 粗3px 点线的 红色的 */
}
设置表格的宽高：

表格中可以通过 width 和 height 来设置表格的宽高。如：
table,td,th
{
	border:1px solid black;
}
table   /* 将表格的宽度设为 100% */
{
	width:100%;  
}
th     /* 设置表格中每个单元格的高度为 50px */
{
	height:50px;
}
表格中文本的对齐方式

可以通过 text-align 属性来设置文本的对齐方式。如：
table,td,th
{
	border:1px solid black;
}
td
{
	text-align:right;  /* 文本右对齐 */
	text-align:left;  /* 文本左对齐 */
}
给表格设置颜色

可以通过 background-color 和 color 属性来为表格背景和文字设置颜色。如：
table, td, th
{
	border:1px solid green;
}
th
{
	background-color:green;  /* 将 th 单元格的背景设为绿色 */
	color:white;  /* 将 th 标签内的文本设为白色 */
}

隐藏元素属性及将元素设为块元素

在css中可以通过 display:none 或 visibility:hidden 属性对元素进行隐藏。属性介绍：

display:none ：将元素进行隐藏，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden ：将元素进行隐藏，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
h1.hidden {visibility:hidden;}   /* 隐藏 class=hidden 的h1元素 */

h1.hidden {display:none;}  /* 隐藏 class=hidden 的h1元素 */
在css中还可以通过 display:inline 或 display:block 将元素设为块元素或内联元素。

display:inline ：将元素设为内联元素，内联元素的前后没有换行符。如: a 标签一样
display:block ：将元素设为块元素，块元素的前后有换行符，如：p 、div 标签一样
span {display:block;}   /* 把span元素设为块元素 */

li {display:inline;}  /* 把列表项显示为内联元素 */

元素定位与显示的前后顺序

在css中，可以通过 position 属性来对元素进行定位设置。
p.pos_fixed
{
	position:fixed;  /* 固定该元素不能移动 */
} 
元素的位置相对于浏览器窗口是固定的，即使窗口是滚动的它也不会移动。
div.sticky {
    position: -webkit-sticky; /* Safari 浏览器中使用该值 */
    position: sticky;  /* 将该元素设为可随页面滚动而滚动，当超出滚动范围时会固定在上面 */
    top: 0px;
}
将该元素设为可随页面滚动而滚动，当超出滚动范围时会固定在上面

position:absolute 将元素设为绝对定位元素，这样就可以将该元素放置在页面中的任何位置了
h2
{
    position:absolute;  /* 将元素设为绝对定位元素 */
    left:100px;
    top:150px;
}
在css中可以使用 position:absolute 配合 z-index:-1 将指定元素放置在其他元素的下面
img
{
	position:absolute; /* 将元素设为绝对定位元素 */
	left:0px;  /* 将该元素放在页面的坐上角位置 */
	top:0px;
	z-index:-1;  /* 将该元素的显示顺序设为其他元素的下面。1 为放置在其他元素的上面 */
}
left:元素距离页面左边多远;
rignt:元素距离页面右边多远;
top:元素距离页面顶部多远;
bottom:元素距离页面低部多远;

overflow属性：

CSS 中 overflow 属性用于控制内容溢出元素框时的显示方式。

值描述
hidden 内容会被修剪，并且其余内容是不可见的。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

注意:overflow 属性只工作于指定高度的块元素上。
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: auto;  /* 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 */
    border: 1px solid #ccc;
}

float 属性

该属性用于设置一个元素在其父的范围内的位置。
img 
{
	float:right;  /* 将图片置于其父标签，也就是文字的右边，left是左边 */
}
缩放页面的话。图片会紧贴右边，文字向下挤压，该属性只能左 - 右不能上下。

给超链接设置样式:

可以通过任何的CSS属性（如：color，font，background 等）来为超链接设置样式。

超链接有不同的状态，同时也可以为他们不同的状态设置不同的样式。状态有：
a:link {color:#000000;}       /* 未访问过的链接*/
a:visited {color:#00FF00;}    /* 已访问过的链接 */
a:hover {color:#FF00FF;}      /* 鼠标移动到链接上时的样式 */
a:active {color:#0000FF;}     /* 鼠标点击时 */
注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。

导航栏样式设置：

导航栏=链接列表。导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

一个导航栏并不需要列表标记，所以使用 list-style-type:none 来移除列表前小标志。同时也不需要内外边距，所以使用 margin: 0; padding: 0; 删除内外边距。

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

定义垂直导航条：

body {
    margin: 0;  /* 去除主体标签的外边距 */
}

ul {
    list-style-type: none;  /* 去掉列表前的小标记 */

    margin: 0;    /* 去除链接列表的内外边距，这样链接元素就会贴在一起了 */
    padding: 0;

    width: 25%;   /* 设置列表的宽，和背景颜色，让列表看起来又宽又好看 */
    background-color: #f1f1f1;

    position: fixed;   /* 将链接列表固定在网页中，这样滚动页面滑条的话链接条就不会跑掉了 */

    height: 100%;   /* 将链接条的高度设为页面的高度，这样就可以呈现垂直平铺了 */
    overflow: auto;   /* 如果导航栏选项过多的话，允许滚动 */
}

li a {
    display: block;  /* 将导航条内的链接标签设为块元素，让整体变为可点击链接区域（不只是文本） */
    color: #000;  /* 将文本颜色设为黑色 */
    padding: 8px 16px;  /* 设置块元素的内边框 */
    text-decoration: none;  /* 不对文本进行装饰 */
}

li a.active {
    background-color: #4CAF50;  /* 将用户所在的链接页面的颜色设为绿色，区别其他链接用的 */
    color: white;/* 文本为白色 */
}

li a:hover:not(.active) {
    background-color: #555;  /* 当鼠标移动到链接处时，改变链接的颜色 */
    color: white;
}

定义水平导航条:

<style>
body {margin:0;}    /* 去除主体标签的外边距 */

ul {
    list-style-type: none; /* 去掉列表前的小标记 */
	
    margin: 0;  /* 去除链接列表的内外边距，这样链接元素就会贴在一起了 */
    padding: 0;
	
    overflow: hidden; /* 如果导航栏选项过多超出范围的话，就隐藏掉多余的选项 */
	position: fixed;  /* 将链接列表固定在网页中，这样滚动页面滑条的话链接条就不会跑掉了 */
    top: 0;  /* 将导航条置于顶部  */
	
    background-color: #333;/* 设置列表的宽，和背景颜色，让列表看起来又宽又好看 */
    width: 100%;  /* 设置导航条的宽度占满整个主体内容 */
}

li {
    float: left;  /* 将列表内的链接设为紧靠左边 */
}

li a {
    display: block; /* 将导航条内的链接标签设为块元素，这样当元素被操作时就是整个标签被操作了 */
    color: white;    /* 将文本颜色设为白色 */
    text-align: center;  /* 标签文本居中对齐 */
    padding: 14px 16px; /* 设置块元素的内边框 */
    text-decoration: none; /* 不对文本进行装饰 */
}

li a:hover:not(.active) {
    background-color: #111;/* 当鼠标移动到‘非当前页面’的链接处时，改变链接的颜色 */
}

a.active {   /* 将用户所在的链接页面的颜色设为绿色，区别其他链接用的 */
    background-color: #4CAF50;
}
</style>

</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li style="border-left:1px solid red";><a href="#contact">联系</a></li>  /* 给这个标签添加分割线 */
  <li style="float:right";  ><a href="#about">关于</a></li>  /* 将这个标签的位置设在导航条的右边 */
</ul>

下拉选项框：

<style>
.dropbtn {  /* 设置下拉按钮的背景颜色 */
    background-color: #4CAF50;
    color: white; /* 字体颜色 */
    padding: 16px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    border: none; /* 去除边框 */
    cursor: pointer;
}

.dropdown {
    position: relative;    /* 将这个标签和其的内在标签进行关联 将下拉菜单的内容放置在下拉按钮*/
    display: inline-block;
}

.dropdown-content {
    display: none;  /* 将下拉列表设为不显示 */
    position: absolute;   /* 将下拉列表设为绝对位置 */
    right: 0;
    background-color: #f9f9f9;  /* 设置其的背景颜色 */
    min-width: 160px;  /* 设置下拉列表的宽度 */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  /* 给下拉列表设置阴影属性 */
}

.dropdown-content a {
    color: black;  /* 设置列表中的选项的 字体颜色 - 内边距 - 不对其进行装饰，去除掉a标签原有的下划线 */
    padding: 12px 16px;
    text-decoration: none;
    display: block;  /* 将其设为块元素 */
}

.dropdown-content a:hover {background-color: #f1f1f1}  /* 当鼠标移到链接元素处时，改变其的背景颜色 */

.dropdown:hover .dropdown-content {
    display: block;  /* 当鼠标移到按钮处时将选项框设为块元素 */
}

.dropdown:hover .dropbtn {
    background-color: #3e6d8e;  /* 当鼠标移到按钮处时，改变按钮的颜色 */
}
</style>
</head>
<body>


<div class="dropdown" style="float:left;"><!-- 标签位置在左边 -->
  <button class="dropbtn">下拉按钮</button>
  <div class="dropdown-content" style="left:0;"> <!-- 标签内的元素左对齐 -->
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

CSS 提示工具(Tooltip)

提示工具在鼠标移动到指定元素后触发

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 标题框 </title>
</head>
<style>

.tooltip {
    position: relative; /* 这两个属性是必需的，大概就是将这个标签和标签里面的提示框进行关联 */
    display: inline-block;

    border-bottom: 1px dotted black; /* 给标签设置一个底线，这样就知道哪个值设了提示框了 */
}

/* 设置提示框 */
.tooltip .tooltiptext {
    visibility: hidden; /* 将提示信息隐藏 */
    width: 120px; /* 设置提示框的宽度 */
    background-color: black; /* 设置提示框的背景颜色 */
    color: #fff; /* 设置提示框内的文本颜色 */
    text-align: center; /* 设置提示框文本对齐方式 */
    border-radius: 10px; /* 设置提示框四个角的弧度 */
    padding: 5px 0; /* 设置提示框的内边框 */
    position: absolute; /* 将提示框的位置设为绝对的，不然提示框所在的位置就会未知了 */
    z-index: 1; /* 提示框显示在所有元素的上面 */

  /* 将提示框显示在父元素的左侧 */
     top: -5px;
     right: 110%;


  /* 将提示框显示在父元素的右侧 */
  /*  top: -5px;
    left: 105%; */


  /*将提示框显示在父元素的上面 */
   /*  bottom: 100%;
    left: 50%;
    margin-left: -60px;*/ /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */

    /* 将提示框显示在父元素的下面 */
    /* top: 100%;
    left: 50%;
    margin-left: -60px; */ /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

/* 为提示框设置箭头 */
.tooltip .tooltiptext::after {
    content: ""; /* 利用after当鼠标移动到该标签处时为提示框添加箭头， */
    position: absolute; /* 将箭头设为绝对位置 */
    margin-top: -5px; /* 当要把箭头放在底部时，请删除这行代码*/
    border-width: 5px;
    border-style: solid;

  /* 将箭头设在文本框的右边 */
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent black ;

  /* 将箭头设在文本框的左边 */
   /* top: 50%;
    right: 100%;
    border-color: transparent black transparent transparent; */

  /* 将箭头设在文本框的上边 */
    /* bottom: 100%;
    left: 50%;
    border-color: transparent transparent black transparent; */

  /* 将箭头设在文本框的下边 */
    /* top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: black transparent transparent transparent; */

}

/* 鼠标移动到此处后的样式 */
.tooltip:hover .tooltiptext {
    visibility: visible; /* 当鼠标移到该标签处，将提示框设置为显示的 */
}

</style>
<body style="text-align:center;">
<p> 提示框 </p>

<div class="tooltip">鼠标移动到我这
  <span class="tooltiptext">提示文本</span>
</div>

</body>
</html>

淡入淡出的提示框：

我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:

只需要在上诉提示工具代码中 “设置提示框” 那边插入

    opacity: 0;  /* 为0 表示提示文本常态下是不可见的 */
    transition: opacity 5s;  /* 设置元素的淡出效果在几秒内完成 */

还有在上诉代码中 “鼠标移动到此处后的样式" 里插入

    opacity: 1;  /* 为1 触发淡入效果 */

给标签设置阴影

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;  /* 将阴影设在元素右 10px 下10px 位置，模糊度为 5px, 阴影颜色为#88888  */
}

渐变：

语法：

background-image: linear-gradient(渐变的起始位置, 起始颜色, 中间的颜色,结尾的颜色);

从上到下的线性渐变：

#grad1 {
    height: 200px;
	background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(red, black); 
}

从左到右的线性渐变：

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

从左上角到右下角的线性渐变

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow); 
}

使用透明度函数 rgba(）完成渐变：

#grad1 {
	height: 200px;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
                        /* rgba( r,g,b,alpha(0-1) ) */
}

css动画效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>-</title>
<style>
div {
    width: 100px;
    height: 50px;
    background: red;
    color: white;
    font-weight: bold;
    transition-duration: 2s; /* 动画效果 会在2秒内完成 */
}

/* 移动 translate */
div.a:hover
{
    /* 元素两秒内从起始位置移动到(距离页面左边100像素，距离页面顶端0像素处) */
    transform: translate(100px,0px);  /* 默认浏览器会使用该语法 */
    -webkit-transform: translate(100px,0px); /* Safari and Chrome 浏览器会使用该语法*/
}

/* 旋转 rotate */
div.b:hover
{    /* 将该元素旋转 180° */
transform: rotate(180deg);   /* 默认浏览器会使用该语法 */
-webkit-transform: rotate(180deg); /* Safari and Chrome 浏览器会使用该语法*/
}

/* 缩放 scale */
div.c:hover
{        /* 将宽度放大至原始大小的两倍，高度放大至原始大小的三倍 可接收负值，来实现元素反转*/
    -webkit-transform: scale(2,3); /* Safari 浏览器会使用该语法*/
    transform: scale(2,3);  /* 默认浏览器会使用该语法 */
}

/* 倾斜 skew */
div.d:hover
{
	/* 元素在 X 轴上倾斜 20 度， 在Y 轴 30 度上倾斜 20 度。 */
	transform:skew(30deg,20deg);	 /* 默认浏览器会使用该语法 */
	-webkit-transform:skew(30deg,20deg); /* Safari and Chrome 浏览器会使用该语法*/
}

</style>
</head>
<body>
<div class="a"> 移动</div><br>
<div class="b"> 旋转</div><br>
<div class="c"> 缩放</div><br>
<div class="d"> 倾斜</div><br>

</body>
</html>

<style> 
div
{
	width:100px;
	height:50px;
	background:red;
	color:white;
	font-weight:bold;
	
    transition-property: width; /* 定义宽度动画效果 */
    transition-duration: 2s; /* 2秒内完成 */
	-webkit-transition-property:width; /* Safari 浏览器中会使用该属性*/
    -webkit-transition-duration:1s;
	
	transition-delay: 2s; /* 鼠标放到该元素两秒后才会执行动画效果 */
    -webkit-transition-delay:2s;	 /* Safari 浏览器中会使用该属性*/
}

#div1 {transition-timing-function: linear;} /* 开始到结束以相同速度过渡效果 */
#div2 {transition-timing-function: ease;} /* 慢速开始，然后变快，然后慢速结束的过渡效果 */
#div3 {transition-timing-function: ease-in;}  /* 全程慢速的过渡效果 */


/* Safari 浏览器中会使用该属性*/
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}


div:hover
{
	width:300px;  /* 鼠标移动到div标签就将其的宽度改为 300像素 */
}
</style>

@keyframes 自定义动画规则

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% - 100% 选择器。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;

	animation-name:myfirst;  /* 在该标签内使用自定义的动画规则 myfirst */
	animation-duration:5s;  /* 在五秒内完成整个动画 */
	animation-timing-function:ease-in-out; /* linear=从头到尾的速度是相同的。ease=以低速开始，然后加快，在结束前变慢。*/
	animation-delay:2s; /* 鼠标放在该标签两秒后触发动画 */
	animation-iteration-count:infinite; /* 指定动画执行次数，infinite=动画播放无数次 ，3=动画播放三次 */
	animation-direction:alternate;/*  alternate=动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 | alternate-reverse=动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 | reverse=动画反向播放。 */
	animation-play-state:running; /* paused=暂停动画 | running=正在运行的动画 */

	/* Safari and Chrome 浏览器中会使用这些属性*/
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:5s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}

@keyframes myfirst
{   /* 定义一个动画类，类名是myfirst */
	0%   {background:red; left:0px; top:0px;}  /* 开始为红色 */
	25%  {background:yellow; left:200px; top:0px;} /* 在 0-25 时间内从红色渐变到黄色 */
	50%  {background:blue; left:200px; top:200px;} /* 在 25-50 时间内从黄渐变到蓝 */
	75%  {background:green; left:0px; top:200px;} /* 在 50-75 时间内从蓝渐变到绿 */
	100% {background:red; left:0px; top:0px;}  /* 最后从绿转为红 */
}

@-webkit-keyframes myfirst /* Safari and Chrome 浏览器中会使用这些属性*/
{  /* 定义一个动画类，类名是myfirst */
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

修饰多列文本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>--</title> 
<style> 
.newspaper {
	
		/* 默认浏览器使用这些属性 */
    column-count: 3;  /* 定义一个有3列文本 */
    column-gap: 40px;  /* 列与列之间的间格是 40像素 */
    column-rule-style: dashed; /* 定义列与列间的线条样式，none=没有线条。| dotted=点线 | dashed=虚线 | solid=实线 | double=双线  */
    column-rule-width: 5px; /* 定义列于列间的线条的宽度 */
	
    /* Chrome, Safari, Opera 浏览器中会使用这些属性*/
    -webkit-column-count: 3;  
    -webkit-column-gap: 40px;
    -webkit-column-rule-style: dashed;
    -webkit-column-rule-width: 5px;

    /* Firefox 浏览器中会使用这些属性*/
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -moz-column-rule-style: dashed;
    -moz-column-rule-width: 5px;
}

h2
{
	column-span:all;  /* 该标签内的文本可以超出列间距 */
	-webkit-column-span:all; /* Safari and Chrome 浏览器中会使用这些属性*/
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
<h2>英国维斯米斯特教堂碑文</h2>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

</body>
</html>

自定义每列的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>--</title> 
<style> 
.newspaper
{
	column-width:100px;  /* 每列的文本的宽为 100像素，超过的话文本就进入下一列 */
	-moz-column-width:100px; /* Firefox 浏览器中会使用这些属性*/
	-webkit-column-width:100px; /* Safari and Chrome 浏览器中会使用这些属性*/
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

</body>
</html>

让用户自行调整文本边框大小：

div
{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	
	resize:both; /* none=用户无法调整元素的尺寸。| both=用户可调整元素的高度和宽度。 | horizontal=用户可调整元素的宽度 | vertical=用户可调整元素的高度 */
	overflow:auto;
}

按钮动画样式：

按压效果：

.button {  /* 按钮原本的样式 */
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41} /* 当鼠标移到按钮时改变背景颜色 */

.button:active {  /* 当点击按钮时改变阴影范围，从而实现按压效果 */
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

动画效果：

.button {  /* 元素原本的样式 */
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {  /* 元素内span标签原本的样式 */
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {  /* 当鼠标移动到该标签上时在其后面插入 >> */
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {  /* 当鼠标移动到该标签上时，改变span的内边框 */
  padding-right: 25px;
}

.button:hover span:after { /* 鼠标移动到按钮时，在span后面插入内容 */
  opacity: 1;
  right: 0;
}

分页效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>--</title> 
<style>
ul.pagination {  /* 基本设置 */
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;} /* 将li标签定位内联标签，这样里面的元素就不会换行了 */

ul.pagination li a { /* a标签整体的初始样式 */
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
	border-radius: 5px;
    transition: background-color 2s; /* 背景颜色的转变会在两秒内完成 */	
}

ul.pagination li a.active {  /* 将当前页的样式进行修改 */
    background-color: black;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: red;} /* 鼠标移到a标签没有对其进行点击时，将其的背景颜色改为红色 */
</style>
</head>
<body>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>
</html>

根据窗口大小的不同执行不同操作：

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    /* 在平板，电脑，手机中，为宽在520-699 or 宽度> 1151像素的窗口设置以下样式 */
    css代码...
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

scree = 电脑屏幕，平板，智能手机等。| all = 所有多媒体类型设备 | print = 打印机 | speech = 屏幕阅读器
语句可支持，and | or | not 比如 @media not print（非打印设备）。

网格布局：

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有（直系）子元素将成为网格元素。

使用 grid-template-columns 属性在网格容器中创建四个列

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>--</title>
<style>
.grid-container {
  display: grid; /* 将该标签设为网格标签 */
  grid-template-columns: auto auto auto auto;  /* 设置四列，每列的列宽为自动的 */
  grid-template-rows: 100px 200px 100px 100px;  /* 将整个标签设为4行的，第一行的行高为 100 ，第二行的行高为 200 */
  grid-column-gap: 10px;	/* 每列间的间距为 10  */
  grid-row-gap: 10px;	/* 每行间的间距为 10  */
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
	
.item1 {
  grid-column-start: 1;  /* 这个元素的宽从第一条线开始到第三条线结束 */
  grid-column-end: 3; /* 宽是左右线条计算的 */
}
	
.item1 {
  grid-row-start: 1; /* 这个元素的高从第一条线开始到第三条线结束 */
  grid-row-end: 3; /* 高是上下线条计算的 */
}	
	
.item6 {
  grid-column: 1 / span 2;  /* 这个元素从第一列左右延申，宽度跨越两列 */
}	
	
.item6 {
  grid-row: 3 / span 2;/* 这个元素从第三行开始上下延申，高度跨越两行 */
}	
</style>
</head>
<body>

<h1>grid-template-rows 属性</h1>

<p>使用<em>grid-template-rows</em> 属性定义第一行高度为 100px，第二行高度为 300px。</p>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

</body>
</html>

给网格元素取名的 grid-area 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>--</title>
<style>
.item1 { grid-area: header; }/* 将这个元素取名为header */
.item2 { grid-area: menu; }/* 将这个元素取名为menu */
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;  /* 将这个标签设置为网格元素 */
  grid-template-areas: /* 这个标签内一共有三行六列，设置每个元素所在的位置 */
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;  /* 每行每列的间距 */
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>



<p>你可以使用 <em>grid-area</em> 属性来命名网格元素。</p>

<p>命名的网格元素可以通过容器的 grid-template-areas 属性来引用。</p>

<p>网格布局容器，设置 6 行 3 列。</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

adjnd

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS教学

文章中包含了CSS各版本的教学，适合零基础小白和资深玩家进行观摩学习复习作用
复制链接

扫一扫

专栏目录

属性	描述
background	简写属性，作用是将背景属性值设置在一个声明中。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-repeat	设置背景图像是否及如何平铺
background-attachment	背景图像是否固定或者随着页面的滚动而滚动。
background-position	设置背景图像的位置。

属性	描述
font-family	指定文本使用的字体
font-size	指定文本的字体大小
font-style	将文本转化为斜体文本
font-variant	以小型大写字体或者正常字体显示文本
font-weight	指定字体的粗细。

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	设置文本的对齐方式
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

值	描述
hidden	内容会被修剪，并且其余内容是不可见的。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

CSS教学

简介

一些属性介绍：

box-sizing

元素选择器

通过 id 属性给元素设置样式:

通过 class 属性给元素设置样式:

具体的选择器介绍：

样式表 - 优先级介绍：

外部样式表

内部样式表

内联样式

多重样式

优先级关系：

多重样式表的优先级如下：

选择器的优先级关系：

为元素设置背景：

background-color：给指定元素设置其的背景颜色。

background-image : 给指定元素设置其的图片背景

字体样式设置

font-family ：设置文本的字体

自定义字体：

font-size ： 给字体设置大小

font-style ：将文本转化为斜体文本

font-variant : 将英文转为大写且缩小该字母

font-weight : 指定字体的粗细。

CSS中对文本进行样式设置:

color:给文本设置颜色。

text-align：设置文本的对齐方式。

text-decoration : 可用来修饰文本，对文本添加或删除上下划线等。

letter-spacing ：设置字符之间的间距

line-height : 设置每行文本的行高

text-indent ：对文本进行首行缩进操作

direction ： 设置文本的文本方向。

text-shadow ： 给文本设置阴影效果

text-transform ： 设置字母的大小写显示

white-space : 规定文本中空白的处理方式

文本溢出处理：

为文本自动换行，不断开其单词的完整性。

元素的作用范围介绍：

给元素边框设置样式：

border-style：

border-width:

border-color：

border-bottom：

border-left：

border-righ：

border-top：

border-radius：

给边框设置轮廓样式：

设置元素的外边框的边距

设置内间距的填充范围:

列表样式：

list-style-type：

list-style-image：将图片设置为标记号

设置表格样式：

设置边框的样式

设置表格的宽高：

表格中文本的对齐方式

给表格设置颜色