前端之HTML、CSS（三）

前端之HTML、CSS（三）

　　CSS

　　CSS-Cascading Styles Sheets，层叠样式表。用于网页的表现，主要用于布局和修饰网页。

　　CSS引入方式

　　CSS的三种引入方式：行内样式，内部样式表，外部样式表。

　　行内样式：通过标签的style属性设定样式，基本语法：<标签名 style="属性1：属性值1；属性2：属性值2；...">内容</标签名>。

1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>行内样式-测试</title>
5 </head>
6 <body>
7     <h4 style="color: red; font-size: 25px">行内样式</h4>
8 </body>
9 </html>

　　内部样式表：使用<style>标签将CSS代码集中写在HTML文档的<head>标签中，基本语法：<head><style type="text/css>选择器{属性1：属性值1；属性2：属性值2；...}</style></head>。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>内部样式-测试</title>
 6     <style type="text/css">
 7         h3{
 8             color: red;
 9             font-size: 25px;
10         }
11         p{
12             color: gray;
13             font-size: 20px;
14         }
15     </style>
16 </head>
17 <body>
18     <h3>内部样式</h3>
19     <p>内部样式表使用&lt;style&gt;标签将CSS代码集中写在HTML文档的&lt;head&gt;标签中</p>
20 </body>
21 </html>

　　外部样式表：将所有样式从HTML文档中剥离出来，放在一个或者多个.css为扩展名的外部样式表中，通过<link>标签将外部样式表文件链接到HTML文档中，基本语法：<head><link href="css文件路径"，type="text/css"，rel="stylesheet" /></head>。其中href、type、rel三个属性是必须属性，href属性值为css文件路径，一般为相对路径；type属性值为text/css，表示链接文件为css样式表；rel属性值为stylesheet，指定链接文档类型为css文件。

　　HTML文档

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>外部样式-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/test2_css.css">
 7 </head>
 8 <body>
 9     <h3>外部样式</h3>
10     <p>将所有样式从HTML文档中剥离出来，放在一个或者多个.css为扩展名的外部样式表中。</p>
11 </body>
12 </html>

　　CSS文件

1 h3 {
2     color: red;
3     font-size: 25px;
4 }
5
6 p {
7     color: gray;
8     font-size: 20px;
9 }

　　文件结构

　　

　　CSS基础选择器

　　在内部样式表和外部样式表中都使用了CSS样式，CSS样式规则：选择器 {属性1：属性值1；属性2：属性值2；...}。

　　标签选择器：使用HTML标签名作为选择器。格式：标签名 {属性1：属性值1；属性2：属性值2；...}。

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>CSS基本选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <p>CSS基本选择器</p>
10     <div>CSS基本选择器</div>
11 </body>
12 </html>

　　css

1 p {
2     font-size: 20px;
3 }
4
5 div {
6     font-size: 25px;
7 }

　　类选择器：在HTML标签中添加class属性，<标签名 class="属性值">content</标签名>，在CSS文件中使用 .属性值 { 属性1：属性值1；属性2：属性值2；...}。

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>CSS基本选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <div class="first">类选择器</div>
10     <div class="second">类选择器</div>
11 </body>
12 </html>

　　css

1 .first {
2     font-size: 20px;
3 }
4
5 .second {
6     font-size: 25px;
7 }

　　多类名选择器：在HTML标签中class属性只能添加一个，但是属性值可以是多个，<标签名 class="属性值1 属性值2">content</标签名>，表现在CSS文件中为 .属性值1 { 属性1：属性值1；属性2：属性值2；...} \n .属性值2 { 属性1：属性值1；属性2：属性值2；...}。以此形式为HTML标签赋予多种样式。

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>多类名选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <div class="fontc fonts">多类名选择器</div>
10     <p class="fontc">多类名选择器</p>
11 </body>
12 </html>

css

1 .fontc {
2     color: red;
3 }
4
5 .fonts {
6     font-size: 40px;
7 }

　　注意：多个类名之间使用空格隔开，类名表现为class属性的属性值。即<标签名 class="类名1 类名2 ...">。多种CSS样式如果属性有相同，后写入的CSS样式会覆盖前写入的CSS样式属性，即只看CSS文件中属性的写入的前后关系，而与HTML文档中class属性值调用前后无关。

　　ID选择器：同类选择器使用方式相似，在HTML标签中添加id属性，<标签名 id="属性值">content</标签名>，在CSS文件中使用 #属性值 { 属性1：属性值1；属性2：属性值2；...}。

html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>ID选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <div id="first">ID选择器</div>
10     <div>ID选择器</div>
11     <div>ID选择器</div>
12     <div id="last">ID选择器</div>
13 </body>
14 </html>

css

1 #last {
2     color: red;
3 }
4
5 #first {
6     font-size: 40px;
7 }

