IT教程 ·

前端-CSS

  CSS全称为层叠款式表(Cascading Style Sheets),与HTML相辅相成,CSS担任完成网页的排版规划与款式美化,运用CSS款式发起在当前文件夹下建立一个CSS文件夹, 然后在CSS文件夹在建立.css文件, 在css文件中填写网页的款式。

款式特性

层叠性: 多组CSS款式合营作用于一个元素

继续性: 子女元素能够继续先人元素中的某些款式 例 : 大部份的文本属性都能够被继续

款式表的优先级: 优先级用来处置惩罚款式争执问题。同一个元素的同一个款式(比方文本性),在差别处所屡次举行设置,哪种款式表的优先级高选用哪种。

  • 离元素近来的款式优先级最高(就近准绳)
  • 文档内嵌与外链款式表,优先级一致,看代码誊写序次,后来者居上
  • 浏览器默许款式和继续款式优先级较低

  CSS款式分为行内款式(也称为内联款式),重要在单个页面中运用,另有就是内嵌款式以及外链款式。内嵌款式用的最多,外链款式重要用在项目当中,接下来我们细致相识一下。

款式表

插进去款式表的要领有三种:

  • 行内款式
  • 内嵌款式表
  • 外链款式

行内款式

  借助于HTML中style标签属性,为当前的标签元素增加款式声明,行内款式的style值由字符串包括CSS属性和值得键值对构成。

<标署名 style="属性:值;属性:值;">
<div style="background-color:red;color: white">容器</div>

内嵌款式

  内嵌款式在单个网页中是用的比较多的。有了内嵌款式,我们就不须要在html标签中填写款式,那样会显得html代码浓厚,影响寓目浏览代码,而经由过程内嵌款式,在<head>标签中嵌入CSS款式代码。在<style>中经由过程CSS挑选器婚配到HTML代码中对应的标签元素。能够完成款式代码和HTML标签代码星散,让代码看起来越发雅观。

 <style>
    挑选器{
          属性:;
          属性:;
        }
 </style>

外链款式

  外部链接CSS款式,多用于大型的项目网站中,用外部链接CSS款式能够完成前后端星散。假如运用外部链接款式须要在当前文件夹中建立css文件夹,然后把后缀名为.css的款式文件放进去。末了在HTML文件中运用<link>标签引入外部款式表,外部款式文件中一样借助挑选器婚配元素运用款式

<link rel="stylesheet" href="CSS URL" type="text/css">

优先级:行内款式 > 内嵌款式 > 外链款式 > 浏览器默许款式

CSS 挑选器

  经由过程元素名类名id名挑选到页面中拔取相应的元素标签,为其增加CSS款式

* 号挑选器

代表一切

/*去除一切标签元素的表里边框值*/
*{
   margin:0;
   padding:0;
}

标签挑选器

依据标署名婚配文档中一切该标签元素款式:

标署名{
      属性:;
    }
/*为一切p标签增加款式*/
p{
    color: red;
}

id挑选器

ID挑选器能够依据元素的 id 属性值婚配文档中唯一的标签元素,然后指定款式。

CSS 中 id 挑选器以 "#" 来定义。

#标签id名{
    属性:;
}
/*比方*/
#div2{
   color:red;
}

注重 : 元素id具有唯一性,不能运用雷同的ID名;标签id名能够由数字,字母,下划线,- 构成,不能以数字开头; 只管见名知意,多个单词构成时,能够运用衔接符,下划线,小驼峰示意。

class挑选器/类挑选器

  依据元素的class属性值婚配相应的元素,class 挑选器用于形貌一组元素的款式,class 挑选器有别于id挑选器,class能够在多个元素中运用,完成多个标签雷同款式的复用。

CSS 中 class 挑选器以 "." 来定义。

.元素class名{
    属性:;
}
/*比方*/
.blue{
   color:red;
}

特别用法 :

  1. 类挑选器与其他挑选器连系运用时,标签在前, 类挑选器在后 例 : a.c1{ }
  2. class属性值能够写多个,合营运用类挑选器的款式 例 : .c1{ } .c2{ } 

