HTML&CSS&JavaScript之CSS篇
目录
1 CSS技术
- CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
1.1 css语法规则
选择器{
/*注释内容*/
属性:值;
属性:值;
}
- 选择器:决定手css样式影响的HTML标签
- 属性:要改变的样式名。属性+值构成声明。多个声明之间用分号隔开
1.2 css和html的结合
1.2.1 方式一
- 标签上加style属性
<!--加上红色实现边框-->
<div style="border:1px solid red;">内容</div>
- 缺点:
- 样式过多,代码量大
- 可读性差
- 复用性差
1.2.2 方式二
- head中使用css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border:1px solid red;
}
span{
border:1px solid red;
}
</style>
</head>
<body>
<div>内容1</div>
<div>内容2</div>
</body>
</html>
- 缺点:
- 只能在同一个页面进行复用,不能再多个页面中复用css代码
- 不方便维护
1.2.3 方式三
- 将css样式写入单独文件通过link标签引入
css文件中
div{
border:1px solid red;
}
span{
border:1px solid red;
}
html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="demo01.css"/>
</head>
<body>
<div>内容1</div>
<div>内容2</div>
</body>
</html>
1.3 css选择器
1.3.1 标签选择器
- 格式
标签名{
属性:值;
}
- 作用:决定哪些标签被动的使用这个格式
- 案例:
html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<!--样式实现-->
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--
需求1:在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
并且修改所有span 标签的字体颜色为黄色,字体大小20个像素。边框为5像素蓝色虚线。
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
1.3.2 id选择器
- 格式
#id 属性值{
属性:值;
}
- 作用:通过id决定使用这个格式
- 案例:
html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<!--样式实现-->
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted;
}
</style>
</head>
<body>
<!--
需求1:分别定义两个 div 标签,
第一个div 标签定义 id 为 id001 ,然后根据id 属性定义css样式修改字体颜色为蓝色,
字体大小30个像素。边框为1像素黄色实线。
第二个div 标签定义 id 为 id002 ,然后根据id 属性定义css样式 修改的字体颜色为红色,字体大小20个像素。边框为5像素蓝色点线。
-->
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
1.3.3 类型选择器
- 格式
.class属性值{
属性:值;
}
- 作用:通过class属性使用这个格式
- 案例:
html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<!--样式实现-->
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: gray;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--
需求1:修改 class 属性值为 class01的 span 或 div 标签,字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
需求2:修改 class 属性值为 class02的 div 标签,字体颜色为灰色,字体大小26个像素。边框为1像素红色实线。
-->
<div class="class01">div标签class01</div>
<div class="class02">div标签</div>
<span class="class01">span标签class01</span>
<span>span标签2</span>
</body>
</html>
1.3.4 组合选择器
- 格式
选择器1,选择器2,选择器3,...选择器n{
属性:值;
}
- 作用:让多个选择器公用一个格式
- 案例:
html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<!--样式实现-->
<style type="text/css">
.class01,#id01{
color: blue;
font-size: 20px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<!--
需求1:修改 class="class01" 的div 标签 和 id="id01" 所有的span标签,
字体颜色为蓝色,字体大小20个像素。边框为1像素黄色实线。
-->
<div class="class01">div标签class01</div> <br />
<span id="id01">span 标签</span> <br />
<div>div标签</div> <br />
<div>div标签id01</div> <br />
</body>
</html>
1.4 常用样式
- 案例:
html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用样式.html</title>
<style type="text/css">
div{
/*设置颜色*/
color: yellow;
/*设置边框,切记要设置框线*/
border: 1px red solid;
/*设置宽高*/
width: 300px;
height: 200px;
/*设置背景颜色*/
background-color: gray;
/*设置字体大小*/
font-size: 20px;
/*DIV居中*/
margin-left: auto;
margin-right: auto;
/*文本居中*/
text-align: center;
}
a{
/*超链接去下划线*/
text-decoration: none;
}
/*去掉无序列表前的符号*/
ul{
list-style: none;
}
/*表格细线*/
table{
border: 1px red solid;
}
td{
border: 1px red solid;
}
</style>
</head>
<body>
<a href="www.baidu.com">百度</a>
<div>内容</div>
<ul>1</ul>
<ul>2</ul>
<ul>3</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
</body>
</html>