　　注意：ID选择器和类选择器的区别在于调用次数，ID对任何一个HTML标签来说是唯一，再调用时也只能在单个标签中调用一次。

　　通配符选择器：选择器使用通配符 * 表示，* 表示HTML中所有标签，是广义上的标签选择器。在CSS文件中使用 * {属性1：属性值1；属性2：属性值2；...}。 不推荐使用

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>通配符选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <h1>通配符选择器</h1>
10     <div>通配符选择器</div>
11     <p>通配符选择器</p>
12     <span>通配符选择器</span>
13 </body>
14 </html>

　　css

1 * {
2     color: blue;
3 }

　　CSS复合选择器

　　复合选择器就是利用多个基本选择之间的组合来定位元素内容。

　　后代选择器：当标签存在嵌套关系，标签之间就存在父子关系了。外层标签是内层标签的“长辈”，嵌套一层为父标签，两层为祖父标签，三层及以上为祖先标签；同理，内层标签为“晚辈”，嵌套一层为子标签，两层为孙子标签，三层及三层以上为祖孙标签。后代选择器利用父子关系，由“长辈”到“晚辈”的顺序，依次以空格间隔来定位“晚辈”标签中内容。基本语法：父标签名 子标签名 {属性1：属性值1；...}

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>后代选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <!-- div 为 p 的父标签，为 span 的祖父标签 -->
10     <div>
11         <!-- p 为 div 的子标签，为 span 的父标签 -->
12         <p>
13             <!-- span 为 div 的孙子标签，为 p 的子标签 -->
14             <span>后代选择器</span>
15         </p>
16     </div>
17 </body>
18 </html>

　　css

1 div p span {
2     font: oblique bolder 30px "Microsoft YaHei";
3     color: rgb(50%, 50%, 70%);
4 }

　　当需求变为：当目标内容在<div><p>des-content</p></div>中,又存在多个此形式标签，标签名可以换作类名加以区别，准确定位元素。

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>后代选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <div class="div_red">
10         <p>123</p>
11     </div>
12     <div>
13         <p>456</p>
14     </div>
15     <div>
16         <p class="p_blue">789</p>
17     </div>
18 </body>
19 </html>

　　css

1 /*需求:123为红色显示,456为黑色显示,789为蓝色显示;*/
2 .div_red p {
3     color: red;
4 }
5
6 div .p_blue {
7     color: blue;
8 }

　　子代选择器：明确一点，儿子、孙子或者祖孙都是应该是子代，如果只是定位子代可以使用后代选择器，而子代选择器只是作用儿子标签。基本语法：父标签名 > 子标签名 {属性1：属性值1；...}。

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>子代选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <div>
10         <span>后代选择器</span>
11         <p>
12             <span>后代选择器</span>
13         </p>
14     </div>
15     <div>
16         <span>子代选择器</span>
17         <p>
18             <span>子代选择器</span>
19         </p>
20     </div>
21 </body>
22 </html>

　　css

1 div span {
2     color: red;
3 }
4
5 div>span {
6     color: blue;
7 }

　　效果显示

　　原因解释：CSS代码由上至下进行加载，第一部分CSS样式是使用后代选择器，<div>标签中所有<span>标签均设置为红色，加载完毕时，四行文本应该均为红色；第二部分CSS样式使用子代选择器，<div>标签中属于<div>儿子标签的<span>标签均被蓝色覆盖，由此出现上图情况。

　　注意:可以使用标签名（类名）>标签名（类名）>标签名（类名）>...一级一级往下定位。

　　多项选择器：多个目标内容分布于多个且多种标签内，设定统一格式，使用多项选择器。基本语法：标签1，标签2，标签3，...{属性1：属性值1；...}，表示标签1、标签2、标签3中内容样式一致。

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>多项选择器-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <h1>多项选择器</h1>
10     <p>多项选择器</p>
11     <span>多项选择器</span>
12     <div>多项选择器</div>
13 </body>
14 </html>

　　css

1 h1, p, div {
2     color: red;
3 }

　　伪类选择器

　　链接伪类选择器：a:link { }、a:visited { }、a:hover { }、a:active { }分别表示：未访问的链接、已访问的链接、鼠标悬停的链接、选定的链接。使用时，顺序不要颠倒。“lvha-love hate”。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>链接伪类选择器-测试</title>
 6     <style type="text/css">
 7         a:link {
 8             color: blue;
 9             font-size: 50px;
10             text-decoration: none;
11         }
12         a:visited {
13             color: green;
14         }
15         a:hover {
16             color: red;
17         }
18         a:active {
19             color: orange;
20         }
21     </style>
22 </head>
23 <body>
24     <a href="http://www.baidu.com", target="_blank">百度</a>
25 </body>
26 </html>

