CSS
简介
中文名:层叠样式表
作用:美化HTML标签
书写位置
方式1:在标签的style属性中书写
这样的方式,编写的样式无法给别的标签使用,如果网页中有多个该样式的标签,此时代码就会较为冗余
这种写法被称为内联样式
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css属性位置1</title>
</head>
<body>
<font style="font-size: 100px; color: green;">css属性位置1</font>
</body>
</html>
方式2:在style标签中书写
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css书写位置2</title>
<style type="text/css">
font{
color: red;
font-size: 80px;
}
</style>
</head>
<body>
<font>你好,世界</font><br />
<font>你好,世界</font><br />
<font>你好,世界</font><br />
</body>
</html>
方式3:在css文件中书写,通过link标签引入到需要使用的html文件中
示例:
1.在css文件夹中创建test.css,代码如下
font{
font-size: 200px;
}
2.在项目根目录下创建html文件,代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css书写位置3</title>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
<font>你好,世界</font>
</body>
</html>
选择器
作用:寻找指定的html标签
常见选择器
通配选择器:
作用:给当前网页中所有标签都使用
语法:
*{
css样式
}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
font-size: 50px;
}
</style>
</head>
<body>
<font>font</font>
<br />
<h1>h1</h1>
<p>p</p>
</body>
</html>
标签选择器
作用:给当前网页指定标签设置样式
语法:
标签名{
css样式
}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
font{
font-size: 80px;
}
h1{
color: red;
}
</style>
</head>
<body>
<font>font</font>
<br />
<h1>h1</h1>
<font>font</font>
<p>p</p>
<font>font</font>
</body>
</html>
class选择器
作用:给当前网页class属性值为xxx的设置样式
语法:
.class的属性值{
css样式
}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.text{
font-size: 80px;
color: red;
}
</style>
</head>
<body>
<p class="text">p1</p>
<font class="text">font01</font>
<h1 class="text">h1_01</h1>
<hr />
<p>p2</p>
<font >font02</font>
<h1 >h1_02</h1>
</body>
</html>
id选择器
作用:给当前网页中id属性值为xxx的设置样式.
语法:
#id的属性值{
css样式
}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#f{
font-size: 80px;
}
</style>
</head>
<body>
<font id="f">id选择器</font>
</body>
</html>
伪类选择器
鼠标悬浮:hover
语法:选择器:hover{鼠标悬浮在该标签上,该标签的样式}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#f{
font-size: 80px;
}
#f:hover{
color: red;
}
</style>
</head>
<body>
<font id="f">伪类选择器</font>
</body>
</html>
获取焦点:focus
语法:选择器:focus{css样式}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:focus{
width: 200px;
height: 40px;
outline: none;
border: 10px solid orange;
}
</style>
</head>
<body>
<input type="text" />
</body>
</html>
选择器的优先级
优先级:内联>id选择器>class选择器>标签选择器>通配选择器
如果多个优先级相同的给同一个标签设置样式,谁在后听谁的
文本样式
大小:font-size
字体:font-family
颜色:color
格式:font-style
粗细:font-weight
装饰:text-decoration
文本位于标签的位置:text-align
一行字所占高度:line-height
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #font{ font-size: 80px; font-family: "楷体"; /** * 6位调色法: * 光的三原色:红,绿,蓝 * 每个颜色的取值范围0~255 * 对应的16进制取值0~FF * 写法:#红色绿色蓝色 * rgb(红色,绿色,蓝色); * rgba(红色,绿色,蓝色,透明度) * 透明度取值范围:0~1,0表示全透明,1表示不透明 */ /*color: #FF9900;*/ /*color: rgb(255,0,0);*/ color: rgba(0,0,0,0.3); font-style: italic; /*斜体*/ font-weight: 200; text-decoration: none; text-align: center; line-height: 200px; background: orange; } </style> </head> <body> <h1 id="font">字体样式</h1> </body> </html>
背景样式
属性:
background-color:背景颜色
background-image: 背景图片
background-size:背景大小
background-repeat:是否平铺
background-position:背景位置
background:背景示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ /*background-color: #FF0000;*/ background-image: url("img/test.png"); background-size:10% 10%; background-repeat:no-repeat; background-position:center center; } </style> </head> <body> <div id="box"> </div> </body> </html>
元素类型
行内元素:
特点:设置宽高无效,标签大小由标签中内容决定,不会独占一行
如:font标签
行内块元素:
特点:设置宽高有效,不独占一行
如:img,input
块级元素
特点:设置宽高有效,独占一行
如:h1,h2,p,div,li
如何修改标签的元素类型?
通过display属性进行修改
inline-block:行内块元素
inline:行内元素
block:块元素
none:隐藏
flex:弹性盒子
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#font{
background: red;
width: 300px;
height: 300px;
display: none;
}
#input{
background: green;
width: 300px;
height: 200px;
}
#box{
background: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<font id="font">font标签</font>
<font>测试</font>
<hr />
<input id="input" />
<font>测试</font>
<hr />
<div id="box"></div>
<font>测试</font>
</body>
</html>
盒子模型
相关的属性
宽/高
width/height
内边距:标签内,内容距离边框的距离
padding
边框:边框厚度
border
外边距:当前标签距离父容器或兄弟标签的距离
margin
盒子类型
标准盒子:
计算标签占用大小:左外边距+左边框+左内边距+宽+右内边距+右边框+右外边距 = 真实的宽
默认的就是该类型的盒子
IE盒子:
计算方式:左外边距 + 宽 + 右外边距 = 真实的宽
设置盒子类型为IE盒子:box-sizing: border-box;
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01{
background: red;
width: 200px;
height: 200px;
padding: 30px;
border: 20px solid black;
margin: 50px;
}
#box02{
background: red;
width: 200px;
height: 200px;
padding: 30px;
border: 20px solid black;
margin: 50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="box01"></div>
<div id="box02"></div>
</body>
</html>
布局
浮动
关键字:float
注意:会导致空间塌陷
解决方法:
.clearAfter:after{ content: "."; overflow: hidden; clear: both; height: 0; display: block; } 在其浮动的标签的父容器的class属性值中加入clearAfter即可
定位
属性:position
浏览器窗口定位:fixed
相对于浏览器窗口的位置,不会保留标签的原位置
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ height: 2000px; background: green; } #gg{ width: 240px; height: 160px; background: red; position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div id="box"> <img src="img/bg.gif" /> <font >xxx</font> <input /> </div> <div id="gg"> <font>这是一个广告</font> </div> </body> </html>相对定位:relative
相对于标签的原位置,会保留标签的原位置
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; } #box01{ background: red; } #box02{ background: green; position: relative; left: 50px; top: -50px; z-index: -1; } #box03{ background: blue; } </style> </head> <body> <div id="box01" class="box"></div> <div id="box02" class="box"></div> <div id="box03" class="box"></div> </body> </html>绝对定位:absolute
相对于最近一层做过定位的父容器的位置
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 300px; height: 500px; background: black; position: relative; } #box01{ width: 200px; height: 200px; background: red; } #box02{ width: 200px; height: 200px; background: white; position: relative; } #box02_01{ width: 150px; height: 50px; background: orange; } #box02_02{ width: 150px; height: 50px; background: green; position: absolute; right: 0; } #box02_03{ width: 150px; height: 50px; background: orchid; } </style> </head> <body> <div id="box"> <div id="box01"></div> <div id="box02"> <div id="box02_01"></div> <div id="box02_02"></div> <div id="box02_03"></div> </div> </div> </body> </html>
响应式布局
<!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%;
}
/*限定屏幕尺寸在100~640之间的使用*/
@media only screen and (min-width: 100px) and (max-width: 640px) {
#content{
background: red;
}
}
@media only screen and (min-width: 640px) and (max-width: 980px) {
#content{
background: green;
}
}
@media only screen and (min-width: 980px) and (max-width: 1240px) {
#content{
background: orange;
}
}
@media only screen and (min-width: 1240px) {
#content{
background: black;
}
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>
弹性盒子
示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
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>
示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 300px;
height: 200px;
background: orange;
display: flex;/*设为弹性盒子*/
}
#div{
width: 100px;
height: 100px;
background: red;
margin: auto;/*使组件居中*/
}
</style>
</head>
<body>
<div id="box">
<div id="div"></div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
