css技术
css是层叠样式表单,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8WQ981J-1637457341985)(C:\Users\小高\AppData\Roaming\Typora\typora-user-images\image-20211120203315819.png)]
css注释 : /* 注释内容 */
css和html的结合方式
第一种:在标签的style属性上设置“key:value value;”,修改标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--分别定义俩个div,spen标签,分别修改每个div标签的样式为:边框1个像素,实线,红色。-->
<div style="border:1px solid red;width: 100px; height: 100px;background-color: blueviolet;text-align: center;">div标签1</div>
<div style="border:1px solid red;">div标签2</div>
<span style="border:1px solid red;">span标签1</span>
<span style="border:1px solid red;">span标签2</span>
<p style="border:1px solid red;"> p 段落标签1</p>
<p style="border:1px solid red;"> p 段落标签2</p>
</body>
</html>
这种方式的缺点?
1.如果标签多了,样式多了。代码量非常大。
2.可读性非常差。
3.css代码没什么复用性可言。
第二种:在head标签中,使用style标签来定义各种自己需要的css样式。
格式如下:
XXX{
Key : value value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* style标签用来定义css样式代码*/
div{
border:1px solid red;
}
span{
border:1px solid red;
}
</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
这种方式的缺点:
1.只能在同一页面内复用代码,不能再多个页面中复用css代码。
2.维护起来不方便,实际的项目中会有成千上万个的页面,要到每个页面中去修改。工作量太大了。
第三种:把css样式写成一个单独的css文件,再通过link标签引入即可复用。
div{
border:1px solid red;
}
span{
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link 标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="1-css.css"/>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
css 选择器
css标签名选择器
标签名选择器的格式:
标签名{
属性:值;
}
标签名选择器,可以决定哪些标签被动的使用这个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 1px dashed yellow;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--div,span,p标签
div标签 默认独占一行
span 它的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行来(如果已有就不再空)
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
id选择器
id选择器的格式:
#id属性值{
属性:值;
}
id选择器,可以让我们通过id属性选择性的去使用这个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
#id001{
border: 1px solid yellow;
color:blue;
font-size: 30px;
}
#id002{
border:5px dotted blue;
color: red;
font-size:20px;
}
</style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
class选择器(类型选择器)
class类型选择器的格式为:
.class属性值{
属性:值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器类型</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="class01">div标签class01</div>
<div class="class02">div标签class02</div>
<span class="class01">span标签</span>
<span>span标签</span>
</body>
</html>
组合选择器
组合选择器的格式:
选择器1,选择器2,选择器3{
属性:值;
}
组合选择器可以让多个选择器共用同一个css样式代码。
常用样式
1.字体颜色
color: red;
2.宽度
width:19px
宽度可以写像素值:19px;
也可以写百分比值:20%;
3.高度
height:20px;
4.背景颜色
background-color:#0F2D4C
5.字体样式:
color: #FF0000;字体颜色为红色
font-size:20px; 字体大小
6.红色1像素实线边框
border:1px solid red;
7.DIV 居中
margin-left:auto;
margin-right:auto;
8.文字居中
text-align:center;
9.超连接去下划线
text-decoration:none;
10.表格细线
table{
border:1px solid black;/* 设置边框 */
border-collapse;/* 将边框合并 */
}
td,th{
border:1px solid black;/* 设置边框*/
}
11.列表去除修饰
ul{
list-style:none;
}