CSS
1.CSS概念
Cascading Style Sheet 级联样式表
表现HTML或者XHTML文件样式的计算机语言
包括对字体、颜色、高度、宽度、边距、背景图片、网页设计等设定
2.CSS的优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
3.CSS样式
行内样式
内部样式表
外部样式表
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外部样式引入css格式文件 -->
<link rel="stylesheet" type="text/css" href="../test2/css1.css"/>
<!-- 内部样式style标签 -->
<style type="text/css">
h1{
color: red;
}
</style>
<!--
样式
1.行内样式 直接和标签写在一行
2.内部样式 直接写在HTML文件中
3.外部样式 在外部书写一个css文件
优先级
<!--
行内 > 内部 > 外部 优先级
就近原则
-->
-->
<body>
<p style="color: #008000;">段落标签</p><!-- 行内样式 -->
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
<h1 >标题标签</h1>
</body>
</html>
3.1外部样式引用的两种方式
链接式
<title></title>
<!-- 外部样式引入css格式文件 -->
<link rel="stylesheet" type="text/css" href="../test2/css1.css"/>
导入式
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 使用导入式引入外部的css文件
一个.表示当前同目录下
两个.表示返回上一级
*/
@import url("../test2/css1.css");
</style>
</head>
两种引用方式的区别
4.基本选择器
标签选择器:HTML标签作为选择器的名称
类选择器
id选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
选择器
标签选择器
ID选择器 ：
ID选择器名字自定义 但是命名必须以#号开头 ID选择器只能使用一次
因为标签中不能有重复的ID
类选择器:
类选择器名字自定义 但是命名必须以.开头 可以多次使用
*/
p{
color: #008000;font: "arial rounded mt bold";
}
#av{
color: yellow;font: initial;
}
.class{
color: red;font: "bodoni mt condensed";
}
</style>
<!--
基本选择器优先级
ID选择器 > 类选择器 > 标签选择器
精确度越高优先级越高
-->
</head>
<body>
<p id="av" class="class">段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
<h1 class="class">一级标题</h1>
<h2>二级标题</h2>
</body>
</html>
4.1选择器总结
标签选择器直接用于HTML标签内
类选择器可在页面中多次使用
id选择器在同一个页面只能使用一次
4.2基本选择器优先级：
id选择器>类选择器>标签选择器
5.总结
6.标签
span标签的作用：能让某些文字或者某个词语凸显出来
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
color: green;
font-size: 20px;
font-family: 楷体;
font-weight: lighter;
font-style: oblique;
}
</style>
</head>
<body>
<!-- span标签 本身没有任何作用 但是我们可以使用span标签结合css样式凸显一些文字 -->
<p>吟诗一首：<span>床前</span>明月光，<span>疑是</span>地上霜</p>
<p id="p1">段落标签 改变字体样式</p>
</body>
</html>
7.字体样式
<style type="text/css">
span{
color: green;
font-size: 20px;
font-family: 楷体;
font-weight: lighter;
font-style: oblique;
}
#p1{
/* 字体风格→字体粗细→字体大小→字体类型 */
font:normal bold 36px "宋体";
}
</style>
</head>
<body>
<!-- span标签 本身没有任何作用 但是我们可以使用span标签结合css样式凸显一些文字 -->
<p>吟诗一首：<span>床前</span>明月光，<span>疑是</span>地上霜</p>
<p id="p1">段落标签 改变字体样式</p>
</body>
7.1font属性
font字体属性顺序：字体风格-->字体粗细-->字体大小-->字体类型
8.文本样式
文本属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: green;
font-family: 楷体;
font-size: 20px;
font-style: italic;
font-weight: bold;
text-align: center;
text-indent: 50px;
line-height: 50px;
text-decoration: line-through;
}
</style>
</head>
<body>
<!-- 文本装饰 对齐方式 字体颜色等等 -->
<p>
吟诗一首：<br/>
春风得意马蹄疾，一日看尽长安花
</p>
</body>
</html>
9.背景颜色
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100%;
height: 1500px;
background-color: lightpink;
}
</style>
</head>
<body>
<div>
我的网页设计
</div>
</body>
</html>
10.背景图片
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-image: url(../img/a.jpg);
background-repeat:repeat-y ;/* no-repeat图片只显示一个 不平铺 */
}
</style>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号