CSS3
文章目录
1-什么是CSS
Cascading Style Sheet 层叠样式表
CSS: 表现( 美化网页 ) 字体 ,颜色, 高度 , 背景, 定位, 浮动
1.2-发展史
CSS1.0
CSS2.0 div 块 + CSS, HTML与CSS结构分离的思想, 网页变得简单, SEO
CSS2.1 浮动, 定位
CSS3.0 圆角边框, 阴影, 动画… 浏览器兼容性
1.3-CSS3快速入门
css的优势:
1、内容和表现分离
2、网页结构表现统一,可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索引擎收录!
1.4-CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
方式一, 内部样式
*/
h1{
color: green;
}
</style>
<!--方式二 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--方式三 行内样式: 在标签元素中写style属性-->
<h1 style="color: red"> 我的标题</h1>
</body>
</html>
样式生效:
下面的生效, 从上覆盖到下面下面的样式生效
外部样式的两种写法:
- 链接式 :
<link rel="stylesheet" href="css/style.css"> - 导入式:
<style> @import "css/style.css"; </style>
2-选择器
作用， 选择页面上的某一个或者某一类元素
2.1-基本选择器
-
标签选择器 : 可以选择一类标签生效, 如: h1{} ,所有的h1标签生效
-
类选择器 : 给标签加上class属性后, 通过.classname生效, 对同classname生效, 可复用
-
ID选择器 :给标签加上ID属性后, 通过#IDname生效, 对id生效, id唯一
-
生效顺序: ID>class>标签选择器
----------------------------------------------------------------------
<style>
/*标签选择器，会选择到页面上所有这个标签的元素*/
h1{
color: red;
}
</style>
--------------------------------------------------------------------
<style>
/*类选择器，.class名称{}
好处, 可以复用
*/
.哈哈哈{
color: red;
}
</style>
<h1 class="哈哈哈">哈哈哈</h1>
------------------------------------------------------------------
<style>
/*id选择器，#id名称{}
id唯一
*/
#哈哈哈{
color: red;
}
</style>
<h1 id="哈哈哈">哈哈哈</h1>
2.2-层次选择器
1.后代选择器: 在某个元素的后面
body p { background: red}
2.子选择器, 一代
body>p { background: red}
3.兄弟选择器(下一个)
.类名 + p{ background : red}
4.通用选择器( 下面的所有兄弟元素)
.类名 ~ p{ background: red}
2.3-结构伪类选择器
/*u1的第一个子元素*/
ul li:first-childf{
background: #02ff00;
}
/*u7的最后一7元素*/
ul 1i:Tast-child{
background: #ff4832;
}
/*选中p1:定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效! ,顺序
*/
p:nth-child(2){
background: #2700ff;
}
/*选中父元素,下的p元素的第二个,类型*/
p:nth-of-type (1){
background: yel1ow;
}
2.4-属性选择器(常用)
/*属性名, 属性名=属性值(正则)
=绝对等于
*=包含这个元素
Л=以这个开头
s=以这个结尾1
*存在id属性的元素*/
a [id]{
background: yellow;
}
id=first的元素
a [id=first]{
background: #63ff23;
}
/*class中有links的元素*/
a[class"="1 inks"]{
tbackground: yellow;
}
*!*选中href中以http开头的元素☆!*/
a[hrefA=http]{
background: yel1ow;
/*}
3-美化网页元素
span标签: 重点要突出的字
3.1-字体样式
- 字体
font-family: "Arial Black",楷体 - 字体大小
font-size: 50px50em : em一个字的宽度 - 字体粗细
font-weight: bold - 字体颜色
color: red - 一行写:
font: oblique boler 16px "楷体"oblique斜体
3.2-文本样式
- 颜色
color: #0000FF单词, RGB 0-F RGBA透明度 0-1 - 排版
text-align: center/left/right - 缩进
text-indent: 2em - 行高
line-height: 50px行高等于块的高度时可以上下居中 - 下划线
text-decoration: underline - 中划线
text-decoration: line-through - 上划线
text-decoration: overline - 去下划线
text-decoration: none - 图片文本水平对齐
vertical-align: middle
3.3-超链接伪类
-
a: hover {color: #FFO0FF}/当有鼠标悬停在链接上/
-
a:link {color: #F0000} /* 未访问的链接*/
-
a:visited {color: #00FF00} / 已访问的链接*/
-
a:active {color: #000FF} / 被选择的链接*/
3.4-列表
/*u1 1i*/
/*
list-style:
none去掉原点
circle空心圆
decimal数字
square正方形
*/
/*u7{*/
/*background: #aOaOaO;*/
/*}*/
u1 1i{
height: 30px;
1ist-style: none;
text-indent: 1em;
}
3.4-背景
背景图片
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: ur1("images/tx.jpg");
/*默认是全部平铺的repeat*/
}
. div1{
background-repeat: repeat-x;
}
. div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat ;
}
3.5-渐变
网址: Grabient
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4-盒子模型
什么是盒子模型
margin: 外边框
padding: 内边距
border: 边框
/*body总有一- 个默认的外边margin:0，常见操作*/
/*h1,ul,Li, a, body{*/
/*margin: 4;*/ 上下左右 margin: 1px,1px,2px,2px
/*padding: 8;*/
/*text-decoration: none; */
/*}*/
/*border:粗细，样式，颜色*/
border: 1px solid red;
5-浮动
块级元素:独占一行
h1-h6 p div 列表等等
行内元素: 不独占一行
span a img strong...
行内元素可以被包含在块级元素中, 反之不行
5.1-display 行内元素
/*
block 块元素
inline 行内元素
inline-block 是块元素, 但是可以内联, 在一行
none 隐藏
*/
display: inline-block
5.2-float 浮动
- 左右浮动
float: left/right
5.3-父级边框塌陷
- clear: right; 右侧不允许有浮动元素
- clear: left; 左侧不允许有浮动元素
- clear: both; 两侧不允许有浮动元素
- clear: none; 不允许有浮动元素
解决方案:
- 增加父级元素 height
- 增加一个空的div标签, 清除浮动
<div class = "clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
- oveflow 在父级元素中添加 overflow: hidden
- 父类添加一个伪类: after , 类似于2 空div
#father:after{
content: '';
display: block;
clear: both;
}
小结:
- 浮动元素后面增加空div
简单, 尽量避免空div
- 设置父元素的高度
简单, 元素假设有了固定高度,就会被限制
- overflow
简单, 下拉的一些场景避免使用
- 父类添加一个伪类:after(推荐)
没有副作用
5.4-display,float对比
- display
- 方向不可以控制
- float
- 浮动起来需解决边框塌陷问题
6-定位
6.1-相对定位
position: relative; 相对于原来的位置定位
top: -20px; 向上移动
left: 20px; 向右移动
right: 20px; 向左移动
bottom: -20px; 向下移动
- 虽然位置偏移了,原来的位置会被保留
相对定位小练习
- 使用
<div>和超链接<a>布局 - 每个超链接高宽都是50px.背景粉色, 鼠标移上去变蓝色
- 使用相对定位改变每个超链接的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div{
margin: 20px;
padding: 10px;
border: 1px solid red ;
width: 150px;
height: 150px;
}
a:hover{
background: aqua;
}
a{
width: 50px;
height: 50px;
background: pink;
text-align: center;
line-height: 50px;
font-size: 12px;
color: white;
text-decoration: none;
display: block;
}
#div_a1,#div_a3{
position: relative;
left: 100px;
}
#div_a2,#div_a4{
position: relative;
top: -50px;
}
#div_a5{
position: relative;
top: -150px;
left: 50px;
}
</style>
</head>
<body>
<div class="div">
<a href="#" id="div_a1">链接1</a>
<a href="#" id="div_a2">链接2</a>
<a href="#" id="div_a3">链接3</a>
<a href="#" id="div_a4">链接4</a>
<a href="#" id="div_a5">链接5</a>
</div>
</body>
</html>
6.2-绝对定位
- 相对于父级元素的定位, 没有父级就相对于浏览器
position: absolute;
6.3-固定定位
固定在浏览器的某个位置
position: fixed;
6.4-z-index层级
- 0是最底层, 数字越大越顶层
z-index:0
透明度
opacity:0.5; 50%透明
filter: Alpha(opacity=50);//早期使用的, 可以同时写上提高兼容性
扫一扫
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
