什么是css
如何学习
-
css是什么
-
css怎么用(快速入门)
-
CSS选择器(重点+难点)
-
美化网页(文字的美化,阴影,超链接,列表,渐变...)
-
盒子模型
-
浮动
-
定位
-
网页动画(特效效果)
1.1什么是CSS
Casading Style Sheet 层叠级联样式表
CSS:表现 (美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动....
CSS1.0
CSS2.0 DIV(块)+CSS HTML与CSS结构分离的思想,网页变得更简单,SEO
CSS2.1 浮动 定位
CSS3.0 圆角边框,阴影,动画..浏览器兼容性~
1.3、快速入门
style
css的优势
-
内容和表现分离
-
网页结构表现统一,可以实现复用
-
样式十分丰富
-
建议使用独立于html的css的文件
-
利用seo,容易被搜索引擎收录
1.4、css的3种导入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部样式表 --> <style> h1{ color: #3350c2; } </style> <!-- 外部样式 --> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--优先级:就近原则--> <!--行内样式:在标签元素中,编写一个style属性,编写样式即可--> <h1 style="color:red">我是标题</h1> </body> </html>
拓展:外部样式两种写法
-
链接式:link
html
<!-- 外部样式 --> <link rel="stylesheet" href="css/style.css">
-
导入式
@import 是css2.1特有的
<!--导入式--> <style> @import url("style.css"); </style>
2、选择器
作用:选择页面上的某一个或者某一类元素
2.1、基本选择器
-
标签选择器:选择一类标签 标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器,会选择到页面上所有的这个标签的元素*/ h1{ color:red; } p{ font-size: 80px; } </style> </head> <body> <h1>学Java</h1> <h1>学Java</h1> <p>老人说以前的日子</p> </body> </html>
-
类选择器 class:选中所有class属性一致的标签,跨标签 .类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 类选择器的格式 .类的名称{} 好处,可以多个标签归类,是同一个class,可以复用 */ .hbx{ color: aqua; } .kuangshen{ color: #91f82b; } </style> </head> <body> <h1 class="hbx">标题一</h1> <h1 class="kuangshen">标题二</h1> <h1 class="hbx">标题三</h1> <p class="kuangshen">P标签</p> </body> </html>
-
id选择器:全局唯一!#id名字{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器 :id必须保证全局唯一!!! #id名称{ } 不遵循就近原则,固定的 id选择器>类选择器>标签选择器 */ #hbx{ color: chartreuse; } .style{ color: red; } h1{ color: aqua; } </style> </head> <body> <h1 id="hbx" class="style">标题一</h1> <h1 class="style">标题二</h1> <h1 class="style">标题三</h1> <h1>标题三</h1> <h1>标题三</h1> </body> </html>
优先级:id>class>标签
2.2、层次选择器
-
后代选择器:“在某个元素的后面”
/* 后代选择器*/ body p{ background: chartreuse; } </style>
-
子选择器,一代
/* 子选择器*/ body>p{ background:red; }
-
相邻兄弟选择器 同辈 只有一个‘
/* 相邻兄弟选择器 向下衍伸*/ .active + p{ background:rosybrown; }
-
通用选择器
/* 通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/ .active~p{ background: chartreuse; }