CSS基础
CSS基础
1、什么是CSS
如何学习
- 1：CSS是什么
- 2：CSS怎么用（快速入门）
- 3：CSS选择器（重点+难点）
- 4：美化页面（文字，阴影，超链接，列表，渐变…）
- 5：盒子模型
- 6：浮动
- 7：定位
- 8：页面动画（特效效果）
1.1、什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
1.2、发展史
CSS1.0
CSS2.0 DIV（块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性
1.3、快速入门
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>我是标题h1>
body>
html>
CSS的优势：
1：内容和表现分离
2：网页结构表现统一，可以实现复用
3：样式十分的丰富
4：建议使用独立于html的css文件
5：利用SEO，容易被搜索引擎收录！
1.4、CSS的三种导入方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: chocolate;
}
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1 style="color: red">我是标题h1>
body>
html>
拓展：外部样式的两种写法
-
链接式：
html
<h1 style="color: red">我是标题h1> -
导入式：
@import是CSS2.1特有的
<style> @import url("css/style.css"); style>
2、选择器
作用：选择页面上的某一个或者某一类元素
2.1、基本选择器
1、标签选择器：选择一类标签 标签{}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*标签选择器：会选择到页面上所有的这个标签的元素*/
h1{
color: #81eeff;
background: #ffac7c;
border-radius: 24px;
}
p{
font-size: 80px;
}
style>
head>
<body>
<h1>学Javah1>
<h1>学Javah1>
<p>看路飞p>
body>
html>
2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
类选择器的格式 .class的名称{}
好处，可多个标签归类，是同一个class，可以复用
*/
.style1{
color: #ffac7c;
}
.style2{
color: #81eeff;
}
style>
head>
<body>
<h1 class="style1">标题1h1>
<h1 class="style2">标题2h1>
<h1>标题3h1>
<p class="style1">标题4p>
body>
html>
3、ID选择器：全局唯一 #id名{}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
id选择器:id必须保证全局唯一
#id名称{}
优先级：不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择权
*/
.style1{
color: red;
}
#lufei{
color: yellow;
}
h1{
color: blue;
}
style>
head>
<body>
<h1 class="style1" id="lufei">标题1h1>
<h1 class="style1">标题2h1>
<h1>标题3h1>
body>
html>
2.2、层次选择器
1、后代选择器：在某个元素的后面 祖爷爷，爷爷，爸爸，你
后代选择器
body p{
background:red;
}
2、子选择器：一代 儿子
子选择器
body > p{
background:yellow;
}
3、相邻兄弟选择器：同辈
相邻兄弟选择器：只有一个，相邻（向下） .active + p { background:blue; }
4、通用选择器
.active ~ p{ background:red; }
2.3、结构伪类选择器
伪类：条
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style> /*ul的第一个子元素*/ ul li:first-child{ background: #02ff00; } /*ul的最后一个子元素*/ ul li:last-child{ background: #023154; } /*选择p1：定位到父元素，选择当前的第一个元素 选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素才生效 */ p:nth-child(1){ background:#2700ff; } /*选中父元素，下的p元素的第二个，类型*/ p:nth-of-type(1){ background:red; } /*伪类：鼠标移动到元素会显示效果*/ a:hover{ background: yellow; } style>head><body><a href="index.html">1234564a><h1>h1h1><p>p1p><p>p2p><p>p3p><ul> <li>li1li> <li>li2li> <li>li3li>ul>body>html>
2.4、属性选择器（常用）
id+class结合~
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.demo a{
float: left;/*向左浮动*/
display: block;/*显示为块级元素*/
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align:center;/*文本居中对齐*/
color: gainsboro;
text-decoration: none;/*取消A标签下划线*/
margin-right: 5px;/*外边距靠右5px*/
front:bold 20px/50px Arial;/*加粗 字体大小 字体宽高*/
}
/*属性名 属性名 = 属性值（可以正则表达式）
= 绝对等于
+= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*A标签存在id元素的*/
a[id]{
background: yellow;
}
/*id为first的*/
a[id = first]{
background: yellow;
}
/*class中有links的元素*/
a[class *= links]{
background: blue;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background: #81eeff;
}
style>
head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1a>
<a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last">10a>
p>
body>
html>
3、美化网页元素
3.1、为什么要美化网页
1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签：重点要突出的字，使用span套起来
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style> #title{ font-size: 50px; } style>head><body>欢迎学习<span id="title">Javaspan>body>html>
3.2、字体样式
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style> body{ font-family: "Agency FB",楷体; color: #a13546; } h1{ font-size:50px; } .p1{ font-weight:bolder; } style>head><body><h1>故事介绍h1><p class="p1">海贼王一般指航海王。 《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品p><p>TalkOP海道-海贼王论坛-海贼王中文网-航海王论坛-中国最大的海贼王论坛致力于为广大One Piece海贼王(航海王)爱好者提供一个最有爱的交流平台。p><p>how do i say i love you? how do i tell you i care? how do i tell you i've missed you, and let you know i'm here?p>body>html>
3.3、文本样式
1、颜色 color rgb rgba
2、文本对齐的方式 text-align = center
3、首行缩进 text-indent：2em
4、行高 line-height
5、装饰 text-decoration
6、文本图片水平对齐：vertical-align：middle
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style> h1{ color: rgba(0,255,255,0.2); } .p1{ text-indent: 2em; } .p3{ background: blue; height: 300px; line-height: 200px;/*一行的行高200px*/ } /*下划线*/ .l1{ text-decoration: underline; } /*中划线*/ .l2{ text-decoration: line-through; } /*上划线*/ .l3{ text-decoration: overline; } style>head><body><p class="l1">1234564p><p class="l2">1234564p><p class="l3">1234564p><h1>故事介绍h1><p class="p1">海贼王一般指航海王。 《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品p><p>TalkOP海道-海贼王论坛-海贼王中文网-航海王论坛-中国最大的海贼王论坛致力于为广大One Piece海贼王(航海王)爱好者提供一个最有爱的交流平台。p><p class="p3">how do i say i love you? how do i tell you i care? how do i tell you i've missed you, and let you know i'm here?p>body>html>
DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <style> image,span{ vertical-align: middle; } style>head><body><p> <img src="images/1.jpg" alt="" width="50px" height="50px"> <span>13487sadhui9878span>p>body>html>
3.4、阴影
/*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/ #price{ text-shadow: #81eeff 5px 5px 2px; }
3.5、超链接伪类
正常情况下就用：a，a.hover
/*默认的颜色*/ a{ text-decoration: none; color: black; } /*鼠标悬浮的状态*/ a:hover{ font-size: 20px; color: #02ff00; } /*鼠标按住未释放的状态*/ a:active{ color: yellow; }
3.6、列表
#nav{
background: #fff198;
width: 400px;
}
.title{
background: red;
}
/*
list-style:
none：去掉原点
circle：空心圆
decimal：数字
square：正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;/*首行缩进*/
}
a{
font-size: 14px;
text-decoration: none;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.7、背景
背景颜色
背景图片
#nav{
background: #fff198;
width: 400px;
}
.title{
background: red;
/*背景导入一个方向键图片指定位置
颜色，图片，图片位置，平铺方式
*/
background:red url("../images/d.gif") 270px 10px no-repeat;
}
/*
list-style:
none：去掉原点
circle：空心圆
decimal：数字
square：正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;/*首行缩进*/
/*背景图片定位平铺的第二种写法，三行*/
background-image: url("../images/d.gif");
background-repeat: no-repeat;
background-position: 200px 2px;
}
a{
font-size: 14px;
text-decoration: none;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.8、渐变
background-color : #FFFFFFbackground-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%)
4、盒子模型
4.1、什么是盒子模型
margin：外边距
padding：内边距
border：边框
4.2、边框
1：边框的粗细
2：边框的样式
3：边框的颜色
Title 会员登录
4.3、内外边距
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容大小
给了一个50*50px的大小，是需要上面这四个全部加起来全部一起，而不是一个内容的大小
Title "app"> 会员登录
4.4、圆角边框
边框圆角
Title
圆形
Title
"div2">
4.5、阴影
Title
"images/1.jpg" alt="">
5、浮动
5.1、标准文档流
行内元素可以被包含在块级元素中，反之，则不可以
块级元素：独占一行
h1~h6 p div 列表...
行内元素：不独占一行
span a img strong...
5.2、display
Title
div块
span行
1、这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
5.3、float
1、左右浮动 float
Title
div块
div2块
span行
5.4、父级边框塌陷的问题
clear
clear:right; 右侧不允许有浮动元素
clear:left; 左侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
clear:none;
解决方案：
1、增加父级元素的高度~
#father{
border:1px #000 solid;
height:800px;
}
2、增加一个空的div标签，清除浮动
.clear{
clear:both;
margin:0;
padding:0;
}
3、overflow
3.1：超出部分隐藏，一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。
3.2：清除浮动，一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。
3.3：解决外边距塌陷：父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。
在父级元素中增加一个 overflow:hidden;
4、父级添加一个伪类：after
#father:after{
cotent:'';
display:block;
clear:both;
}
小结：
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2：设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3：overflow
简单，下拉的一些场景避免使用
4：父类添加一个伪类：after（推荐）
写法稍微复杂一点，但没有副作用，推荐使用！
5.5、对比
-
display
方向不可以控制
-
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
6、定位
6.1、相对定位
Title
"father">
"first">第一个盒子
"second">第二个盒子
"third">第三个盒子
相对定位：position：relative
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
position: relative;/*相对定位 上下左右*/
top:-20px;
left: 20px;
6.2、绝对定位
定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，为我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
Title
"father">
"first">第一个盒子
"second">第二个盒子
"third">第三个盒子
6.3、固定定位
Title
div1
div2
6.4、z-index
图层~（优先级显示）
z-index：默认是0，最高无限~
"en">
"UTF-8">
Title
"stylesheet" href="css/style.css">
"content">
- "images/1.jpg" alt="">
- "tipText">我是路飞海贼王
- "tipBg">
- 作者：尾田
- 作品：海贼王
opacity:0.5;/背景透明度/
body{
padding: 0;
margin: 0;
}
img{
width: 200px;
height: 200px;
}
#content{
/*当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。*/
overflow: hidden;
margin: 0;
padding: 0;
height: 250px;
width: 250px;
border: 1px solid red;
}
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
height: 25px;
width: 125px;
top: 175px;
}
.tipText{
color: white;
z-index: 999;/*图层优先级显示属性*/
}
.tipBg{
background: #000;
/*opacity: 0.5;*/
/*filter:alpha(opacity=50);版本兼容问题*/
}
ul,li{
list-style: none;
padding: 0;
margin: 0;
}