1.什么是CSS?
1.Cascading Style Sheet 层叠级联样式表 2.作用:梅花网页 3.字体，衍射，边距，高度，
2.CSS发展史
1.发展历程: CSS1.0 CSS2.0 : DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得更简单 CSS2.1 : 浮动 定位 CSS3.0 : 圆角 阴影 动画... 2.CSS的好处: (1).表现和内容分离 (2).网页结构表现统一，可以实现复用 (3).样式十分的丰富 (4).建议使用独立于htm的CSS (5).利用SEO，容易被搜索引擎收录 3.body{}他的边界是无限的，所以我们要想要居中需要借助div{}
3.CSS基础入门
在HTNL中，写CSS文件的基本格式
<style> 可以编写CSS的代码，最好使用分号隔开 2.语法: <style> 选择器{ 声明1; 声明2; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 规范<style> CSS--> <style> h1{ color: red; } </style> </head> <body> <h1>我是标题</h1> </body> </html>
4.CSS与HTML的链接
1.CSS_File与Html_File的链接. 只需要在:HTML的文件中的<head><head>之间加入 <head> <meta charset="UTF-8"> <title>Title</title> <!-- 规范<style> CSS--> <link rel="stylesheet" href="../HTNL-CSS/demo1.css"> </head>
代码的链接操作:
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 规范<style> CSS--> <link rel="stylesheet" href="../HTNL-CSS/demo1.css"> </head> <body> <h1>我是标题</h1> </body> </html>
CSS: h1{ color: red; }
5.CSS的四种导入方式
优先级的问题: 1.行内样式:<h1 style="color: red">我是标题</h1> 2.内部样式: <style> h1{ color: blue; } </style> 3.外部样式: (1).连接式: <link rel="stylesheet" href="../HTNL-CSS/demo1.css"> (2).导入式:(CSS2.1) <style> @import url("demo1.css"); </style> 4.优先级的操作: 就近原则,谁距离标签近，谁优先级高
6.三种基本选择器 (重要)
1.作用: 选择页面上某一个或则某一类元素 2.基本选择器: (1).标签选择器 (选择一类标签) (2).类 选择器 (选择class属性的标签 可以跨标签) (3).id选择器 (全局唯一) 3.优先级: id>class>标签
1.标签选择器: eg: h1{ } h2{ } 2.局限性: 占据特定的标签
2.类选择器: 基本格式: .Class(名称){} 优点:可以更好的分类，可以复用.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .liming{ color: red; } </style> </head> <body> <h1 class="liming">我是标题</h1> <h1 >我是标题</h1> <h2>傻瓜</h2> </body> </html>
3.id选择器 #id{} 优点:具有唯一性，不可以被复用.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #limi{ color: #bd6d6d; } </style> </head> <body> <h1 id="limi">我是标题</h1> <h1 >我是标题</h1> <h2>傻瓜</h2> </body> </html>