群组挑选器

  为一组标签元素设置一致的款式,不必种别之间用逗号“,”分开。

挑选器1,挑选器2,挑选器3{ 
 
}

前提子女挑选器

  前提子女挑选器:婚配在满足前提挑选器的状况下的一切子女元素(包括直接子元素和间接子元素),子女挑选器与父代挑选器用空格离隔。

/*婚配"挑选器1"中一切满足"挑选器2"的子女标签元素*/
挑选器1 挑选器2{
}

子代挑选器

  父代挑选器与子代挑选器用" > "号衔接,婚配满足挑选器的一切直接子代元素

父代挑选器>子代挑选器{
}

伪类挑选器

为元素的差别状况离别设置款式,伪类挑选器必需与基本挑选器连系运用

  • :nth-child(n)  婚配属于其父元素的第 n 个子元素,不管元素的范例。
  • p:first-child  婚配第一个p元素
  • :link    超链接接见前的状况
  • :visited  超链接接见后的状况
  • :hover   鼠标滑过期的状况
  • :active  鼠标点下去然则不抬起时的状况(激活)
  • :focus   核心状况(文本框被编辑时就称为猎取核心)
  • :after   在元素以后增加内容,合营content属性运用
/*第一个div元素*/
div:nth-child(1){
    }
/*超链接接见前的状况*/
a:link{
    }
/*超链接接见后的状况*/
a:visited{
    }
/*鼠标滑过期的状况*/
.c1:hover{ 
    }
/*每一个<p>元素以后插进去内容*/
p:after
{
  content:"要增加的内容"  
}

注重 :

  • 超链接假如须要为四种状况离别设置款式,必需根据以下序次誊写
  :link       /*接见前*/
  :visited     /*接见后*/
  :hover       /*鼠标滑过期*/
  :active      /*鼠标点下去然则不抬起来*/

属性挑选器

依据属性来挑选元素的挑选器。

挑选包括属性 title 的一切元素

[title]
{
    color:blue;
}

挑选包括属性 title="never" 的一切元素

[title=never]
{
    border:5px solid green;
}

挑选title属性值包括hello的一切元素,运用(~)分开属性和值:

[title~=hello] { color:blue; }

挑选器的优先级

运用挑选器为元素设置款式,发作款式争执时,重要看挑选器的权重,权重越大,优先级越高

挑选器 权重
标签挑选器 1
(伪)类挑选器 10
id挑选器 100
行内款式 1000

  庞杂挑选器(子女,子代,伪类)终究的权重为各个挑选器权重值之和,群组挑选器权重以每一个挑选器零丁的权重为准,不举行相加盘算 例 :

/*群组挑选器之间相互自力,不影响优先级*/
body,h1,p{ /*标签挑选器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合挑选器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合挑选器权重为 100+10 */
 color:blue;
}

元素的尺寸和色彩

元素的尺寸

  1. px  像素单元
  2. %  百分比 相对父元素
  3. em  相对单元 1 em=16px 平常用于挪动端的页面开发 经常使用1.5em
  4. rpx 小程序页面的单元

当页面元素的内容大小超越了元素的宽度,能够运用 overflow 属性 来处置惩罚超越部份的展现体式格局,发起运用auto;

色彩

元素的字体,背景,边框都邑运用到色彩。运用体式格局 color:red;

色彩有以下几种表达要领:

  1. 英文单词  red
  2. rgb:R G B 是红蓝绿三基色, 三个值的大小离别在(0~225)之间,
  3. rgba: a是通明度 值在(0~1)之间。a的值越小,越通明。
  4. 长16进制代表色彩:#ffffff; #000000
  5. 短16进制代表色彩:#fff;#000

盒子模子

  盒模子是针对块元素的,由于每一个块元素就相当于一个盒子,有边框(border)、外边距(margin)和内边距(padding)。

  1. 在容器模子中,它划定了元素处置惩罚内容、内边距、边框和外边距的大小
  2. 最内里是内容,围困内容的是内边距,内边距的边沿是边框
  3. 边框以外是外边距,外边距默许是通明的

盒模子相干的属性会影响元素在文档中的现实占位,进而影响规划

边框

border:width style color;

