CSS
css发展史
CSS1.0
CSS2.0 DIV(块) + CSS,HTML与CSS结构分离的思想,网页变得简答,SEO
CSS2.1 浮动,定位
CSS3.0 圆角,阴影,动画… 浏览器兼容性
CSS快速入门
# 基本入门
# 规范: <style> 可以编写css代码,最好写在head里面
# <style> 里面的 h1 是标签名选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
# link 引入css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<link rel="stylesheet" href="../style.css"></link>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
CSS的优势
1、内容和表现分离
2、网页结构表现统一,可以实现复用
3、样式十分的丰富
4、建议使用独立于html 的css样式
5、利用SEO,容易被搜索引擎收录!
三种CSS导入方式
第一种
# 行内样式: 在标签元素中,编写一个style属性,编写样式即可
<h1 style="color: blue;">余香</h1>
第二种
# 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
h1{
color: brown;
}
</style>
</head>
<body>
<h1>余香</h1>
</body>
</html>
第三种
# 外部样式
# link引入在其它地方别写的css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<link rel="stylesheet" href="../style.css"></link>
</head>
<body>
<h1>余香</h1>
</body>
</html>
# 引入的css样式
h1{
color: aqua;
}
三种方式采用的优先级
# 优先级: 行内样式>内部样式>外部样式
# 就近原则
# 哪个样式离标签近就先用哪个
三种基本选择器
作用: 选择页面上的某一个或者某一类元素
基本选择器
标签选择器
类选择器
# 好处,可以多个标签归类,是同一个class,可以复用
id选择器
# 全局唯一,不可复用
总结
1.id选择器>类选择器>标签选择器
2.类选择器前面记得加 .
3.id选择器前面记得加 #
4.类选择器 可以多个标签归类,是同一个class,可以复用
5.id选择器 全局唯一 不可复用
6.标签选择器可以复用,但是当同一个标签想使用别的样式就不可以,此时可以用类选择器,根据类名选择.
层级选择器
了解,会用即可
1.后代选择器: 在某个元素的后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
body h1 {
color: pink;
}
</style>
</head>
<body>
<h1 >余香</h1>
<h1 >余香</h1>
<h1 >余香</h1>
<p>哈哈</p>
</body>
</html>
2.子选择器,一代
# 就是在某一个标签的里面 爸爸和儿子的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
li>p {
color: pink;
}
</style>
</head>
<body>
<li>
<p>张三</p>
<p>李四</p>
</li>
</body>
</html>
3.相邻兄弟选择器
# 相同标签的下一个显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
.yu+p {
color: pink;
}
</style>
</head>
<body>
<li>
<p class="yu">张三</p>
<p>李四</p>
</li>
</body>
</html>
4.通用选择器
# 相同标签下下面所有都显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
.yu~p {
color: pink;
}
</style>
</head>
<body>
<li>
<p class="yu">张三</p>
<p>李四</p>
<p>李四</p>
<p>李四</p>
<p>李四</p>
</li>
</body>
</html>
结构伪类选择器
了解
# 选中li标签里面第一个元素 first-child
# 选中li标签里面最后一个元素 last-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
li p:first-child{
color: red;
}
li p:last-child{
color: pink;
}
</style>
</head>
<body>
<li>
<p>张三</p>
<p>李四</p>
<p>李四</p>
<p>李四</p>
<p>李四</p>
</li>
</body>
</html>
属性选择器(常用)
# 通过标签查找匹配的选择器并显示,其他属性匹配也可以 例如: a[href="h.jpg"]
# = 等于
# *= 通配 匹配所有
# ^= 匹配以什么为开头
# $= 匹配以什么为结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
p[id=first] {
color: red;
}
</style>
</head>
<body>
<p class="item last" id="first">张三</p>
<p class="item">张三</p>
<p class="item last">张三</p>
<p class="item last">张三</p>
<p class="item last">张三</p>
<a href="h.jpg" target="_blank">点击</a>
</body>
</html>
美化网页元素
为什么要美化网页
1.有效的传递页面信息
2.美化网页、页面漂亮、才能吸引用户
3.凸显页面的主题
4.提高用户的体验
span标签: 重点要突出的子,使用span套起来,就是一个约定.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
#first{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="first">java</span>
</body>
</html>
字体样式
# font-familt: 字体类型
# font-size: 字体大小 px像素 em缩进 ....
# font-weight: 字体粗细
# color: 颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
p[id=first]{
font-family: fantasy;
font-size: 50px;
font-weight: bold;
}
</style>
</head>
<body>
<p id="first">哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
文本样式
# text-aglin: 排版
# text-indent: 段落首行缩进
# line-height: 行高
# text-decoration: underline : 下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
p[id=first]{
/* text-align: center; */
text-indent: 2em;
line-height: 200px;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="first">哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
文本阴影和超链接伪类
# text-decoration: none 取消下划线
# hover 鼠标悬浮的状态
# active 鼠标按住未释放的状态
# text-shadow 阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
a{
text-decoration: none;
}
a:hover{
color: red;
font-size: 50px;
}
a:active{
color: rosybrown;
}
p[id=first]{
text-shadow: violet 10px 10px 10px;
}
</style>
</head>
<body>
<a href="#">Java开发首次</a>
<p id="first">C++技术实战</p>
</body>
</html>
背景
背景图片
# background-image: url("1.jpg");默认是平铺的
# background-repeat: no-repeat;把背景图片改为不平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
#nav{
width: 500;
height: 300px;
border: red 1px solid;
background-image: url("1.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="nav">
</div>
</body>
</html>
盒子模型
什么是盒子
margin: 外边框
padding: 内边框
border: 边框
圆角边框和阴影
# border-radius 添加圆角的边框 根据尺寸来定
# box-shadow 盒子的阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
display和浮动
# display:block 块元素
# float 浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
div{
width: 100px;
height: 50px;
border: 2px solid red;
}
span{
width: 100px;
height: 50px;
border: 2px solid red;
display: block;
}
</style>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
</body>
</html>
overflow及父级边框塌陷问题
# clear: right 右侧不允许有浮动元素
# clear: left 左侧不允许有浮动元素
# clear: both 俩侧不允许有浮动元素
# clear: none 没有浮动元素
解决方案:
1.增加父级元素的高度
2.增加一个空的div标签,清除浮动
# voerflow: 避免内容不能完整的展开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
div{
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</div>
</body>
</html>
定位
相对定位
# position: relative; /*相对定位*/
# 相对定位就是在最一开始的位置进行偏移
# 例如: 向上偏移了10px,又想向下偏移10px,这时不会回到一开始的位置,而是在一开始的位置向下偏移10px,这就是相对定位,就是无论想什么地方偏移,永远都是从最一开始的位置开始偏移。
# top 上
# left 左
# bottom 下
# right 右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
div{
margin: 10px;
padding: 10px;
border: 2px solid red;
}
div[id=first]{
background-color: yellow;
border: 2px dotted blue;
position: relative; /*相对定位*/
top: -10px;
}
div[id=two]{
background-color: pink;
border: 2px dotted blue;
}
div[id=three]{
background-color: purple;
border: 2px dotted blue;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="two">第二个盒子</div>
<div id="three">第三个盒子</div>
</div>
</body>
</html>
绝对定位
# position: absolute; /*绝对定位*/
# 没有父级元素定位的前提下,相对于浏览器定位
# 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
# 在父级元素范围内移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
<style>
div{
margin: 10px;
padding: 10px;
border: 2px solid red;
}
div[id=first]{
background-color: yellow;
border: 2px dotted blue;
position: absolute; /*绝对定位*/
}
div[id=two]{
background-color: pink;
border: 2px dotted blue;
}
div[id=three]{
background-color: purple;
border: 2px dotted blue;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="two">第二个盒子</div>
<div id="three">第三个盒子</div>
</div>
</body>
</html>
固定定位
# position: fixed;
# 位置固定死,不会因为页面滑动或者页面改变而改变