<span>
<span style="color: "></span> 独立修饰文本
有序列表:
<ol><li></li></ol>li里面可以随意放标签,但是ol里面只能防止li
<!-- 1.li里面可以随意放标签,但是ol里面只能防止li
2数字是自动生成的。
3. type: 1,a,A,i,I ,选择自己的类型
4. start:取值只能是一个数字,在第几位开始 -->
无序列表:
<ul><li></li></ul>
自定义列表:
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
图片标签:
<img src="">
<!--1. alt:如果发生错误·会提示
2.title:鼠标放在图片上显示显示你备注的信息
3.width:图片宽瘦
4.height:图片高低
-->
超链接标签:
<!-- titlt:鼠标放上显示的信息
target:规定在何处打开文档
属性设置:
target="_self“默认值
target="_blank“新窗口打开 -->
<a href="https://mp.csdn/mp_blog/creation/editor/123014618">前端连接</a>
<!-- 图片图标 -->
<a href="https://www.baidu/">
<a href="https://www.baidu/">
<img src="强风吹拂.jpg">
</a>
</a>
表格:
<!-- border: 边框
width:宽
height:高
align:水平对齐
bordercolor:外边框的颜色
cellspacing:单元格与单元格之间的空隙
cellpadding:单元格与内容之间的空隙-->
<table border="1" width="500" height="500" align="center" bordercolor="red" bgcolor=""
cellspacing="0" cellpadding="30">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
tr td标签:
<!-- tr属性设置:
可以设置高度,但是不可以设置宽
bgcolor:设置行背景
height:高度
align=""内容的居中 靠右
valign=""上下-->
<!-- td属性
width:宽
height:高
bgcolor:单元格背景颜色
align=""内容的居中 靠右
valign=""内容上下
td:如果一个单元格的设置宽度,影响的是这一整列的宽度
td:如果个单元格的设置高令,影响的是这一整行的高度-->
<table border="1" width="300" height="300" bgcolor="yellow">
<tr bgcolor="orange" align="" valign="">
<td width="100">1</td>
<td height="100" bgcolor="yellow">2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
合并列合并行:
<table border="1" width="300" height="300">
<!-- colspan 横着合并
rowspan竖着合并-->
<tr>
<td>1</td>
<td colspan="2" rowspan="2">2</td>
<!-- <td>3</td> -->
</tr>
<tr>
<td rowspan="2">4</td>
<!-- <td colspan="2">5</td> -->
<!-- <td>6</td> -->
</tr>
<tr>
<!-- <td>7</td> -->
<td colspan="2">8</td>
<!-- <td>9</td> -->
</tr>
</table>
表单form
<form action="">
用户信息<input type="text" placeholder="请输入">
<br>
密码<input type="password">
<br>
<input type="submit">
<button>登录</button>
<input type="reset">
</form>
外部css
<!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>
<!--外部css引入方式-->
<!--1. <link rel="stylesheet" href="./css/index.css" type="text/css"> -->
<!--2. <style>
@import url(css/index.css);
</style> -->
</head>
<body>
<h1>11111</h1>
</body>
</html>
行内样式:
<h2 style="color: blue;">2222</h2>
优先级:
注:
优先级显示:行内>内部>外部,如果想指定那个显示在标签后边加:!important
<!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>
<link rel="stylesheet" href="./css/index.css">
<style>
h1{
color: blue !important;
}
</style>
</head>
<body>
<h1 style="color: brown;">1111111</h1>
</body>
</html>
选择器:
包含选择器:
<!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>
div p{
color: aqua;
}
</style>
</head>
<body>
<div>
<p>111111</p>
</div>
</body>
</html>
伪类选择器:
顺序:
Link--visited--hover--active。
<!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>
/* 初始化 */
a:link{
color: aqua;
}
/* 访问后 */
a:visited{
color: black;
}
/* 鼠标移上 */
a:hover{
color: brown;
}
/* 点击时 */
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.baidu/">百度</a>
</body>
</html>
选择器的权重:
css文本属性:
css文本加粗倾斜 font-weight 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>
/* 100 细 ligter*/
/* 400正常 normal */
/* 700加粗 bold*/
/* 900更加粗 bolder*/
.aa{
font-weight: 700;
}
/* talici 倾斜
oblique 更倾斜
normal 正常
*/
.bb{
font-style:normal;
}
</style>
</head>
<body>
<p class="aa">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit placeat facilis est recusandae impedit quaerat expedita neque quo fugit optio,
magnam distinctio, fugiat aut soluta obcaecati consequatur vero qui quam.
</p>
<p class="bb">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit placeat facilis est recusandae impedit quaerat expedita neque quo fugit optio,
magnam distinctio, fugiat aut soluta obcaecati consequatur vero qui quam.
</p>
</body>
</html>
文字居中设置
<!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>
.a{
/* 设置背景颜色 */
background:lawngreen;
/* div高度 */
height: 100px;
/* div宽度 */
width: 500px;
/* 文本居中 */
text-align: center;
/* 设置文字高度 */
line-height: 100px;
/* 当div高度和文本高度相等时,在设置文本居中。就可以文字在中间了 */
}
</style>
</head>
<body>
<div class="a">
你好啊
</div>
</body>
</html>
文字与单词之间的缩进:
文字用: letter-spacing
单词之间: word-spacing
<!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>
.a{
letter-spacing: 10px;
}
.b{
word-spacing: 10px;
}
</style>
</head>
<body>
<p class="a">发文助手会对标题提出优化建议,避免出现不恰当文字从而影响文章推荐。【标题规范】</p>
<p class="b">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque in animi sequi rem totam,
ducimus repudiandae vitae nam, dolores non reprehenderit,
alias modi ipsa voluptas hic qui numquam pariatur debitis.</p>
</body>
</html>
首行缩进:
text-indent:2em;
解释一下:text的意思是文本,indent在计算机英语中意思是缩进,至于后面的2em意思就是2个相对单位;
<!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>
.a{
text-indent: 2em;
}
</style>
</head>
<body>
<p class="a">首先是中央处理单元或CPU 。CPU可以被认为是您计算机的大脑。
一个 CPU 内核,在这里被描绘成一个办公室的工作人员,
可以在他们进来时一个一个地处理许多不同的任务。CPU可以处理从数学到艺术的所有事情
,同时知道如何回复客户的电话。过去,大多数 CPU 都是单芯片。内核就像另一个 CPU 生活在同一个芯片中。
在现代硬件中,您通常会获得多个内核,从而为您的手机和笔记本电脑提供更多的算力。</p>
</body>
</html>
文字上中下划线
1.text-decoration: none; 取消划线,适用于超链接
2.text-decoration: overline; 上划线
3.text-decoration: underline; 下划线
4. text-decoration: line-through; 删除线
<!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{
/* 取消划线,适用于超链接
text-decoration: none; */
/* 上划线
text-decoration: overline; */
/* 下划线 */
/* text-decoration: underline; */
text-decoration: line-through underline overline;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis asperiores architecto perferendis enim consequuntur.
Consectetur aut necessitatibus, earum doloribus,
porro ad ducimus temporibus dolorum,
ut veritatis quo voluptas atque animi!</p>
</body>
</html>
练习小案例:
<!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>
.a{
height: 50px;
width: 200px;
background: #808080;
color: #ffffff;
line-height: 50px;
text-align: center;
font-size: 25px;
}
p{
font-size: 20;
text-indent: 2em;
width: 500px;
}
.c{
color: red;
}
.b{
font-weight: 700;
}
</style>
</head>
<body>
<div class="a">
前锋简介
</div>
<p >
<span class="b">北京千锋互联科技有限公司(简称千锋)</span>成立于2011年1月。公司总部位于北京,目前已在<span class="c">深圳、
上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原</span>建
立分公司。
</p>
<p>
千锋旗下现有<span class="b">教育培训、人才服务、项目研发、创业孵化</span>等业务。教育培训业务主要为大学生、企
业提供技术培训服务;人才服务业务主要为企业提供优秀的互联网研发人才;项目研发业务主要为企
业提供APP解决方案及APP项目研发;创业孵化业务为有创业梦想的学员设立,为其提供创业辅导及
天使投资等服务。
</p>
<p>
千锋秉承着<spen class="c">“用良心做教育”</spen>的理念踏踏实实的做事,<spen class="c">创办9年,现已成为业内口碑好、规模大、教
学强的移动互联网研发培训机构。</spen>目前累计与国内超过8200多家IT相关企业建立人才输送合作,
与562所大学建立实训就业合作,每年为中国IT企业输送上万名移动开发工程师。计划未来5年内
实现年营收过10亿,为中国教育行业贡献一份力量。
</p>
</body>
</html>
字母大小写
text-transform: capitalize; 首字母大写
text-transform: lowercase; 全小写
text-transform: uppercase; 全大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>Document</title>
<style>
p{
/* 首字母大写 */
/* text-transform: capitalize; */
/* 全小写 */
/* text-transform: lowercase; */
/* 大写 */
text-transform: uppercase;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugiat vero, optio tempore maxime amet quo ex.
Architecto perferendis adipisci cum ex illo totam necessitatibus ipsum eligendi accusantium.
Alias, odit omnis?
</p>
</body>
</html>
列表属性
默认属性实心圆 dise
空心圆:circle
方格:square
去掉: none
简便:
<!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>
ul{
/*默认属性实心圆 dise
空心圆:circle
方格:square
去掉: none*/
list-style-type:none ;
list-style-image:url(./图片/1.png);
}
li{
/* 图片设置在列表里 */
list-style-position: inside;
}
.a{
list-style: none url(./图片/1.png) inside;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ul class="a">
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
</body>
</html>
背景属性:
背景图片:
background-position图片移动三种方式:
1. 20px 20px
2. 10% 10%
3. left center right x轴 两种轴进行组合
top center bottom y轴
background-size 设置图片大小:
设置图片大小:
1. 百分比:100% 100%
2. px px
3. cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中。
4.4.contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。铺不满盒子,留白
<!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>
.a{
height: 400px;
width: 400px;
background-color: aqua;
background-image: url(../图片/1.png);
/*repeat 默认平铺
repeat-x X轴平铺
repeat-y Y轴平铺
no-repeat 不平铺 */
background-repeat: no-repeat ;
/* 图片移动:
1. 20px 20px
2. 10% 10%
3. left center right
top center bottom*/
background-position: center center;
}
.b{
background-image: url(../强风吹拂.jpg);
height: 300px;
width: 300px;
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div class="a">
</div>
<div class="b">
</div>
</body>
</html>
背景复合写法:
重: background-size 不能复合使用,只能单独使用。
<!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>
div{
/* background-size不能复合使用 */
width:600px;
height:600px;
/* background-color: yellow;
background-image: url(./强风吹拂.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; */
background: yellow url(./强风吹拂.jpg) no-repeat center fixed;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
浮动属性 float:
<!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>
div{
width: 300px;
height: 300px;
}
.a{
background-color: aqua;
float: left;
}
.b{
background-color: blue;
float: left;
}
.c{
background-color: brown;
float: left;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
清浮动 clear:
消除浮动的方法:
1.写固端高度
2. 清浮动 clear: both/left/right 注:在补充的盒子中设置
3. 在浮动元素后面补充一个盒子
4. overflow: hidden; 让浮动元素计算高度 注:写在父盒子中
<!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>
#a ,#b{
height: 300px;
width: 300px;
}
#a{
background-color: blue;
float: left;
}
#b{
background-color: brown;
float: left;
}
.c{
height: 600px;
width: 600px;
background-color: blanchedalmond;
/* clear: both; */
}
.a{
overflow: hidden;
}
</style>
</head>
<body>
<!--1. 写固端高度
2. 清浮动 clear: both/left/right 注:在补充的盒子中设置
3. 在浮动元素后面补充一个盒子
4. overflow: hidden; 让浮动元素计算高度 注:写在父盒子中
-->
<div class="a">
<div id="a"></div>
<div id="b"></div>
<div></div>
</div>
<div class="c">
</div>
</body>
</html>
内边距padding:
一个值:四个方向相同
两个值:上下相同 左右相同
三个值:上 左右相同 下
四个值:上 右 下 左
<!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>
/* 一个值:四个方向相同
两个值:上下相同 左右相同
三个值:上 左右相同 下
四个值:上 右 下 左 */
div{
width: 300px;
height: 300px;
background-color: bisque;
text-align: center;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div >
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Suscipit necessitatibus quaerat quas distinctio quisquam nesciunt dolorem dolore rerum consequatur.
Excepturi doloribus eius impedit est corporis quisquam accusantium mollitia aut nobis!
</div>
</body>
</html>
边框:
边框样式:
实线 solid 双实线 double 虚线 dashed 点状点 dotted
<!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>
div {
height: 300px;
width: 300px;
background-color: blanchedalmond;
border: aquamarine 10px dotted;
/* solid double dashed dotted */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
更多推荐
自学前端持续更新中
发布评论