border-color设置为transparent时,为通明,隐蔽边框。

边框款式border-style属性经常使用的取值:

  • solid:实线边框
  • dotted:点线边框
  • dashed:虚线边框
  • double:双线边框

CSS边框属性许可零丁设置某一方向的边框属性

  • border-top:设置上边框
  • border-bottom:设置下边框
  • border-left:设置左侧框
  • border-right:设置右侧框

一些特别的边框案例:

网页三角标制造:标签元素设置宽高为0、一致设置四个方向通明边框、调解某个方向边框色彩

width: 0;
height: 0;
margin: 0 auto;
border: 50px solid blue;
border-bottom-color:transparent; 
border-left-color:transparent;
border-right-color:transparent;

圆角边框:border-radius 指定边框角的圆角半径

width: 0;
height: 0;
border: 50px solid red;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: green;

当border-radius为长宽的一半时,就是圆了,假如要设置圆角边框能够把边框圆半径border-radius的值设置小一点。

当某个属性能够取四个方向的值得时刻,离别对应以下规律,

  • 一个值 示意一致设置上右下左
  • 两个值 示意离别设置高低 摆布
  • 三个值 示意离别设置上右下,摆布保持一致
  • 四个值 示意离别设置上右下左

能够取四个值得经常使用属性有:border-style、border-width 、 border-color、padding、margin。

表面线

属性:outline

取值:width style color

线边框现实占位,表面不占位,取none能够作废文本输入框默许表面线

盒暗影

属性:box-shadow

取值:h-shadow v-shadow blur spread color;

  • h-shadow 取像素值,暗影的水平偏移间隔
  • v-shadow 取像素值,暗影的垂直偏移间隔
  • blur 取像素值,示意暗影的隐约水平,值越大越隐约
  • spread 选填,取像素值,暗影的尺寸
  • color 设置暗影色彩,默许为黑色

内边距

属性:padding

作用:调解元素内容框与边框之间的间隔

取值:单元是 px 或百分比,但不许可运用负值。内边距padding支撑上右下左取值。

内边距也能够单方向取值:padding-top、padding-right、padding-bottom、padding-left

外边距

属性:margin

作用:调解本元素与其他元素之间的间隔

margin:0; 作废默许外边距

margin:0 auto; 摆布自动外边距,完成元素在父元素范围内水平居中

margin:-10px;元素位置的微调

内边距也能够单方向取值:margin-top、margin-right、margin-bottom、margin-left

外边距兼并问题:当一个元素包括在另一个元素中时,它们的上和包括上/或下和包括下外边距也会发作兼并。元素之间同时设置垂直方向的外边距,终究取较大的值 包括兼并

盒模子终究尺寸的盘算= width/height+padding+border+margin

页面规划

默许规划体式格局,根据代码誊写序次及标签范例从上到下,从左到右顺次展现

定位规划 position

连系定位属性调解元素的展现位置

position: static;

属性值:

  • static默许,没有定位
  • fixed(牢固定位):参照浏览器窗口举行定位,不追随网页转动而转动;
  • relative(相对定位):可参照元素在文档中的原始位置举行偏移
  • absolute(相对定位):参照离他近来的已定位的先人元素举行偏移,假如没有,则参照窗口举行偏移;在文档中不占位,能够手动设置宽高

设置好定位后,就能够入手下手设置偏移属性了,设置定位的元素能够运用偏移属性调解间隔参照物的位置

  • top   距参照物的顶部
  • right  距参照物的右侧
  • bottom 距参照物的底部
  • left  距参照物的左侧
h2.pos_top
{
    position:relative;
    top:-50px;
}

平常状况才采纳 "父相子绝" : 父元素设置相对定位,子元素相对定位,参照已定位的父元素偏移。

堆叠序次

元素发作堆叠时能够运用 z-index 属性调解已定位元素的展现位置,值越大元素越靠上:

属性 : z-index

取值 : 无单元的数值,数值越大,越靠上

堆叠划定规矩:

  • 定位元素与文档中一般元素发作堆叠,永久是已定位元素在上
  • 同为已定位元素发作堆叠,根据 HTML 代码的誊写序次,后来者居上

