css技术介绍:
css是层叠样式的表单。是用于(增强)控制网页样式,并允许将样式信息与网页内容分离的一种标记性语言。
语法规则:
选择器:浏览器根据“选择器”决定受css样式影响的HTML元素(标签)。
属性:是你要改变的样式名,并且每一个值。属性和值都被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明,例如p{color:blue}
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号。(但尽量在每条声明的末尾都加上分号)
方式一:
<div style="border: 1px solid red">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>
方式二:
在head中定义css样式,选择器就是html标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签专门用来定义css样式代码-->
<style type="text/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>
方式三:
将css样式写为一个单独的css文件,再通过link标签引入服用即可
css样式文件:
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
html代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link标签专门用来引入css样式-->
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
常用的选择器
-
标签名选择器
格式: 标签名{
属性:值;
} -
id选择器
格式:#id 属性值{
属性:值
} -
class类型选择器
格式:.class属性值{
属性:值;
}
class类型选择器,可以通过class属性有效的选择性的使用这个样式 -
组合选择器
格式: 选择器1,选择器2,选择器n{
属性:值;
}
常用的样式:
- color:颜色
- width:宽度
- height:高度
- background-color:背景颜色
- font-size:字体大小
- border:边框
- margin left:auto /margin right:auto :DIV居中
- text-align:文本居中
- text-decoration:none :超链接去除下划线