css的书写位置
1 内部样式 在head标签内部引入一style标签，在style标签内部写的css属于内部样式
或者叫内联式
2 行内样式
<div style="font-size: 30px;">我很喜欢学习CSS,因为可以让网页变得美化</div>
行内样式用的比较少，一般样式很少情况下可以采用行内式
3 外部样式
<link rel="stylesheet" href="index.css" type="text/css"/>
项目中推荐使用,便于样式和结构分离和维护
css元素的分类
1 块级元素
这些元素可以独占一行,宽高可以设置，假如不设置宽度，默认是父亲的100%
如div、p、h1~h6,nav、header、section等
2 行内元素
这些元素可以并排（行内元素与行内元素），设置宽高无效,宽高由内容撑开
如 span a em strong i 等
3 行内块元素
这些元素可以设置宽高，同时可以并排
如 input img等
css元素的转化
display: inline; /*其他元素转行内元素*/
display: block; /*其他元素转块级元素*/
display: inline-block; /*把其他元素转行内块元素*/
css
选择器和样式属性
选择器：标签选择器 id选择器 class选择器 通配符选择器
结构性选择器 伪类选择器
复合选择器(css2) 交集选择器(标签指定式) 并集选择器 后代选择器
01css书写位置之内部样式.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 type="text/css"> /* css代码*/ div { color: red; } </style> </head> <body> <div>我是内部样式作用的</div> </body> </html>
02css行内样式.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>
03css之外部样式.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; }