溢出规划 overflow

overflow:用于掌握内容溢出元素框时展现的体式格局。

属性值:

  • visible:默许值,不会修剪,内容会呈如今元素框以外
  • hidden:内容会被修剪,其他内容不可见
  • scroll:多出内容以转动条情势检察
  • auto:会自动挑选,假如内容被修剪,多出部份以转动条情势展现

注重:overflow 属性只事情于指定高度的块元素上。

浮动规划 float

重要用于设置块元素的水平分列,所以假如要运用float,要把元素变成块元素display:block;,或许元素已是块元素。

属性值:

  • float: left;  设置元素向左浮动
  • float: right;  设置元素向右浮动

特性

  • 元素设置浮动会从原始位置脱流,向左或向右顺次停靠在其他元素边沿,在文档中不再占位
  • 元素设置浮动,就具有块元素的特性,能够手动调解宽高
  • "笔墨围绕":浮动元素遮挡一般元素的位置,没法遮挡一般内容的展现,内容围绕在浮动元素四周展现

常见问题

子元素悉数设置浮动,致使父元素高度为0,影响父元素背景色和背景图片展现,影响页面规划

处置惩罚

  • 关于内容牢固的元素,假如子元素都浮动,能够给父元素牢固高度(例:导航栏)
  • 指定元素两侧不能涌现浮动元素。设置 clear:both; 消灭浮动
  • 为父元素设置 overflow:hidden; 处置惩罚高度为0

展现(Display)与可见性(Visibility)

隐蔽元素

隐蔽元素有两种完成要领

  • display:none
  • visibility:hidden

注重:这两种要领会发生差别的结果,visibility:hidden隐蔽的元素仍占用与未隐蔽之前一样的空间。也就是说,该元素虽然被隐蔽了,但仍然会影响规划。

块元素和内联元素的转变

  将元素变成内联元素

display:inline;

  将元素变成块元素

display:block;

背景属性

CSS 属性定义背景结果:

  • background-color:背景色彩
  • background-image:背景图片
  • background-repeat:设置平铺体式格局
  • background-attachment:背景图象是不是牢固或许跟着页面的其他部份转动。
  • background-position:展现位置

背景色彩

background-color: red;

背景图片

  默许状况下举行平铺反复展现,以掩盖全部元素实体.

background-image : url("图片途径");

设置背景图片,指定图片途径,假如途径中涌现中文或空格,须要加引号

设置色彩渐变

能够运用两个或两个以上节点

 

/*上->下,红变蓝*/
background-image: linear-gradient(#e66465, #9198e5); 
/*左->右,红变黄*/
background-image: linear-gradient(to right, red , yellow); 
/*从左上角入手下手,红变黄*/
background-image: linear-gradient(to bottom right, red, yellow);  
/*带有通明度的渐变*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
/*径向渐变*/
background-image: radial-gradient(red, yellow, green);

设置背景图片的平铺反复体式格局

默许背景图片从元素的左上角展现,假如图片尺寸与元素尺寸不婚配时,会涌现以下状况:

  1. 假如元素尺寸大于图片尺寸,会自动反复平铺,直至铺满全部元素
  2. 假如元素尺寸小于图片尺寸,图片默许从元素左上角入手下手展现,超越部份不可见

平铺体式格局

background-repeat

取值 :

  • repeat: 默许值,沿水温和垂直方向反复平铺
  • repeat-x: 沿X轴反复平铺
  • repeat-y: 沿Y轴反复平铺
  • no-repeat: 不反复平铺

背景是不是牢固

background-attachment:fixed;

属性值:

  • fixed:牢固,背景图片不会跟着页面转动而转动
  • scroll:跟着页面转动而转动
  • local:跟着页面元素转动而转动

展现位置

默许显如今元素左上角

background-position:x y;

取值体式格局:

  1. 像素值
    设置背景图片的在元素坐标系中的出发点坐标
  2. 方位值
    水平方向取值:left/center/right
    垂直方向取值:top/center/bottom

注:假如只设置某一个方向的方位值,别的一个方向默许为center

精灵图手艺:为了削减收集要求,能够将一切的小图标拼接在一张图片上,一次收集要求悉数获得;借助于background-position 对背景图片入手下手位置举行调解,完成展现差别的图标

前端-CSS IT教程 第1张

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #sp {
            border: solid 1px red;
            /* 设置展现背景图片的宽度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background-image: url("imgs/img07.png");
        }
        #sp2 {
            border: solid 1px red;
            /* 设置展现背景图片的宽度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background-image: url("imgs/img07.png");
            background-position: 0 -25px;
        }
        #sp3 {
            border: solid 1px red;
            /* 设置展现背景图片的宽度和高度 */
            width: 25px;
            height: 25px;
            margin: 0 auto;
            background: url("imgs/img07.png") 0 -50px;
        }
    </style>
