本文介绍了CSS的基础知识，包括内联样式、内部样式和外部样式表的使用，以及选择器的应用，如通配选择器、标签选择器、类选择器和ID选择器。此外，还详细讲解了文本样式、背景样式、元素类型转换、盒子模型、布局技巧（浮动和定位）以及响应式布局的概念。最后，通过两个弹性盒子实例展示了其在页面布局中的应用。
1.CSS
简介
中文名:层叠样式表
作用:美化HTML标签
1.1书写位置
方式1:
在标签的style属性中书写
因为这样的方式,编写的样式无法给别的标签使用,此时代码就会冗余
这种写法被称为内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font style="color: green;"></font>
</body>
</html>
方式2:
在style标签中书写
可以在当前文件下复用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
font{
color: green;
font-size: 100px;
}
</style>
</head>
<body>
<font >1</font>
</body>
</html>
方式3:
在css文件中书写,通过link标签引入到需要使用的html文件中
- 在css文件夹中创建css文件
Font{
Font-size: 200px;
}
- 在项目根目录下创建html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel=”stylesheet” type=”text/css” href=”css/demo03.css”/>
</head>
<body>
<font >1</font>
</body>
</html>
2.选择器
作用:寻找指定的html标签
2.1常见选择器
2.1.1通配选择器
作用:给当前网页中所有标签使用
语法:
*{
Css样式
}
2.1.2标签选择器
作用:给当前网页指定标签设定样式
语法:
标签名{
Css样式
}
2.1.3Class选择器
作用:给当前网页class属性值为xxx的设置样式
语法:
.class{
Css样式
}
2.1.4Id选择器
作用:给当前网页中id属性值为xxx的设置样式
语法:
#id的属性值{
Css样式
}
2.2伪类选择器
2.2.1鼠标悬浮:Hover
语法:
选择器:hover{
鼠标悬浮在该标签上,该标签的样式
}
2.2.2获取焦点focus
语法:选择器:focus{css样式}
2.3选择器的优先级
优先级:内联>id选择器>class选择器>标签选择器>通配选择器
如果多个优先级相同的选择器给同一个标签设置样式,谁在后听谁的
3.文本样式
大小
font-size
字体
font-family
颜色
Color
格式
Font-style
笔画粗细
Font-weight
下划线
Text-decoration
文本位于标签的位置
Text-align
一行字所占高度
Line-height
4.背景样式
属性:
Background-color:背景颜色
Background-image:背景图片
Background-size:背景大小
Background-repeat:是否平铺
Background-position:背景位置
Background:背景
5.元素类型
5.1行内元素:
特点:设置宽高无效,标签大小有标签中内容决定,不会独占一行
如:font
5.2行内块元素:
特点:设置宽高有效,不独占一行
如:img,input
5.3块级元素
特点:设置宽高有效,独占一行
如:h1~h6,p,div,li
5.4如何修改标签的元素类型?
通过display属性进行修改
Inline-block:行内块元素
Inline:行内元素
Block:块元素
None:隐藏
Flex:弹性盒子
6.盒子模型
6.1相关的属性
宽/高
Width/height
内边距:标签内,内容距离边框的距离
Padding
边框:边框厚度
Border
外边距:当前标签距离父容器或兄弟标签的距离
Margin
6.2盒子类型
6.2.1标准盒子:
计算标签占用大小:左外边距+左边框+左内边距+宽+右内边距+右边框+右外边距=真实的宽
6.2.2IE盒子:
计算方式:左外边距+宽+右外边距=真实的宽
设置盒子类型为IE盒子:box-sizing:border-box;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01{
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid red;
margin: 10px;
background: aqua;
}
#box02{
width: 300px;
height: 300px;
padding: 20px;
border: 10px solid red;
margin: 10px;
background: aqua;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box01"></div>
<div id="box02"></div>
</body>
</html>
7.布局
7.1浮动
关键字:float
注意:会导致空间塌陷
解决方法:
.classAfter:after{
content: ".";
overflow: hidden;
clear: both;
height: 0;
display: block;
}
在其浮动的标签的父容器的class属性值中加入clearAfter即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
background: orange;
}
.class{
width: 148px;
height: 100px;
color: white;
border: 1px solid red;
float: right;
}
#box01{
height: 100px;
background:green;
}
.classAfter:after{
content: ".";
overflow: hidden;
clear: both;
height: 0;
display: block;
}
</style>
</head>
<body>
<div id="box" class="classAfter">
<div class="class">1</div>
<div class="class">2</div>
<div class="class">3</div>
<div class="class">4</div>
<div class="class">5</div>
<div class="class">6</div>
</div>
<div id="box01"></div>
</body>
</html>
7.2定位
属性:position
7.2.1浏览器窗口定位:fixed
相对与浏览器窗口的位置,不会保留标签的原位置
7.2.2相对定位:relative
相对于标签的原位置,会保留标签的原位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01{
width: 200px;
height: 200px;
background: aqua;
}
#box02{
width: 100px;
height: 100px;
background: black;
position: relative;
left: 100px;
top: -50px;
z-index: -1;//层级
}
#box03{
width: 100px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</body>
</html>
7.2.3绝对定位:absolute
相对与最近一层做过定位的父容器的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01{
width: 200px;
height: 200px;
background: aqua;
}
#box02{
width: 100px;
height: 100px;
background: black;
position: relative;
}
#box03{
width: 100px;
height: 100px;
background: orange;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box01"></div>
<div id="box02"></div>
<div id="box03"></div>
</body>
</html>
8.响应式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#content{
width: 100%;
height: 100%;
}
@media only screen and (min-width: 100px) and (max-width: 640px) {
#content{
background: aqua;
}
}
@media only screen and (min-width: 640px) and (max-width:980px) {
#content{
background: black;
}
}
@media only screen and (min-width: 980px) and (max-width: 1240px) {
#content{
background: orangered;
}
}
@media only screen and (min-width: 1240px) {
#content{
background:green;
}
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>
9.弹性盒子
实例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 300px;
background:green ;
display: flex;
}
#div{
width: 100px;
height: 100px;
background: black;
margin: auto;/*使组件居中*/
}
</style>
</head>
<body>
<div id="box">
<div id="div"></div>
</div>
</body>
</html>
实例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
height: 200px;
background: orange;
display: flex;/*设为弹性盒子*/
flex-wrap: wrap;/*允许折行*/
}
.div{
width: 100px;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box">
<div id="box01" class="div">1</div>
<div id="box02" class="div">2</div>
<div id="box03" class="div">3</div>
<div id="box04" class="div">4</div>
<div id="box05" class="div">5</div>
<div id="box06" class="div">6</div>
<div id="box04" class="div">4</div>
<div id="box05" class="div">5</div>
<div id="box06" class="div">6</div>
</div>
</body>
</html>
扫一扫
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
