　　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;
}

特别用法 :

类挑选器与其他挑选器连系运用时，标签在前, 类挑选器在后例 : a.c1{ }
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;
}

元素的尺寸和色彩

元素的尺寸

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

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

色彩

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

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

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

盒子模子

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

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

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

边框

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);

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

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

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

平铺体式格局

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 对背景图片入手下手位置举行调解，完成展现差别的图标

<!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;

注重：

假如须要同时设置以上属性值，遵循相应序次誊写
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-weight:normal;

normal（默许值）等价于400
bold (加粗) 等价于700

斜体

font-style:italic;

字体属性

font : style weight size family;

注重 :

假如四个属性值都必需设置，严厉根据序次书
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调解文本在元素中的垂直展现位置

line-height = height 设置一行文本在元素中垂直居中
line-height > height 文本下移展现
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：可选文本的光标

提醒东西

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

<!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>

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

右侧

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

左侧

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

上面

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

下面

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;            /*上面取满，到底部*/
    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;
}

<!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;}
}

前端-CSS

款式特性

款式表

行内款式

内嵌款式

外链款式

CSS 挑选器

标签挑选器

id挑选器

class挑选器/类挑选器

群组挑选器

前提子女挑选器

子代挑选器

伪类挑选器

属性挑选器

挑选器的优先级

元素的尺寸和色彩

元素的尺寸

色彩

盒子模子

边框

表面线

盒暗影

内边距

外边距

页面规划

定位规划 position

堆叠序次

溢出规划 overflow

浮动规划 float

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

隐蔽元素

块元素和内联元素的转变

背景属性

背景色彩

背景图片

设置色彩渐变

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

平铺体式格局

背景是不是牢固

展现位置

设置背景图片的尺寸

文本格式

字体款式

字体系列

自定义字体

字体大小

字体粗细

斜体

字体属性

文本款式

文本色彩

文本装潢线

水平对齐体式格局

行高

字符间距

文本缩进

大小写转换

笔墨方向

列表款式

鼠标箭头款式

提醒东西

右侧

左侧

上面

下面

指向性箭头

通明属性

过渡属性

媒体范例

@media 划定规矩

动画 @keyframes

分享本文封面

相关文章

参与评论

登录

快速导航