</head>
<body>
    <div id="sp"></div>
    <div id="sp2"></div>
    <div id="sp3"></div>
</body>
</html>

案例代码

设置背景图片的尺寸

background-size:width height;

取值体式格局 :

  1. 像素值
    500px 500px:同时指定宽高
    500px: 指定宽度,高度自适应
  2. 百分比:参照元素的尺寸举行盘算
    50% 50%; 依据元素宽高,离别盘算图片的宽高
    50%; 依据元素宽度盘算图片宽高,图片高度等比例缩放

背景属性简写

background:color url("") repeat position;

注重 :

  1. 假如须要同时设置以上属性值,遵循相应序次誊写
  2. background-size 零丁设置

文本格式

字体款式

字体系列

font-family:"黑体","Microsoft YaHei",Arial;

取值:

  • family-name:字体范例称号:“宋体”、“微软雅黑”。实在中笔墨体也有英文名,都是一样的。
  • generic-family:字体系列称号:“serif”、“sans-serif”、“monospace”...

注重:能够指定多个字体称号作为备选字体,运用逗号离隔,假如浏览器不支撑第一个字体,则会尝试下一个;假如字体称号为中文,或许称号中涌现了空格,必需运用引号

Serif 和 Sans-serif 字体之间的区分

 

sans-serif 字体比较适合在屏幕上浏览,而 serif 字体更轻易在纸上浏览。“sans”指无。

自定义字体

<style> 
@font-face
{
    font-family: myFirstFont;    /*自定义字体名*/
    src: url(sansation_light.woff);     /*自定义字体URL*/
}
 
div
{
    font-family:myFirstFont;
}
</style>

字体大小

font-size:20px;

浏览器默许字体大小是16px,1em=16px,

字体粗细

font-weight:normal;
  • normal(默许值)等价于400
  • bold   (加粗) 等价于700

斜体

font-style:italic;

字体属性

font : style weight size family;

注重 :

  1. 假如四个属性值都必需设置,严厉根据序次书
  2. size family 是必填项

文本款式

文本色彩

  • 十六进制值,如: #FF0000
  • 一个RGB值,如: RGB(255,0,0)
  • 色彩的称号,如: red
color:red;

文本装潢线

/*删除文本装潢*/
text-decoration:none;

取值 :

  • underline:下划线
  • overline:上划线
  • line-through:删除线
  • none:作废装潢线

在CSS中,运用text-decoration属性来定义段落文本的下划线、删除线和顶划线。none即为默许值,能够用这个属性值也能够去掉已有下划线或删除线或顶划线的款式。

水平对齐体式格局

text-align:center;

取值 :

  • left:左对齐(默许值)
  • center:居中对齐
  • right:右对齐
  • justify:两头对齐

行高

line-height:30px;

运用 : 文本在当前行中永久垂直居中,能够借助行高height调解文本在元素中的垂直展现位置

  1. line-height = height 设置一行文本在元素中垂直居中
  2. line-height > height 文本下移展现
  3. line-height < height 文本靠上展现

特别:line-height能够采纳无单元的数值,代表当前字体大小的倍数,以此盘算行高

字符间距

letter-spacing:2px   /*字母(汉字)字母(汉字)  之间的间距*/
word-spacing:30px;  /*单词与单词 之间的间距*/

文本缩进

text-indent:50px;

大小写转换

text-transform:uppercase;

属性值:

  • uppercase:文本大小
  • lowercase:文本小写
  • capitalize:首字母大写

