CSS3学习
1.1什么是CSS
Cascading Style Sheet层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位/浮动
1.2 发展史
CSS1.0
CSS2.0 : DIV(块)+CSS，HTML与CSS结构分离的思想，网页可以变得很简单，SEO
CSS2.1 ： 浮动，定位
CSS3.0：圆角，阴影，动画。。。浏览器兼容性~
1.3 快速入门
stye
基本入门
<!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>
<!--内部样式表-->
<link rel="stylesheet" href="css/style.css">
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<!--优先级：就近原则（谁离元素最近）-->
<!--行内样式，在标签元素中编写一个style属性，编写样式即可-->
<h1 style=“color：red；” >标题</h1>
</body>
</html>
拓展
外部样式两种写法
-
连接式
html
<link rel="stylesheet" href="css/style.css"> -
导入式
@import是css2.1特有的
<style>
2.选择器
作用：选择页面上的某一个或者某一类元素
2.1基本选择器
-
标签选择器:选中一类标签
标签{}
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: #820a0a;
background: #4c6ecd;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style> -
类选择器class：选中所有class属性一致的标签，可以跨标签
.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式：.class的名称{}
好处：可以多个标签归类，是同一个class，可以复用*/
.wang{
color: #3565e8;
}
.wen{
color: #820a0a;
}
</style>
</head>
<body>
<h1 class="wang">标题1</h1>
<h1 class="wen">标题2</h1>
<h1>标题3</h1>
<p class="wang">标题4</p>
</body>
</html> -
ID选择器：全局唯一，不能重复
#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器的格式：#id名称{}
id必须保证全局唯一
不遵循就近原则，
id选择器>class选择器>标签选择器
*/
#wang{
color: #820a0a;
}
.style1{
color: #3565e8;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1 id="wang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1 class="style1">标题4</h1>
<h1 class="style1">标题5</h1>
<h1 class="style1">标题6</h1>
</body>
</html>
优先级
id > class > 标签
2.2层次选择器
-
后代选择器：在某个元素的后面 祖奶奶 奶奶 。。。
<style>
/*p{*/
/* background: #3565e8;*/
/*}*/
/*后代选择器*/
body p{
background: #820a0a;
}
</style> -
子选择器:一代,
body>p{ background: red; } -
相邻兄弟选择器:同辈
.active + p { background: #3565e8; } -
通用选择器
/*通用兄弟选择器：当前选中的元素的向下的所有同级元素通用*/
.active~p{
background: #3565e8;
}
结构伪劣选择器
带：号的就是伪劣
/*选中ul的第一个子元素*/
ul li:first-child{
background: #4c6ecd;
}
/*选中ul的最后一个子元素*/
ul li:last-child{
background: #820a0a;
}
/*选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素：选中父级元素的第一个,并且是当前元素才生效！
*/
p:nth-child(2){
background: red;
}
/*选中父元素，下的p元素的第二个*/
p:nth-of-type(1){
background: yellow;
}
2.4属性选择器（常用）
id+class结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #8c67b6;
text-align: center;
color: darkolivegreen;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com"class="links item first"id="first">1</a>
<a href=""class="links item active"target="_blank"title="test">2</a>
<a href="images/123.html"class="links item active">3</a>
<a href="images/123.png"class="links item ">4</a>
<a href="images/123.jpg"class="links item ">5</a>
<a href="abc"class="links item ">6</a>
<a href="/a.pdf"class="links item ">7</a>
<a href="/abc.pdf"class="links item ">8</a>
<a href="adc.doc"class="links item ">9</a>
<a href="abcd.doc"class="links item ">10</a>
</p>
</body>
</html>
= *= ^= $=
3，美化网页元素
3.1为什么要美化网页
-
有效的传递页面信息
-
美化网页，吸引用户
-
凸显页面主题
-
提高用户体验
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>
3.2字体样式
<title>Title</title>
<!--
font-family：字体样式,可以设置两种字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
px：像素
-->
<style>
body{
font-family: "Arial Black",楷体;
color: darkolivegreen;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
文本样式
-
颜色
-
文本对齐方式
-
首行缩进
-
行高
-
下划线
<!-- 颜色： 单词 RGB：红绿蓝G-F RGBA：透明度 text-align:排版，居中 text-indent：段落首行缩进，用em表示 行高和块的高度一致，就可以上下居中了 text-decoration: underline;:下划线 text-decoration: line-through;:中划线 text-decoration: overline;:上划线 --><!--
水平对齐~参照物：a ，b
-->
<style>
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/123.png" alt="">
<span>abcdwwwwwwwshdj</span>
3.5超链接伪类
正常情况：a，a：hover
<style>
a{
text-decoration: none;
color: #820a0a;
}
/*!*鼠标悬浮颜色:鼠标停在字体上，字体的颜色,状态*!*/
/* a:hover{*/
/* color: orange;*/
/* font-size: 50px;*/
/* }*/
/*!*鼠标按住为释放的颜色*!*/
/* a:active{*/
/* color: #3565e8;*/
/* }*/
/* a:link{*/
/* color: #820a0a;*/
/* }*/
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #418cce 5px 0px 2px ;
}
</style>
</head>
<body>
<a href="#">
<img src="images/刻意练习.png" alt="">
</a>
<p>
<a href="#">刻意练习</a>
</p>
<p>
<a href="#">作者</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
3.6列表
index
<!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></li>
</ul>
</div>
</body>
</html>
css/style
#nav{
width: 240px;
}
h2{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: #820a0a;
}
/*ul ,li
list-style:
none没有样式（可以去掉无序列表的圆点和有序列表的数字）
circle 无序列表变成空心圆
decimal 变成有序列表数字
square 正方形
*/
ul{
background: #d5d8ec;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: #8c67b6;
text-decoration:underline ;
}
3.7背景
-
背景颜色
-
背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/1.jpg");
/*默认全部平铺*/
}
.div1{
background-repeat: repeat-y;
}
.div2{
background-repeat: repeat-x;
}
.div3{
background-repeat: no-repeat;
}
</style>
h2{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
/*颜色 图片（图片位置）角度 平铺方式*/
background: #820a0a url("../images/3.png") 200px 5px no-repeat;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/5.png");
background-repeat: no-repeat;
background-position: 160px ;
}
练习
3.8背景渐变
background-color: #4158D0; background-image: linear-gradient(117deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4盒子模型及边框
4.1什么是盒子模型
-
margin：外边距（定义的东西和外边框的距离叫外边距）
-
padding：内边距（定义的东西内部距离）
-
border：边框（定义的定西的边框）
4.2边框
-
边框的粗细
-
边框的样式
-
边框的颜色
<style> /*body总有一个默认的外边距*/ body{ margin: 0; } /*border:粗细，样式，颜色*/ #app{ width: 300px; border: 1px solid red; } h2{ font-size: 16px; background-color: #e33a2a; line-height: 30px; color: #d5d8ec;}
/form标签选择器/
form{
background: #8c67b6;
}
/伪劣选择器/
div:nth-of-type(1)input{
border: 3px solid black;
}
/dashed:虚线/
div:nth-of-type(2)input{
border: 3px dashed #9c1a1a;
}</style>
4.3内外边距
<!--外边距的妙用--居中-->
<style>
/*body总有一个默认的外边距*/
/border:粗细，样式，颜色
margin: 0 auto;
/
#app{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2{
/margin:0 顺时针旋转/
/margin:0 1px/
/margin:0 1px 2px 3px/
font-size: 16px;
background-color: #e33a2a;
line-height: 30px;
color: #d5d8ec;
margin: 0 1px 2px 3px;
}
/form标签选择器/
form{
background: #8c67b6;
}
/伪劣选择器/
.wangwenqian{
border:3px dashed #820a0a;
padding: 10px;
}
/dashed:虚线/
div:nth-of-type(2)input{
border: 3px dashed #9c1a1a;
}
</style>
</head>
<body>
<div id="app">
<h2>会员登录</h2>
<form action="#">
<div class="wangwenqian">
<span>用户名：</span>
<input type="text">
</div>
</form>
<form action="#">
<div>
<span>账号：</span>
<input type="text">
</div>
</form>
<form action="#">
<div>
<span>密码：</span>
<input type="text">
</div>
</form>
</div>
</body>
盒子计算方法
你的元素到底有多大？
margin+border+padding+内容宽度
4.4圆角边框
4个角
<style>
div{
width: 50px;
height: 50px;
background: red;
border-radius: 50px 0 0 0 ;
}
</style>
<style>
/*border-radius：左上 右上 右下 左下 顺时针*/
/*头像圆圈：圆角=宽度*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
</style>
浙公网安备 33010602011771号