CSS
概述
CSS( Cascading Style Sheets )级联样式表
CSS是描述HTML文档样式的语言,它定义HTML文档的字体,背景,布局排版…
外部样式表与HTML文档分离,将标签与样式链接起来
在没有CSS之前我们想定义文档的样式,必须在每个标签里写上标签自己的属性,相当的麻烦,有了CSS之后我们可以像Java中的方法一样,写一份方法,哪里需要调哪里
语法
- 行内样式表
- 内嵌样式表
- 外部样式表
行内样式表
语法格式
<style="属性:值;" 自闭合标签/>
<style="属性:值;" 标签></标签>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<!-- 级联样式表
行内样式表 (使用较少,优先级最高)
内嵌样式表 (开发测试期间使用)
外部样式表 (最终使用)
-->
<!-- 行内样式表 -->
<p style="font-size: 10px; color: blue;">青玉案</p>
<p style="font-size: 15px; color: brown;">静夜思</p>
</body>
</html>
内嵌样式表
语法格式:
<style type="text/css">
选择器{属性:值;}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<!-- 内嵌样式表 -->
<style type="text/css">
h1,h2{color: chartreuse;}
</style>
</head>
<body>
<h1>青玉案</h1>
<h2>元夕</h2>
</body>
</html>
外部样式表
与内嵌样式表相似,将内嵌样式表中的样式挪到一个后缀名为css的文件中,再通过link标签将HTML文档与CSS链接(关联)
语法格式:
链接
<link rel="stylesheet" type="text/css" href="css文件的相对路径"/>
样式表
选择器{属性:值;}
css文件(out.css)
h1{color: cornflowerblue;}
h2{color: brown;}
css文件与html文件的相对位置
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<!-- 链接外部样式表-->
<link rel="stylesheet" type="text/css" href="css/out.css"/>
</head>
<body>
<h1>青玉案</h1>
<h2>元夕</h2>
</body>
</html>
选择器
分类
- 标签选择器
- ID选择器(id唯一; 优先级最高)
- 类选择器
- 通配选择器(全选;优先级最低)
选择器范围越大优先级越低
标签选择器
语法格式
<style type="text/css">
标签名{属性:值;}
...
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 */
p{color: #6495ED;}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>
ID选择器
<style type="text/css">
#id{属性:值;}
#id{属性:值;}
...
</style>
类选择器
语法格式
<style type="text/css">
.类名{属性:值;}
.类名{属性:值;}
...
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 */
p{color: #6495ED;}
/* id选择器 */
#title{color: red;}
/* 类选择器 */
.p1{color: aqua;}
.p2{color: burlywood;}
</style>
</head>
<body>
<h1 id="title">静夜思</h1>
<p class="p1">窗前明月光</p>
<p class="p2">疑是地上霜</p>
<p class="p1">举头望明月</p>
<p class="p2">低头思故乡</p>
</body>
</html>
通配选择器
语法格式
<style type="text/css">
*{属性:值;}
</style>
选择器组合
语法格式
<style type="text/css">
选择器1,选择器2,选择器3{属性:值;}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
/* 通配选择器 */
*{color: blue;}
/* 选择器组合 同时选中多个选择器 */
h2,#p,.p{color: chartreuse;}
</style>
</head>
<body>
<h2>青玉案</h2>
<h3>元夕</h3>
<p id ="p">青玉案</p>
<p class ="p">青玉案</p>
<p>青玉案</p>
</body>
</html>
文本
属性 | 说明 |
---|---|
color: | 字体颜色 |
font-size: | 字体大小 |
font-family: | 字体(楷体,宋体) |
text-algin:left | 文本对齐方式 |
text-decoration:line-through | 删除线 |
text-decoration:underline | 下划线 |
text-decoration:none | 定义标准文本(删除下划线) |
font-style:italic | 字体样式:斜体 |
font-weight:bold | 字体粗细 |
line-height: | 行高 |
letter-spacing : | 字符间距(单位:像素(px)) |
text-indent : 2em | 首行缩进(1em=当前文档中1字符大小) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
color: #FF0000;
font-family: 华文彩云;/* 字体 */
text-align: center;/* 文本对齐方式 */
text-decoration: line-through;/* 删除线 */
}
#p2{
text-decoration: underline;/* 下划线 */
font-style: italic;/* 斜体 */
font-weight: 1000;/* 字体粗细 */
letter-spacing:20px ;/* 字符间距 */
}
#p3{
line-height: 20px;/* 行高 */
text-indent: 2em;/* 首行缩进 em:当前文档中单个字符的大小 */
}
</style>
</head>
<body>
<p id="p1">
东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
</p>
<p id="p2">
东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
</p>
<p id="p3">
东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
</p>
</body>
</html>
背景
属性 | 说明 |
---|---|
background-image: url(图片路径); | 背景图片 |
background-repeat | 背景图片重复控制 |
background-size | 背景图片大小 |
background-position | 背景图片位置控制 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 400px;
height: 300px;/* 标签宽高 */
background-color: #0000FF;/* 背景颜色 */
background-image: url(img/bg.jpg);/* 背景图片 */
background-repeat: no-repeat;/* 背景图片重复控制 */
background-size: 200px;/* 背景图片大小 */
background-position: center bottom;/*背景图片位置控制 */
/* 利用居中对齐和行高与标签高度相等实现文字居中 */
text-align: center;
line-height: 300px;
color: #00FFFF;
}
</style>
</head>
<body>
<p>一段文字</p>
</body>
</html>
列表
属性 | 说明 |
---|---|
list-style-type | 设置列表项标志类型 |
list-style-image | 列表项添加图标 |
list-style-position | 设置列表项标志的位置 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.list1{
/* 取消默认列表项图标 */
/* list-style-type: none; */
/* 列表项添加图标 */
/* list-style-image: url(img/li_icon.jpg); */
/* 设置列表项图标的位置 */
/* list-style-position: inside; */
/* CSS简写 */
list-style: url(img/li_icon.jpg) none inside;/* 不分先后顺序 */
text-align: center;
background-color: #00FFFF;
}
.list2{
list-style: url(img/li_icon.jpg) none outside;;
text-align: center;
background-color: #00FFFF;
}
</style>
</head>
<body>
<ul>
<li class="list1">列表</li>
<br>
<li class="list1">列表</li>
</ul>
<ul>
<li class="list2">列表</li>
<br>
<li class="list2">列表</li>
</ul>
</body>
</html>
伪类
标签有不同的状态, 鼠标移入(hover) 点击(active) 聚焦(focus)
有时需要为不同状态的标签添加样式,这时就使用伪类(或为元素)
伪类 | 说明 |
---|---|
选择器:hover{} | 悬停时切换样式 |
选择器:active{} | 点击时切换样式 |
选择器:focus{} | 聚焦时切换样式 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 鼠标悬停到此标签时,自动切换到此样式 */
a:hover{
color: #A52A2A;
}
/* 鼠标点击此标签时,自动切换到此样式 */
a:active{
color: burlywood;
}
#btn:active{
color: white;
background-color: #808080;
}
/* 输入型组件 获得鼠标焦点时,自动切换到此样式 */
.in:focus{
color: white;
background-color: grey;
}
</style>
</head>
<body>
<!-- 伪类
标签有不同的状态 鼠标移入(hover) 点击(active) 聚焦(focus)
有时需要为不同状态的标签添加样式,可以使用伪类(伪元素)
-->
<a href="">百度</a>
<br>
<a href="">京东</a>
<br>
<a href="">阿里</a>
<br>
<input type="button" id="btn" value="确定" />
<input type="input" class="in"/>
</body>
</html>
透明度
属性opacity定义标签的透明度
透明度从0(完全透明)~1(完全不透明)
标签默认opacity值为1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1:hover{
/* 设置标签的透明度 0~1 0为全透明 1为不透明 0时虽然透明但是组件所占的位置不变 */
opacity: 0.5;
}
</style>
</head>
<body>
<!-- 透明度 -->
<img src="img/透明.jpg" width="300px" class="p1">
</body>
</html>
鼠标在图片外,图片不透明
鼠标移入图片内,图片变半透明
标签分类
-
行级标签
只占自身标签内容的大小,不占满一行,设置宽高也无效
-
块级标签
无论内容多少,都会占一行
默认宽:与父级标签一致
默认高: 0 or 内容高度
但是可以设置宽高 -
行级块标签
不占一行
可以设置宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 行级块标签 input img 可以设置宽高 不占一行 */
img,input{
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<!-- 行级标签 a
只占自身标签大小 不占一行
即时设置宽高也无效
-->
<!-- a标签可包含任何标签(除a以外) -->
<a href="">百度</a><a href="">百度</a><a href="">百度</a>
<hr >
<!-- 块级标签 p h1 hr ul ol
无论内容多少,都会占一行
默认宽:与父级标签一致
默认高: 0 or 内容高度
但是可以设置宽高
-->
<p style="height: 50px; width: 100px; background-color: #0000FF;">一段文字</p><a href="">超链接</a>
<!-- 一般使用块级标签包含行级标签 -->
<!-- p标签不能包含任何块标签 -->
<p><a href="">哔哩哔哩</a></p>
<hr >
<!-- 行级块标签 img input
不占一行
可以设置宽高
-->
<img src="./img/bg.jpg">图片
<input type="text" name="" id="" value="" />
</body>
</html>
display
display属性,可以修改标签的属性
-
display:none:在网页中让标签消失,并不占用网页空间
-
display:inline 将标签修改为行级标签
-
display:block 将标签修改为块级标签
-
display:inline-block 将标签修改为行级块标签(不占一行,可以设置宽高)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
display:修改标签的类型
display:none:在网页中让标签消失,并不占用网页空间
-->
<p style="display: none;">
东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
</p>青玉案
<hr >
<!-- display:inline 将标签修改为行级标签 -->
<p style="display: inline; color: #00FFFF;">
东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
</p>青玉案
<hr >
<!-- display:block 将标签修改为块级标签 -->
<a href="" style="display: block;">哔哩哔哩</a>B站
<hr >
f
<!-- display:inline-block 将标签修改为行级块标签(不占一行,可以设置宽高)-->
<p style="display: inline-block; width: 100px;">青玉案</p>元夕
<br>
<a href="" style="display: inline-block; height: 100px; background-color: #0000FF; color: #FFFFFF;">哔哩哔哩</a>
</body>
</html>
div/span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- div 块级标签
一般块标签(p,h1等)有默认样式or其他缺陷
div没有任何默认样式,可以包含任何标签
主要用于网页布局 -->
<div id="" style="background-color: #0000FF;">
东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
</div>
<hr>
<p style="background-color: #0000FF;">
东风夜放花千树,更吹落、星如雨。宝马雕车香满路,凤箫声动,玉壶光转,一夜鱼龙舞。 蛾儿雪柳黄金缕,笑语盈盈暗香去。众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。
</p>
<!-- span 行级标签
一般行标签(b,i,u 有默认样式)
没有任何附加样式
用于选中网页上的文本,为其添加样式
-->
<span id="" style="color: grey;">
青玉案
</span>
</body>
</html>
盒子模型
盒子模型
形象地将一个标签的4个部分这一构造,称为盒子模型
每个标签由4个部分组成
- 内容区:
- padding内边距:
- border边框 :
- margin外边距:
特点:
- width,height 只是设置内容区的大小
- 若不设置内边距大小与边框 盒子大小=内容区大小
- 标签大小 = 内容区大小 + 内边距大小 + 边框大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
/* 设置内容区大小,并不改变整个标签大小 */
width: 100px;
height: 100px;
background-color: #0000FF;
/* 内边距 */
/* padding-top: 10px; */
/* padding: 10px 上下左右都为10px */
/* padding: 10px 20px 上下10 左右20 */
/* padding: 10px,10px,10px,10px 上,右,下,左 */
/* 边框 */
/* border-top-width: 10px;
border-top-style: solid; 实线
border-top-color: #A52A2A; */
/* 简写 */
/* border-top:10px solid #A52A2A; */
border: 10px solid #A52A2A;
/* border-top-left-radius: 10px;设置圆角边框
border-top-right-radius: 10px; */
border-radius: 10px 20px 10px 20px;
}
.search{
width: 300px;
height: 45px;
border: #6495ED solid 3px;
border-radius: 10px;
font-size: 20px;
padding:1 20;
}
.search:hover{
border: #0000FF solid 3px;
}
</style>
</head>
<body>
<div id="div"></div>
<input class="search" type="text" name="" id="" value="" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* css开篇 取消标签默认外边距/内边距 需要时再同一添加 */
*{
padding: 0px;
margin:0px;
}
#div1{
background-color: #A52A2A;
width: 200px;
height: 200px;
}
#div2{
background-color: #6495ED;
width: 200px;
height: 200px;
/**
* 外边距: 一个标签与另一个标签的距离
* 不会影响标签的大小,只影响标签的位置
* 左右外边距为auto时,左右外边距会自动为最大值
* 上下外边距为auto时,上下外边距为0(body的高度与内容的高度一致)
*/
/*
margin-left: auto;
margin: auto; 上下0 左右最大*/
margin: 100px auto;/* 上下 左右*/
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<p>一段文字</p>
</body>
</html>
文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: #0000FF;
width: 100px;
height: 100px;
}
.div2{
background-color: #7FFF00;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>文档流</p>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
background-color: #0000FF;
width: 100px;
height: 100px;
float: left;
}
.div2{
background-color: #7FFF00;
height: 100px;
width: 100px;
float: left;
}
</style>
</head>
<body>
<!-- 网页布局就是通过浮动/定位来打破这种默认文档流
浮动(float)让标签脱离原来的文档流,漂浮起来
原来的行级标签/块级标签浮动后 标签宽度为内容宽度
可以设置宽度
-->
<div class="div1">
</div>
<div class="div2">
</div>
<p>标签浮动</p>
</body>
</html>
定位
定位:允许要定位的标签,相对于其原来的位置or另一个标签or父级标签or浏览器边框(8px)为参照物
分类
- 相对定位 relative
- 绝对定位 absolute
- 固定定位 fixed
相对定位:
开启相对定位,若不给偏移量,标签不会发生任何变化
设置偏移量(left right top bottom)
相对于原来标签的位置进行移动
不会脱离原文档流(偏移后依然占据原来的位置)
绝对定位:
开启绝对定位后,标签脱离原来的文档流(不占据原来位置)
若不给偏移量,标签不会发生任何变化
设置偏移量(left right top bottom)
绝对定位是相对于离它最近的开启了定位的父级标签进行定位
如果父级标签都没有开启定位,就以浏览器边框(8px)为参照物定位
一般,开启了字标签的绝对定位,同时会开启父标签的相对定位
固定定位
相对于浏览器窗口进行定位,脱离原来文档流(返回顶部)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**
* 定位:
* 相对定位 绝对定位 固定定位
*/
/* 相对定位 */
.div1{
background-color: #0000FF;
width: 100px;
height: 100px;
position: relative;
left: 100px;
top:100px
}
.div2{
background-color: #7FFF00;
width: 100px;
height: 100px;
}
.div3{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
}
.div4{
background-color: #7FFF00;
width: 100px;
height: 120px;
}
/* 绝对定位*/
.div5{
background-color: #808080;
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<p>相对定位</p>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<hr >
<p>绝对定位</p>
<div class="div5">
<div class="div3">
div3
</div>
<div class="div4">
div4
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.back_top{
position: fixed;
right: 20px;
bottom: 20px;
}
.back_top:hover{
}
</style>
</head>
<body>
<img src="img/淘宝.jpg" >
<br>
<img src="img/bg.jpg" >
<br>
<img src="img/淘宝.jpg" >
<div class="back_top">
<a href="" target="_self">返回顶部</a>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/15630.html