在head标签内部引入一style标签，在style标签内部写的css属于内部样式 或者叫内联式
< div style=“font-size: 30px;”>我很喜欢学习CSS,因为可以让网页变得美化< /div> 行内样式用的比较少，一般样式很少情况下可以采用行内式
< link rel=“stylesheet” href=“index.css” type=“text/css”/> 项目中推荐使用,便于样式和结构分离和维护
这些元素可以独占一行,宽高可以设置，假如不设置宽度，默认是父亲的100%. （1）能够识别宽高 （2）margin和padding的上下左右均对其有效 （3）可以自动换行 （4）多个块状元素标签写在一起，默认排列方式为从上至下 如div、p、h1~h6,nav、header、section等
这些元素可以并排（行内元素与行内元素）， (1) 设置宽高无效,宽高由内容撑开。 (2) 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间 (3) 不会自动进行换行 如 span a em strong i 等
这些元素可以设置宽高，同时可以并排 ） 如 input img等
display: inline; /其他元素转行内元素/ display: block; /其他元素转块级元素/ display: inline-block; /把其他元素转行内块元素/
<!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 type="text/css"> /* css代码*/ div { color: red; } </style> </head> <body> <div>我是内部样式作用的</div> </body> </html>
<!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> </head> <body> <div style="font-size: 30px;color:pink;">我很喜欢学习CSS,因为可以让网页变得美化</div> </body> </html>
<!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> <link rel="stylesheet" href="index.css" type="text/css"/> </head> <body> <p>外部样式</p> </body> </html>
外部创建的 index.css 文件
p { color: purple; font-size: 26px; }<!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> div { background-color: #ccc; height: 180px; /* width: 400px; */ } </style> </head> <body> <div>aaaa</div> <p>bbbbb</p> <div> <div> 11111111 </div> <p> 22222 </p> </div> </body> </html>
<!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> span { width: 600px; height: 300px; background-color: red; } a { background-color: blue; } </style> </head> <body> <span>11111asadasdad</span> <span>22222</span> <span>33333</span> <a href="#">baidu</a> </body> </html>
<!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> input { /* width: 200px; */ height: 80px; } </style> </head> <body> <input type="text" /> <input type="text" /> <input type="text" /> </body> </html>
<!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> div { width: 100px; height: 100px; background-color: red; display: inline; /*块级元素转行内元素*/ } span { display: block; /*行内元素转块级元素*/ width: 200px; height: 200px; background-color: green; } a { width: 100px; height: 100px; background-color: skyblue; display: inline-block; } </style> </head> <body> <div>abcef</div> <div>abcef</div> <span>行内</span> <span>行内</span> <a href="#">sina</a> <a href="#">sina</a> </body> </html>
