文章目录
- 什么是CSS
- CSS发展史
- CSS语法
- 四种导入css的方式
- 三种基本选择器
- 层次选择器
- 结构伪类选择器
- 属性选择器
- 盒子模型
- 定位
什么是CSS
- Cascading Style Sheet(层叠级样式表)
- 表现(美化网页
- 字体,颜色,边距,高度,宽度,背景图片,网页定位
如何查看一个网页的CSS?
浏览器->右击->检查(审查元素)->控制台(control)
CSS发展史
- CSS1.0
- CSS2.0 (在这个版本出现了DIV(块)+CSS,HTML与CSS结构分离的思想,使网页变得简单,SEO(搜索引擎优化))
- CSS2.1
- CSS3.0
CSS语法
css位于style标签中,所有的css都遵循下面这个语法公式
选择器{
声明1;
声明2;
声明3;
…}
<style>
h1{
color:red;
witdh:50px;
height:50px;
} /* 给网页中所有的h1标签设置样式*/
</style>
四种导入css的方式
-
行内样式(位于元素中)
<h1 style="color:red">初识css</h1>
-
内部样式(位于独立的style标签中,并且style标签位于head标签中)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css学习</title> <style> h1{ color:red; witdh:50px; height:50px; } </style> </head>
-
外部样式(在项目中新建独立的css文件)
-
链接式
<link rel="stylesheet" href="css/style.css">
-
导入式
<style> @import url("css/style.css") /*@import是CSS2.0特有的*/ </style>
-
优先级:行内样式>内部样式>外部样式
三种基本选择器
选择器的作业:选择页面上的某一个或者某一类元素
-
标签选择器
-
类选择器
-
id选择器
<style> /* 标签选择器*/ h1,h2,h3{ color:red; font: oblique bolder 35px 楷体; } </style> }/* 多种选择器可以写一起,用逗号隔开*/ /* 类选择器*/ .lsp{--> color:yellow }--> /* id选择器*/ #hh{--> color:black; } </style>
层次选择器
-
后代选择器
-
子代选择器
-
相邻兄弟选择器
-
通用选择器
<style> /* 后代选择器(所有后代的p标签样式都改变)*/ body p{ background:#ff0000; } /* 子代选择器(子代前面样式都改变,一代)*/ body>p{ background:#ff0000; } /* 相邻兄弟选择器*/ .active+p{ background:#ff0000; } /*通用选择器*/ .active~p{ background:#ff0000; } </style>
结构伪类选择器
特点就是条件判断选择器中一般含有冒号:
<style>
ul li:first-child{ /*选择ul的第一个子元素*/
color:red;
}
ul li:last-child{ /*选择ul的最后一个子元素*/
color:red;
}
p:hover{ /*hover表示鼠标放上时显示的特效*/
color:blue;
}
</style>
属性选择器
属性选择器比id和类选择器高级,建议常用
<style>
h2[id]{
background:#ff0ff0;
}
h2[class]{
background:#ff0ff0;
}
h2[id=ll]{
background:#ff0ff0;
}
h2[class*="zz"]{
background:#ff0ff0;
}
a[href^=http]{
background:#ff0ff0;
}
a[href$=html]{
background:#ff0ff0;
}
</style>
更多CSS玩法(浮动,动画等):
菜鸟教程
盒子模型
- 内边距(相当于我们所说盒子的厚度)
- 外边距(相当于我们把盒子放在一个容器中,两个之间的距离)
定位
<!--绝对定位 (position:absloute)相对定位 固定定位 方块定位等等,改变positon属性值即可-->
<style>
h4{
position:fixed;
color:red;
}
</style>
更多推荐
CSS3初识
发布评论