css样式/选择器
<style>
h3{
color:blue;
font-size: 20px;
}
</style>
</head>
<body>
<h3>标题内容</h3>
</body>
CSS引入方式
内联样式(行内样式)
提示:缺乏整体性和规划性,不利于维护,维护成本高
<body>
<p style="color:red;font-size:30px;">我是内联样式的方案</p>
</body>
内部样式
提示:单个页面内的css代码具有统一性和规划性,便于维护但是多个页面之间容易混乱
<style>
p{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<p>我是内联样式的方案</p>
<p>我是第二个p标签</p>
</body>
外部样式
当样式需要应用于很多页面时,外部样式将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=h1, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./auc.css">
</head>
<body>
<p>首页</p>
<a href="./auc.html">产品</a>
</body>
</html>
选择器一
全局选择器
可用与任何元素匹配,优先级最低,一般做样式初始化
<style>
*{
font-size: 30px;
color: blueviolet;
}
</style>
</head>
<body>
<p>Hellow</p>
<h3>World</h3>
</body>
元素选择器
HTML文档中的元素,p,b,div,a,img,body等。
描述“共性”,无法描述某一个元素的“个性”
<style>
p{
font-size: 40px;
}
</style>
</head>
<body>
<p>我是第一个</p>
<h3>标题</h3>
<p>我是第二个</p>
</body>
提示:所有的标签都可以是选择器。比如:ul,li,label,dt,dl,input,div等
无论这个标签藏的有多深,一定能够被选上
选择的所有,而不是一个
类选择器
规定使用.来定义,针对你想要的所有标签使用
<style>
.content{
color:red;
}
</style>
</head>
<body>
<p>大家好</p>
<p>我很好</p>
<p class="content">我emo了</p>
</body>
选择器二
ID选择器
针对某一个特定的标签来使用,只能使用一次。css中的Id选择器以#来定义
<style>
#text{
color:red;
font-size: 30px;
}
</style>
</head>
<body>
<p id="text">Hellow</p>
</body>
</html>
特别强调
ID是唯一的且不能以数字开头
合并选择器
语法:选择器1,选择器2...{}
作用:提取共同样式,减少重复代码
<style>
p,h3{
font-size: 30px;
color: aqua;
}
</style>
</head>
<body>
<p>我是p标签</p>
<h3>我是标题标签</h3>
</body>
选择器优先级
CSS中,权重用数字衡量
元素选择器的权重为:1
class选择器的权重为:10
id选择器的权重为:100
内联样式的权重为:1000
优先级从高到低:行内样式>ID选择器>类选择器>元素选择器
字体属性
color
规定文本的颜色
<style>
p{
color:red;
color:#ff0000;
color:rgb(255, 0, 0);
color:rgba(243, 12, 12, 0);
}
</style>
</head>
<body>
<p>我来学习字体属性</p>
</body>
font-size
设置文本的大小
能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者标题看上去像段落。
h1{font-size:40px;}
提示:chrome浏览器接受最小字体是12px
font-weight
设置文本的粗细
bold 定义粗体字符
bolder 定义更粗的字符
lighter 定义更细的字符
100-900 定义由细到粗 400等同默认,而700等同于bold
<style>
p{
font-weight: bolder;
}
</style>
</head>
<body>
<p>我来学习字体属性</p>
</body>
font-style
指定文本的字体样式
normal 默认值;italic:定义斜体字
font-family
指定一个元素的字体
p{
font-weight: bolder;
font-family: 'Courier New', Courier, monospace;
}
提示:每个值用逗号隔开,如果字体名称包含空格,它必须加上引号
背景属性
background-color 设置背景颜色;
background-image 设置背景图片;
background-position 设置背景图片显示位置;
background-repeat 设置背景图片如何填充;(repeat:默认值;repeat-x:只向水平方向平铺;repeat-y:只向垂直方向平铺;no-repeat:不平铺)
background-size 设置背景图片大小属性;(length 设置背景图片的宽度和高度,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto;percentage 计算相对位置区域的百分比,第一个值宽度,第二个值高度,如果只是设置一个,第二个值auto;cover 保持图片纵横比并将图片缩放成完全覆盖背景区域最小大小;contain 保持图片纵横比并将图片缩放成完全覆盖背景区域最大大小)
.box2{
width: 1200px;
height: 1200px;
background-image: url(1.webp.jpg);
background-repeat: no-repeat;
background-size:cover;
}
background-position属性
设置图片起始位置,其默认值是0% 0%
left top 左上角 left center 左 中 left bottom 左下 right top 右上角 right center 右 中
right bottom 右 下 center top 中 上 center center 中 中 center bottom 中 下
.box2{
width: 1200px;
height: 1200px;
background-image: url(1.webp.jpg);
background-position: center center;
}
文本属性
text-align
指定元素文本的水平对齐方式
left:文本居左排列,默认值;righjt 把文本排列到右边;center:把文本排列到中间
<style>
h3{
text-align: center;
}
</style>
</head>
<body>
<h3>我是一个标题内容</h3>
</body>
text-decoration
规定添加到文本的修饰,下划线,上划线,删除线等
underline 定义下划线;overline 定义上划线;line-through:定义删除线
<style>
h3{
text-align: center;
text-decoration: underline;
}
</style>
</head>
<body>
<h3>我是一个标题内容</h3>
</body>
text-transform
控制文本大小写
captialize:定义每个单词开头大写;uppercase:定义全部大写字母;lowercase:定义全部小写字母
p{
font-size: 30px;
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<p>helloWorld</p>
text-indent
规定文本块中首行文本的缩进(提示:负值是允许的,如果之是负数,将第一行左缩进
p{
text-indent: 30px;
}
表格属性
表格边框
table,td{
border: 1px solid red;
}
折叠边框
table{
border-collapse: collapse;
}
表格宽度高度
table{
border-collapse: collapse;
width:500px;
height: 300px;
}
表格文字对齐
td{
text-align: center;
vertical-align: center;
}
表格填充
padding: 20px;
表格颜色
background-color: #555555;
color: #ffffff;
综合所上
<style>
table,td{
border: 3px solid blue;
}
table{
border-collapse: collapse;
}
td{
text-align: center;
vertical-align: center;
padding: 20px;
background-color: #555555;
color: #ffffff;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
关系选择器
后代选择器(定义:选择所有被E元素包含的F元素,中间用空格隔开)
<style>
ul li{
color: red;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<div>
<ol>
<li>列表4</li>
<li>列表5</li>
</ol>
</div>
</ul>
</body>
子代选择器(选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示
<style>
div>p{
color: red;
}
</style>
</head>
<body>
<div>
<p>大家好</p>
<ul>
<li>
<p>我很好</p>
</li>
</ul>
</div>
</body>
相邻兄弟选择器(选择紧跟E元素,用加号表示,选择相邻的第一个兄弟元素
<style>
h3+p{
color: red;
}
</style>
</head>
<body>
<h3>我是标题</h3>
<p>我是内容1</p>
<p>我是内容2</p>
</body>
通用兄弟选择器(选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开
<style>
h3~p{
color: red;
}
</style>
</head>
<body>
<h3>我是标题</h3>
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
</body>
CSS盒子模型(Box Model)
Margin(外边距)-清除边框外的区域,外边距是透明的(两个值:第一个值上下,第二个值左右)
Border(边框)-围绕在内边距和内容外的边框
Padding(内边距)-清楚内容周围的区域(两个值:第一个值上下,第二个值左右)
Content(内容)-盒子的内容,显示文本和图像
<style>
div{
width: 100px;
height: 100px;
background-color: green;
padding: 50px 10px;
border: 5px solid blue;
margin: 50px 10px;
}
</style>
</head>
<body>
<div>
我是内容
</div>
<p>我是p标签</p>
</body>
弹性盒子模型(flex box)
父级元素属性
flex-direction属性
row:横向从左到右排列(左对齐),默认的排列方式
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在前面)
column:纵向排列
column-reverse:反转纵向排列,从后往前排,最后一项排在前面
justify-content属性(垂直方向)
flex-start靠上;flex-end靠下;center中间
align-intems属性(水平)
flex-start居左;flex-end居右;center居中
子元素上的属性
flex-grow/flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
<style>
.container{
width:500px;
height: 500px;
background-color: #555;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
flex: 1;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
flex:2;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
文档流
文档流指文档中可显示对象在排列时所占用的位置/空间
文档流产生的问题
高矮不齐,底边对齐
<style>
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<span>大家好</span>
<img src="1.webp.jpg" alt="">
</body>
空格折叠
<style>
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<span>大家好</span>
<img src="1.webp.jpg" alt="">
<p>我是P标 签</p>
</body>
元素无间隙
<style>
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<span>大家好</span>
<img src="1.webp.jpg" alt="">
<p>我是P标 签</p>
<img src="1.webp.jpg" alt="">
<img src="1.webp.jpg" alt="">
</body>
脱离文档流
使一个元素脱离标准文档流有三种方式
浮动
绝对定位
固定定位
浮动
浮动的定义
float属性定义元素哪个方向浮动,任何元素都可以浮动
left:元素向左浮动 right:元素向右浮动
浮动的原理
浮动以后使元素脱离了文档流
浮动只有左右浮动,没有上下浮动
元素向左浮动
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
}
.container{
width: 400px;
height: 400px;
background-color: blueviolet;
}
img{
width: 300px;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
<div>
<img src="./1.webp.jpg" alt="">
<img src="./1.webp.jpg" alt="">
</div>
</body>
元素向右浮动
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
float: right;
}
.container{
width: 400px;
height: 400px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="container"></div>
</body>
所有元素向左浮动
<style>
div{
width: 300px;
height: 300px;
float: left;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
.box3{
background-color: green;
}
ul li{
float: left;
margin: 0 40px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
当容器不足时
<style>
.container{
width: 700px;
height: 700px;
background-color: #666;
}
div{
width: 300px;
height: 300px;
float: left;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
.box3{
background-color: green;
}
ul li{
float: left;
margin: 0 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
<li><a href="#">导航4</a></li>
</ul>
</body>
清除浮动
浮动副作用
当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动
浮动元素会造成父元素高度塌陷
后续元素会受到影响
<style>
.container{
width: 500px;
height: 500px;
background-color: #888;
}
.box{
width: 100px;
height: 100px;
background-color: aqua;
margin: 5px;
float: left;
}
.text{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="text"></div>
</div>
</body>
清除浮动
当父元素出现塌陷的时候,对布局是不利的,所以我们必须清除副作用
父元素设置高度
受影响的元素增加clear属性
overflow清除浮动
伪对象方式
父元素设置高度
.text{
width: 100px;
height: 100px;
background-color: blueviolet;
clear: both;
}
overflow清除浮动
.container{
width: 500px;
background-color: #888;
overflow: both;
}
伪对象方式
.container::after{
content: "";
display: block;
clear: both;
}
定位
定义:position属性指定了元素的定位类型
relative 相对定位 absolute 绝对定位 fixed 固定定位
其中,绝对定位和固定定位会脱离文档流
设置定位之后:可以使用四个方向值进行调整位置:left、top、right、bottom
相对定位
<style>
div{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<div></div>
</div>
</body>
绝对定位
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 200px;
}
.box2{
width: 200px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
固定定位
.box1{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
left: 100px;
top: 100px;
}
.box2{
width: 400px;
height: 400px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
提示:设置定位之后,相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整,如果父级元素不存在定位,则继续向上逐级寻找,直到顶层文档
Z-index
设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是处于堆叠顺序较低的元素的前面
z-index: 100;
CSS3新特性
圆角
border-radius属性,可以使用以下规则
四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角
三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角
两个值:第一个值为左上角与右下角,第二个值为右上角与左下角
一个值:四个圆角相同
<style>
div{
width: 56px;
height: 56px;
background-color: blueviolet;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
阴影
h-shadow 必选,水平阴影的位置;v-shadow 必选,垂直阴影的位置;blur 可选,模糊距离;color 可选,阴影的颜色
<style>
.box{
width: 400px;
height: 400px;
background-color: blue;
margin: 0 auto;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
动画
0%是动画的开始,100%是动画的完成
@keyfames创建动画
@keyframes myAnim{
0%{
background-color: red;
}
50%{
background-color: green;
}
100%{
background-color: red;
}
}
name:动画名称,开发人员自己命名;
precent:为百分比值,可以添加多个百分比值;
animation执行动画
name 设置动画的名称;
duration 设置动画的持续时间;
timing-function 设置动画效果的速率;
delay 设置动画的开始时间(延时执行)
iteration-count 设置动画循环次数,infinite为无限次数的循环
direction 设置动画播放方向
animation-play-state 控制动画的播放状态:running代表播放,而paused代表停止播放
timing-function值
ease 逐级变慢;
linear 匀速;
ease-in 加速;
ease-out 减速;
ease-in-out 先加速后减速
direction值
normal 默认值为normal表示向前播放;
alternate 动画播放在第偶数次向前播放,第奇数次向反方向播放
div{
width: 200px;
height: 200px;
background-color: red;
animation: myAnim 3s linear 0s infinite;
}
div:hover{
animation-play-state:paused;
}
@keyframes myAnim{
0%{
background-color: red;
}
50%{
background-color: green;
}
100%{
background-color: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
呼吸灯效果
<style>
.box{
width: 200px;
height: 200px;
margin: 40px auto;
background-color: aqua;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
animation: breathe 2.7s ease-in-out infinite alternate;
}
@keyframes breathe{
0%{
opacity: 0.2;
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
}
50%{
opacity: 0.5;
box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76);
}
100%{
opacity: 1;
box-shadow: 0 1px 2px rgb(255, 59, 157);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
媒体查询
媒体识别查询会根据设备的大小自动识别加载不同的样式
设置meta标签
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
媒体查询语法
<style>
.box{
width: 300px;
height: 300px;
}
@media screen and (max-width:768px) {
.box{
background-color: aqua;
}
}
@media screen and (min-width:768px) and (max-width:996px) {
.box{
background-color: chartreuse;
}
}
@media screen and (min-width:996px) {
.box{
background-color: red;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
雪碧图
优点
减少图片的字节
减少网页的http请求,从而大大的提高页面的性能
原理
通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置
<style>
span{
display: block;
width: 45px;
height: 70px;
background-image: ur1(1.png);
border: 1px solid red;
background-position: -301px 84px;
}
</style>
</head>
<body>
<span class="icon"></span>
</body>
字体图标
常用字体图片库:阿里巴巴图标库
优点
轻量性:加载速度快,减少http请求
灵活性:可以利用css设置大小颜色
兼容性:网页字体支持所有现代浏览器,包括IE低版本
使用字体图标
注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
选择font-class引用
本章是学会制作第一个程序II(CSS),往后还会继续更新!