如何学习
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点+难点）
- 美化网页（文字、阴影、超链接，列表，渐变。。。）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效）
- w3c school + 菜鸟教程
什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动。。。
发展史
CSS1.0
CSS2.0 DIV（块）+CSS， HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角边框，阴影，动画。。。 浏览器兼容性~
快速入门
格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style> 可以编写css的代码, 每一个声明，最好使用分号结尾
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录！
CSS的导入方式
行内样式，内部样式，外部样式
<!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>
/*外部样式*/
h1{
color: yellow;
}
拓展：外部样式两种写法
- 链接式：
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
- 导入式：【先展示页面，再渲染】
<!--导入式-->
<style>
@import "css/style.css";
</style>
选择器
作用：选择页面上的某一个或者某一类元素
基本选择器
- 标签选择器【选择一类标签】 标签名{}
- 类选择器 class【选择所有class属性一致的标签，跨标签】 .类名{}
- id选择器【全局唯一】#id名称{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器 : id必须保证全局唯一！
#id名称{}
不遵循就近原则，固定的
id选择器》class选择器》标签选择器
*/
#laomao{
color: red;
}
.style1{
color: green;
}
h1{
color: darkviolet;
}
</style>
</head>
<body>
<h1 id="laomao">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
层次选择器
- 后代选择器：在某个元素的后面
/*后代选择器*/
body p{
background: red;
}
- 子选择器
/*子选择器*/
body>p{
background: green;
}
- 相邻兄弟选择器 【对下不对上，只有一个】
/*兄弟选择器*/
.active + p{
background: darkred;
}
- 通用选择器 【当前选中元素的向下所有兄弟元素】
.active~p{background: blue;}
结构伪类选择器
伪类：条件
/*ul的第一个子元素*/
ul li:first-child{
background: darkred;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: red;
}
/*选中p1 : 定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/
p:nth-child(1){
background: #2d44ff;
}
/*选中父元素，下的p元素的第二个类型*/
p:nth-of-type(2){
background: yellow;
}
属性选择器（常用）
/*属性名， 属性名 = 属性值（正则）
= 绝对等于
*= 包含字符串
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素 a[]{}*/
a[id]{
background: yellow;
}
a[id=first]{
background: red;
}
/*class中有links的元素*/
a[class*="links"]{
background: green;
}
/*选中href中以http开头的元素*/
a[hred^=http]{
background: coral;
}
id + class 结合~
美化网页元素
为什么要美化网页
- 有效的传递页面信息
- 美化网页，页面漂亮，才能吸引客户
- 凸显页面的主题
- 提高用户的体验
span标签：重点要突出的字使用span标签套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>
字体样式
<!--
font-family:字体
font-size:字体大小
font-weight:字体粗细
color：字体颜色
-->
<style>
body{
font-family: 华文楷体;
}
h1{
font-size: 50px;
}
</style>
文本样式
- 颜色
- 文本对齐的方式
- 首行缩进
- 行高
- 装饰
<!--
颜色：单词
RGB 0~F
RGBA 透明度 A:0~1
text-align: 排版，居中
text-indent: 段落首行缩进
行高和块的高度一致，就可以上下居中
text-decoration:underline; 下划线
text-decoration:line-through; 中划线
text-decoration:overline; 上划线
-->
<style>
h1{
color: green;
color: rgba(0,255,255,0.6);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: yellow;
height: 300px;
line-height: 300px;
}
</style>
注意：a标签默认有下划线
a{text-decoration:none;} / 去掉下划线
超链接伪类、阴影
正常情况下：a, a:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的颜色*/
a:hover{
color: orange;
font-size: 25px;
}
/*鼠标按住为释放的状态*/
a:active{
color:green;
}
a:visited{
color: deeppink;
}
/*text-shadow 阴影颜色 水平偏移，垂直偏移， 阴影半径*/
#price{
text-shadow: darkviolet 10px 0px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="../../resource/img/a.jpg" alt="">
</a>
<p>
<a href="#">程序员的自我修养————链接、装载与库</a>
</p>
<p>
<a href="#">作者：俞甲子</a>
</p>
<p id="price">
￥44.5
</p>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
#nav{
width: 300px;
background: gray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
ulP{
background: gray;
}
/*ul li*/
ul li{
height: 30px;
list-style: none; /*去掉圆点*/
/*list-style: decimal; !*变序号*!*/
/*list-style: circle; !*空心圆*!*/
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
背景 background
背景颜色
背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("../../resource/img/头像.jpg");
/*默认是全部平铺的*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
渐变
径向渐变
圆形渐变
https://www.grabient.com/
background-color: #FFFFFF;
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%,#FF0000 100%);
盒子模型
什么是盒子
margin:外边距
padding：内边距
border：边框
边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<style>
/*body总有一个默认的外边距margin：0 常见操作*/
/*h1,ul,li,a,body{*/
/* margin: 0;*/
/* padding: 0;*/
/* text-decoration: none;*/
/*}*/
/*border: 粗细，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background: green;
line-height: 30px;
color: white;
}
form{
background: cadetblue;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed yellow;
}
</style>
内外边距
/*
margin: 0 四边都为0
margin： 0 1px 上下为0 左右为1
margin： 0 1px 2px 3px 上右下左 从上开始顺时针
*/
盒子的计算方式：你这个元素到底有多大
margin + border + padding + 内容
圆角边框
4个角
/*
左上 右上 右下 左下 顺时针
圆圈： 圆角 = 半径！
*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
阴影
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
</style>
margin: 0 auto; 居中
要求： 块元素， 块元素有固定的宽度
浮动
标准文档流
块级元素：独占一行
【h1-h6 p div 列表…】
行内元素：不独占一行
【span a img strong … 】
行内元素可以被包含在块级元素中，反之不可以。
display
block 块元素
inline 行内元素
inline-block 既是块元素，又可以不独占一行
【这个也是实现行内元素排列的方式，但是我们很多情况都在用float】
float
左右浮动
div{
margin:10px;
padding:5px;
}
.layer01{
border:1px #00F dashed;
display:inline-block;
float: right;
}
.layer02{
border:1px #00F dashed;
display:inline-block;
float: right;
}
.layer03{
border:1px #00F dashed;
display:inline-block;
float: right;
}
父级边框塌陷问题
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear; both; 两侧都不允许浮动，排列在新的一行
clear: none;
解决方案：
- 增加父级元素的高度
#father{
border: 1px #000 solid;
height: 800px;
}
- 增加一个空的div标签，清除浮动
<div class="clear">
.clear{
clear: both;
margin: 0;
padding: 0;
}
<div>
- overflow
在父级元素中增加一个overflow属性
overflow： hidden； 隐藏
overflow： scroll； 添加滚动条 - 在父类添加一个伪类
#father:after{
content: ‘’;
diplay: block;
clear: both;
}
小结：
- 浮动后面添加空div
简单，代码中尽量避免空div - 设置父元素的高度
简单，元素假设有了固定的高度，就会被限制 - overflow
简单，下拉的一些场景避免使用 - 父类添加一个伪类：after（推荐）
没有副作用，推荐使用
display和float对比
display
方向不可以控制
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
定位
相对定位
相对于自己原来的位置进行偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留。
position: relative;
top: -20px;
left: 20px;
绝对定位
- 没有父级元素定位的前提下，相对于body定位。
- 假设父级元素存在定位，通常会相对于父级元素进行偏移
- 在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
position: absolute;
top: -20px;
left: 20px;
固定定位
position: fixed;
right:0;
bottom:0;
z-index
层级概念：图层
默认是0，最高无限制
z-index: 0;
背景透明度
opacity: 0.5; 【背景透明度】
filter： Alpha(opacity=50);
动画
Less语言【用代码生成css代码】
canvas动画
卡巴斯基监控网站
总结
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