　　CSS字体样式属性

　　font-size：设置文字大小，属性值的单位可以使用绝对单位长度，也可以使用相对单位长度。推荐使用相对单位长度。相对单位长度：em（相对于当前对象文本的字体尺寸，一般为1em为16px）、px(像素单位)；绝对单位长度：in、cm、mm。

font-family：设置字体。属性值使用偶数大于14px字号，多个字体使用英文逗号隔开，中文字体或者英文字体含空格、#等字符需要引号引入，英文字体一般不需要引号引入。字体属性值可以设置多个，按照系统是否含有依次读取。

字体的Unicode编码
中文名称 英文名称 Unicode编码
宋体 Simsun \5B8B\4F53
新宋体 NSimsun \65B0\5B8B\4F53
黑体 SimHei \9FD1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53

　　font-weight：设置字体的粗细，属性值可以为normal（400），bold（700），bolder、lighter。

　　font-style：设置字体风格，属性值为normal（标准字体）、italic（斜体）、oblique（文字倾斜显示）。

　　font：综合设置字体格式，基本语法：选择器 {font：font-style属性值 font-weight属性值 font-size属性值/line-height属性值  font-family属性值;}，字体格式设置必须按照语法顺序写，必须保留font-size、font-family属性，其他属性可以使用默认属性值。"斜粗大体"

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>font属性-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <p>font属性设置</p>
10 </body>
11 </html>

　　css

1 p {
2     font: italic 400 20px sans-serif,"宋体","Microsoft YaHei";
3 }

　　注意：上述css可以调整顺序进行测试。

　　CSS外观属性

　　color：定义文本颜色，三种取值方式：定义颜色（red、green、blue）；十六进制（#FF0000、#FF6600、#29D794）；RGB代码（rgb（255，0，0）或者rgb（100%，0%，0%））。

　　注意：十六进制表示颜色，两连字符相同可以简写为一个，#FF0000可以表示为#F00，#FF6600可以表示为#F60。

　　line-height：设置行间距，使用单位长度：px、em、%。当行高和盒子高度相等时，可以使单行文本垂直居中；行高大于盒子高度，文本会偏下，反之偏上。

　　text-align：设置文本内容的对齐方式，属性值有：left、center、right。

　　text-indent：设置首行文本的缩进，使用单位长度：px、em、%，允许使用负值，1em相当于一个汉字的宽度。

　　text-decoration：设置文本装饰，属性值有：none（无装饰）、underline（下划线）、line-through（删除线）、overline（上划线）。

　　html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>CSS外观属性-测试</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css">
 7 </head>
 8 <body>
 9     <div class="first_div">CSS外观属性</div>
10     <div class="second_div">CSS外观属性</div>
11     <div class="third_div">CSS外观属性</div>
12     <div>CSS外观属性</div>
13     <div>CSS外观属性</div>
14     <div class="last_div">CSS外观属性</div>
15 </body>
16 </html>

　　css

 1 .first_div {
 2     color: red;
 3     line-height: 20px;
 4     text-align: center;
 5     text-decoration: underline;
 6 }
 7
 8 .second_div {
 9     color: #f60;
10     text-align: left;
11     text-indent: 2em;
12     text-decoration: line-through;
13 }
14
15 .third_div {
16     text-indent: -2em;
17     line-height: 30px;
18 }
19
20 .last_div {
21     color: rgb(255,255,0);
22     text-align: right;
23     text-decoration: overline;
24 }

　　标签的显示模式

　　块级元素：通常独占一整行或者多个整行，可以设置宽度、高度以及对齐方式等属性，常用于网页布局和网页结构搭建。常见块级元素有：<h1>-<h6>、<div>、<p>、<ul>、<ol>、<li>标签等。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>块级元素测试</title>
 6     <style type="text/css">
 7         div {
 8             width: 100px;
 9             height: 100px;
10             background: gray;
11         }
12     </style>
13 </head>
14 <body>
15     <div></div>
16 </body>
17 </html>

　　行内元素：不占独立的区域，只占有自身内容（文字、图片）的大小的区域，一般情况下不可设置宽度、高度以及对齐方式等属性，常用于控制页面内容显示的样式。常见行内元素有：<a>、<span>、<strong>、<b>、<em>、<i>、<ins>、<u>、<del>、<s>标签等。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>行内元素测试</title>
 6     <style type="text/css">
 7         span {
 8             width: 100px;
 9             height: 100px;
10             background: gray;
11         }
12     </style>
13 </head>
14 <body>
15     <span>行内元素</span>
16 </body>
17 </html>

