1 、样式 style
style 的使用方法
<!DOCTYPE html>
<html lang="en">
<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>
/* p,h1{
color: #000;
} */
</style >
<link rel="stylesheet" href="../2_css/01waibu.css" type="text/css">
</head>
<body>
<p style="color: yellow;"> sdsd</p>
<h1>dss</h1>
</body>
</html>
2、基本选择器
统配选择器、 标签选择器、类选择器、id选择器(id名唯一)
{ } 、 标签名{ } 、 .类名{ } 、 #id名{ }
类选择器之前用点,id选择器之前用*#**号
<!DOCTYPE html>
<html lang="en">
<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>
/* *统配选择器 控制页面所有范围 */
*{
margin: 0; padding:0;
}
/* 标签名{} 标签选择器 */
h1{
color:red;
}
/* .class名 类选择器 */
.c1{
color:pink
;
}
/* id名唯一 */
#div1{
color: aquamarine;
}
</style>
</head>
<body>
<h1>sgefg</h1>
<p>ffffa</p>
<!-- div也是无语义的标签 是块标签 -->
<div id="div1" class="c1 c2">dsadasd</div>
</body>
</html>
3、复合选择器
并集选择器、包含选择器(后代选择器)、属性选择器、伪类选择器
<!DOCTYPE html>
<html lang="en">
<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>css复合选择器</title>
<style>
/* 并集选择器 */
h1,p{
color: blue;
}
/* 包含选择器 */
div p{
color:rebeccapurple;
}
/* 属性选择器 */
input[name]{
background-color: aqua;
}
input[name='age']{
background-color: aquamarine;
}
/*伪类选择器*/
ul li:first-child{
color: red
;
}
ul li:last-child{
background-color: aqua;
}
ul li:nth-child(3){
background-color: bisque;
}
</style>
</head>
<body>
<h1>ssdsd</h1>
<p>dsdd</p>
<div>
<p>dasdsda</p>
</div>
<div>
<input type="text" name="username">
<input type="text" name="age">
<input type="text">
</div>
<ul>
<li>1</li>
<li>2222222</li>
<li>3333333333</li>
<li>4444444444444</li>
</ul>
</body>
</html>
运行截图
4、块、行内、行内元素
- 块元素独占一行,可以控制宽高,宽度默认铺满屏幕,高度默认内容高度
- 行内元素,元素不独占一行,连续显示,不能指定宽度和高度,宽度和高度是内容本身
- 行内块元素,元素不独占一行,连续显示,能指定块宽度和高度
常见的块元素有:
常见的块元素有:
- <h1>~<h6>
- <p>
- <div>
- <ul>
- <ol>
- <li>
其中<div>标签是最典型的块元素。
行内元素
行内元素(内联元素)不独占一行,宽度和高度是内容本身的宽度和高度
常见行内元素有:
- <a>
- <strong> 加粗
- <b>加粗
- <em>倾斜
- <i>倾斜
- <del>删除
- <s>删除
- <ins>下划线
- <u>下划线
- <span>
其中<span>标签最典型的行内元素。
行内块元素
行内块元素主要有:
- <img />
- <input />
- <td>
综合实例
<!DOCTYPE html>
<html lang="en">
<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>块、行内、行内元素</title>
<style>
/* 1.块元素独占一行
2.可以指定块的宽、高
3. 宽度默认铺满所在容器
4.高度默认是内容高度
*/
div{
width: 100px;
height: 100px;
background: red;
}
/* 1.行内元素,元素不独占一行,连续显示
2.不能指定宽度和高度
3、宽度和高度是内容本身
*/
span{
width: 100px;
height: 100px;
background: blanchedalmond;
}
/* 行内块元素
1.元素不独占一行,连续显示,
2.能指定块宽度和高度 */
input{
width: 200px;
height: 402px;
background: pink;
display:inline;
}
</style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span><span>行内元素</span>
姓名<input type="text"><input type="text">dasd
</body>
</html>
5、块、行内、行内元素转换
/*将目标元素转为块元素 */
display: block;
/*将目标元素转为行内元素 */
display: inline;
/*将目标元素转为行内块元素 */
display: inline-block;
<!DOCTYPE html>
<html lang="en">
<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>块、行内、行内元素转换</title>
<style>
/* css中,可以通过display属性来改变标签的显示模式 */
span{
width: 100px;
height: 100px;
background: red;
/* 将目标元素转为块元素 */
/* display: block; */
/* 将目标元素转为行内元素 */
/* display: inline; */
display: inline-block;
}
</style>
</head>
<body>
<span>元素显示模式转换</span>测试
</body>
</html>
6、字体属性
font基本语法格式
<!DOCTYPE html>
<html lang="en">
<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>字体属性</title>
<style>
p{
/* font-size: 14px;
font-family: "微软雅黑";
font-weight: 800px;
font-style: italic; */
font: italic 400 14px/21px "微软雅黑";
}
/* {font: font-style, font-width, font-size/line-height,font-family */
</style>
</head>
<body>
<p>张伟必须死</p>
</body>
</html>
7、文本属性(外观属性)
<!DOCTYPE html>
<html lang="en">
<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>文本属性(外观属性)</title>
<style>
p{
/*字体颜色*/
color:red;
color:#2C2F32;
color:rgb(255,0,30);
/* 有透明度的 */
color:rgba(0,0,0,0.3);
/* 字体大小 */
font-size:21px;
/*行高*/
line-height: 28px;
/*水平对齐方式*/
/* center 居中 left 靠左 right 靠右 */
text-align: center;
/*2em当前字体大小的2倍*/
text-indent: 2em;
/* none 无 underline下划线 overline上划线 line-through 删除线 */
text-decoration: overline;
/* 单词间距 */
word-spacing: 5px;
/* 字母间距 */
letter-spacing: 15px;
/* font-style: italic; */
font:italic 400 34px/39px "楷体" ;
}
</style>
</head>
<!-- .p1是类 #p1是id -->
<body>
<p>hello world 胖叔讲java!!!,一路相伴胖叔讲java!!!,
一路相伴胖叔讲java!!!,一路相伴胖叔讲java!!!,一路
相伴胖叔讲java!!!,一路相伴 胖叔讲java!!!,一路相
伴胖叔讲java!!!,一路相伴胖叔讲java!!!,一路相伴胖
叔讲java!!!,一路相伴胖叔讲java!!!,一路相伴胖叔讲
java!!!,一路相伴 胖叔讲java!!!,一路相伴胖叔讲java
!!!,一路相伴胖叔讲java!!!,一路相伴胖叔讲java!!!,
一路相伴胖叔讲java!!!,一路相伴
</p>
<p class="p1">
张伟必须死
</p>
</body>
</html>
8、背景属性
<!DOCTYPE html>
<html lang="en">
<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>背景属性</title>
<style>
.bj{
width: 800px;
height: 2000px;
text-align: center;
background-color: aqua;
/* 背景照片 */
background-image:url(../imgs/1.png);
color:yellow;
font-size: 300px;
/* 图片的平铺方式 */
/* repeat| no-repeat| repeat-x|repeat-y */
/* repeat 默认。背景图像将在垂直方向和水平方向重复。*/
/*no-repeat 背景图像将仅显示一次。 */
/*repeat-x 背景图像将在水平方向重复。*/
/*repeat-y 背景图像将在垂直方向重复。*/
background-repeat: no-repeat;
/* 背景图片位置定位 */
background-position: left 50px top 100px;
/*图片的附着方式 */
/* scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 */
/* fixed 当页面的其余部分滚动时,背景图像不会移动。*/
/* inherit 规定应该从父元素继承 background-attachment 属性的设置。 */
background-attachment:fixed;
/* 综合写法 */
/* background: green url(../imgs/1.png) no-repeat fixed left 300px top 200px; */
/* background: 颜色 图片 图片的平铺方式 附着方式 背景图片位置定位 */
}
</style>
</head>
<body>
<div class="bj">凹凸曼</div>
</body>
</html>
9、背景精灵技术
<!DOCTYPE html>
<html lang="en">
<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>
.setting{
width:400px;
height: 500px;
background: url(../imgs/2.png) no-repeat left 100px top 0;
}
</style>
</head>
<body>
<div class="setting"></div>
</body>
</html>
10、表格属性
- text-align:设置文本的水平对齐。
- vertical-align:设置文本的垂直对齐。
- border-spacing:边框间距
- border-collapse:合并边框
- collapse:合并边框
- separate:不合并边框
<!DOCTYPE html>
<html lang="en">
<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>表格属性</title>
<style>
/* text-align:设置文本的水平对齐。
vertical-align:设置文本的垂直对齐。
border-spacing:边框间距
border-collapse:合并边框
collapse:合并边框
separate:不合并边框
*/
table{
width: 500px;
text-align: center;
/* 设置文本的垂直对齐 */
vertical-align: middle;
}
table,tr,td,th{
border: 1px solid black;
/* 边框厚度 */
border-spacing: 0;
/* 合并表框线 */
border-collapse: collapse;
border-left: none;
border-right: none;
/* 去除列表样式 */
/* list-style: none; */
}
</style>
</head>
<body>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>丽丝</td>
<td>女</td>
</tr>
</table>
</body>
</html>
11、其他属性
- list-style:none 去除列表项
- transform: 属性值
- scale缩放(一般)
- translate 位移(重点)
- rotate 旋转(重点)
- skew 倾斜(了解)
<!DOCTYPE html>
<html lang="en">
<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>其他属性</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
/* 去除列表项目 */
list-style: none;
}
h2{
/* transform: translate(200px,50px); */
transform:rotate(5deg);
}
</style>
</head>
<body>
<ul>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
</ul>
<h2>标题</h2>
</body>
</html>
12、盒子模型
<!DOCTYPE html>
<html lang="en">
<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>盒子模型</title>
<style>
*{margin: 0; padding: 0;}
.adv1{
width: 100px;
height: 100px;
background-color: aqua;
/* 设置内边距 */
padding-top: 10px;
padding-left: 40px;
padding-bottom: 30px;
padding-right: 40px;
/* 可以忽略内边框带来的影响包含边框 */
box-sizing: border-box;
/* 上下左右都是20px */
padding: 20px;
/* 上下20px 左右40px */
padding: 20px 40px;
/* 上10px 下20px 左右30px */
padding: 10px 30px 20px;
/* 上 右 下 左 */
padding:10px 20px 30px 40px;
/* 边框 */
border-top: 1px solid green;
border-left: 2px dashed pink;
border-bottom: 1px solid green;
border-right: 4px dashed palegoldenrod;
border: 2px solid blue;
/* 边框圆角 */
border-radius:50px;
/* 外边框 */
margin-top: 10px;
margin-left: 20px;
margin-bottom: 30px;
margin-right: 40px;
margin: 40px;
margin:20px 40px;
margin: 10px 20px 40px;
margin: 10px 20px 30px 40px ;
}
</style>
</head>
<body>
<div class="adv1">www</div>
</body>
</html>
13、盒子模型居中
<!DOCTYPE html>
<html lang="en">
<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>盒子模型居中</title>
<style>
*{
margin: 0; padding: 0;
}
#app{
width: 800px;
height: 400px;
background-color: antiquewhite;
/* 解决div坍塌问题,调试外边距或内边距或定位不起作用,都可以用这个解决。但这个属性一定写在父容器中 */
overflow: hidden;
}
.adv{
width: 100px;
height: 100px;
/* 水平居中 */
margin: 50px auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="adv">ss </div>
</div>
</body>
</html>
14、浮动
<!DOCTYPE html>
<html lang="en">
<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>浮动</title>
<style>
#app{
width: 800px;
height: 300px;
background-color: aquamarine;
}
.adv{
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
/* float: left; */
float: right;
/* 左浮动时,与父容器的外边距只能设置外边距,有浮动时,只能设置与父容器的右边距 */
margin-right: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="adv"></div>
<div class="adv"></div>
<div class="adv"></div>
</div>
</body>
</html>
15、清除浮动
<!DOCTYPE html>
<html lang="en">
<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>清除浮动</title>
<style>
*{
margin: 0;
padding: 0;
}
#app{
background-color: beige;
/* 具有清除浮动的功能,此overflow:hidden可以消除好多影响*/
/* overflow: hidden; */
}
.adv{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div id="app">
aquamarine
<div class="adv"></div>
<div class="adv"></div>
<div class="adv"></div>
<!-- 清除浮动带来对的影响 -->
<div style="clear:both"></div>
</div>
</body>
</html>
16、相对定位
<!DOCTYPE html>
<html lang="en">
<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>相对定位</title>
<style>
*{
margin: 0;padding: 0;
}
#app{
width: 100px;
height: 100px;
background-color: red;
margin: 100px;
/* 相对定位:默认距离原来位置进行定位 */
/*
static 自动定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
*/
position: relative;
/* 写了定位属性才可以写偏移量 */
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
17、子绝父相
<!DOCTYPE html>
<html lang="en">
<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>子绝父相</title>
<style>
*{
margin: 0;padding: 0;
}
#app{
width: 800px;
height: 300px;
background: red;
/* 相对定位 */
position: relative;
margin-left: 100px;
}
#app .adv{
/* 相对于父容器有定位属性的容器进行定位 */
position: absolute;
top: 20px;
left:20px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div class="adv"></div>
</div>
</body>
</html>
18、固定定位
<!DOCTYPE html>
<html lang="en">
<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>固定定位</title>
<style>
.adv{
width: 100px;
height: 100px;
background-color:red;
/* 固定定位,相对浏览器窗口定位 */
position: fixed;
bottom: 10px;
right: 20px;
}
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="adv">广告</div>
</body>
</body>
</html>
19、垂直居中
<!DOCTYPE html>
<html lang="en">
<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>垂直居中</title>
<style>
*{
margin: 0;padding: 0;
}
#app{
width: 800px;
height: 400px;
background-color: blue;
position: relative;
}
.adv{
width: 100px;
height: 100px;
/* 水平居中 */
margin: 0 auto;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
/* 第一种 */
/* transform: translate(-50px,-50px); */
/* 第二种 */
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div id="app">
<div class="adv"></div>
</div>
</body>
</html>
20、布局案例
<!DOCTYPE html>
<html lang="en">
<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>布局案例</title>
<style>
*{
margin: 0;
padding: 0;
}
.fl{
float: left;
}
.fr{
float: right;
}
/* 顶栏设计 */
#site-topbar{
background-color: pink;
height: 100px;
}
#site-header{
height: 400px;
background-color: #fff;
}
.container{
height: 400px;
margin: 20px auto;
background-color: pink;
/* 消除浮动 */
overflow: hidden;
}
.left{
width: 50px;
height: 100%;
background-color: blue;
}
.right{
width: 50px;
height: 100%;
background-color: blue;
}
#site-footer{
height: 50px;
background-color: pink;
margin-top: 50px;
}
.left01{
width: 50px;
height: 100%;
background-color:green;
}
</style>
</head>
<body>
<div id="site-topbar"> </div>
<div id="site-header">
<div class="container">
<div class="left fl"></div>
<div class="right fr"></div>
<div class="left01 fl"></div>
<div class="left01 fr"></div>
</div>
</div>
</div>
<div id="site-footer"></div>
</body>
</html>
运行结果