笔墨方向

direction:rtl;    /*right to left*/

属性值:

  • ltr:默许,从左向右
  • rtl:从右向左

列表款式

经由过程列表款式,设置列表项标记的图象(小黑点、小方框、数字、字母...)。

list-style-type: circle;    /*设置标记为圆圈*/

经常使用属性值:

  • none:无标记
  • disc:默许。标记是实心圆。
  • circle:标记是空心圆。
  • square:标记是实心方块。
  • decimal:标记是数字。
  • lower-roman / upper-roman:小写或大写罗马数字(i, ii, iii, iv, v, I, II, III, IV, V, )
  • lower-alpha / upper-alpha:小/大写写英笔墨母

鼠标箭头款式

cursor:default;

属性值:

  • url:自定义光标的URL
  • default:默许光标
  • auto:浏览器默许光标
  • crosshair:十字线
  • move:可挪动的图标
  • wait:转圈守候的光标
  • help:问号
  • text:可选文本的光标

提醒东西

先让提醒文本隐蔽,当鼠标划过须要提醒的处所的时刻,再让提醒文本展现。

前端-CSS IT教程 第3张

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 教程</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: 6px;
        padding: 5px 0;
        /* 定位 */
        position: absolute;
        z-index: 1;
    }
   /*当鼠标划过期,提醒展现*/
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
</style>
<body style="text-align:center;">

<div class="tooltip">
    鼠标挪动到这<span class="tooltiptext">提醒文本</span>
</div>

</body>
</html>

因而当我们须要提醒条出如今高低摆布的时刻,只须要在提醒条的定位中举行修正。

右侧

前端-CSS IT教程 第4张

.tooltip .tooltiptext {
    top: -5px;    /*提醒条向上挪动5px*/
    left: 105%;  /*提醒条向右挪动5px*/
}

左侧

前端-CSS IT教程 第5张

.tooltip .tooltiptext {
    top: -5px;  /*提醒条向上挪动5px*/
    right: 105%; /*提醒条向右挪动5px*/
}

上面

前端-CSS IT教程 第6张

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;    /*底部撑满,移到最上面*/
    left: 50%;              /*左侧取一半,到中心*/
    margin-left: -60px; /* 向左移,居中 */
}

下面

前端-CSS IT教程 第7张

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;            /*上面取满,到底部*/
    left: 50%;              /*到中心*/
    margin-left: -60px; /* 向左移居中 */
}

指向性箭头

前端-CSS IT教程 第8张

/*在后面增加款式*/
.tooltip .tooltiptext:after {
content: " ";           /*内容为空*/
position: absolute;
top: 100%;              /* 提醒东西底部 */
left: 50%;              /* 到中心 */
margin-left: -5px;      /* 居中 */
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

前端-CSS IT教程 第1张

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<br><br>

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

</body>
</html>

完全代码

其他方向顺次类推

通明属性

opacity:0.5;

0是全通明,1是不通明。

过渡属性

transition:将鼠标悬停在一个元素上,逐渐该元素的属性 值:

/*逐渐转变宽度从 100px 到 300px */
div
{
    width:100px;
    transition: width 2s;
}
div:hover {width:300px;}

transition-delay: 2s;  耽误2s再,变更。

媒体范例

媒体范例许可我们指定HTML文档将如安在差别媒体展现。该文档能够以差别的体式格局显如今电脑屏幕上,手机上、平板上和纸张上。

@media 划定规矩

@media 属性值:

  • all:用于一切媒体装备
  • print:用于打印机
  • handheld:用于很小的手持装备
  • screen:用于电脑展现器
  • tv:用于电视

案例:在电脑屏幕上,字体14px,打印的时刻,字体10px。

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}

屏幕尺寸相应式规划

/* 相应式规划 - 屏幕尺寸小于 800px 时,两列规划改成高低规划 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

动画 @keyframes

@keyframes 划定规矩是建立动画,建立一个动画演示,提供给animation属性挪用。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation: myfirst 5s;
}

还能够运用百分比来划定变化发作的时候,关键词 "from" 和 "to",等同于 0% 和 100%。

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

 

参与评论