　　行内块元素：不独占一整行，与相邻行内元素在一行，会存在空白缝隙，但是可以设置宽度、高度以及对齐方式等属性。常见行内块元素有：<image />、<input />、<td>标签等。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>行内块元素测试</title>
 6     <style type="text/css">
 7         input {
 8             width: 200px;
 9             height: 25px;
10         }
11     </style>
12 </head>
13 <body>
14     <input type="" name="">
15     <input type="" name="">
16 </body>
17 </html>

　　块-行内-行内块相互转换：使用display属性设定可以对三种显示模式改变：display:inline转换为行内元素；display：block转换为块级元素；display：inline-block转换为行内块元素。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>显示模式转换-测试</title>
 6     <style type="text/css">
 7         div {
 8             width: 100px;
 9             height: 100px;
10             background-color: gray;
11             display: inline;
12         }
13         span {
14             width: 40px;
15             height: 40px;
16             background-color: red;
17             display: block;
18         }
19         a {
20             width: 80px;
21             height: 40px;
22             background-color: blue;
23             display: inline-block;
24         }
25     </style>
26 </head>
27 <body>
28     <div>123</div>
29     <div>123</div>
30     <span>abc</span>
31     <span>abc</span>
32     <a href="http://www.baidu.com">百度</a>
33     <a href="http://www.baidu.com">百度</a>
34 </body>
35 </html>

　　导航栏案例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>导航栏-测试</title>
 6     <style type="text/css">
 7         .nav {
 8             width: 800px;
 9             height: 50px;
10             margin: 0 auto;
11         }
12         .nav a {
13             width: 120px;
14             height: 50px;
15             display: inline-block;
16             background-image: url(images/bg.png);
17             text-align: center;  /*文本水平居中*/
18             line-height: 50px;  /*单行文本垂直居中方式*/
19             font-weight: bold;
20             font-size: 14px;
21             color: #fff;
22             text-decoration: none;
23         }
24         a:hover {
25             background-image: url(images/bgc.png);
26         }
27     </style>
28 </head>
29 <body>
30     <div class="nav">
31         <a href="#">公司首页</a>
32         <a href="#">公司介绍</a>
33         <a href="#">产品介绍</a>
34         <a href="#">资料下载</a>
35         <a href="#">新闻浏览</a>
36         <a href="#">联系我们</a>
37     </div>
38 </body>
39 </html>

　　

原文地址：https://www.cnblogs.com/snow-lanuage/p/10393939.html

时间： 2024-07-31 11:30:45

前端之HTML、CSS（三）的相关文章

Web前端基础(6):CSS(三)

1. 定位 定位有三种:相对定位.绝对定位.固定定位 1.1 相对定位 现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别. 2.设置相对定位之后,我们才可以使用四个方向的属性: top.bottom.left.right. 特性:1.不脱标  2.形影分离  3.老家留坑 所以说相对定位在页面中没有什么太大的作用.影响我们页面的布局.我们不要使用相对定位来做压盖效果 用途: 1.微调元素位置 2.做绝对定位的参考(父相子绝)绝对定位会说到此内容. 1.2 绝对定位

前端开发：css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

前端之DIV+CSS布局

刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识也不可逃避,之前总觉的前端是记忆的东西,遵循常规套路即可,总感觉繁琐,现在逼着自己学习了DIV+CSS,感觉是自己以前多虑了,什么东西只要你肯学,就不是问题,任何困难在坚持的态度下都会迎刃而解.现在来讲下前端的DIV+CSS: 1.之前的网页布局设计 以前我们依赖于强大的Dreamweaver图形化

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标: 第一.梳理知识架构 负责内容的HTML 负责外观的css(层叠样式表) 负责行为的js ps切图 第二.分解目标(起步阶段.提升阶段.成型阶段) 起步阶段: 基本知识的掌握 常用工具的掌

前端开发规范-CSS规范

前端开发规范-CSS规范 1.通用约定 (1)代码组织 以组件为单位组织代码段: 制定一致的注释规范: 组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔: 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动: 良好的注释是非常重要的.请留出时间来描述组件(component)的工作方式.局限性和构建它们的方法.不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的. 提示:通过配置编辑器,可以提供快捷键来输出一致认可的注释模

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

前端深入之css篇丨2020年前，彻底掌握css动画【animation】

原文:前端深入之css篇丨2020年前,彻底掌握css动画[animation] 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 上一篇文章我们已

前端基础之CSS补充

目录 选择器优先级 CSS属性相关 宽和高 字体属性 背景属性 字重(粗细) 文本颜色 文字属性 文字对齐 文字装饰 背景属性 支持简写 边框 border-radius 圆形 display属性 display:"none"与visibility:hidden的区别:** CSS盒子模型 margin (行距)*** padding (内容填充) *** Border(边框) Content**(内容) float 浮动 三种取值 浮动的简单引用 clear 浮动带的影响 清除浮动

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d