CSS简介
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS 实例
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
CSS 创建
如何插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
css的选择器
style选择器学习:
1、全局标签:
标签名{}
作用:给当前网页中所有该标签增加样式
2、id选择器:
#属性的id属性值{}
作用:给某个指定的标签添加指定的的样式
3、类选择器:
.类选择器名{}
作用:给不同的标签添加相同的样式
4、全部选择选择器:
*{}
作用:给所有的HTML标签添加相同的样式
5、组合选择器:
选择器1,选择器2,....{}
作用:解决不同的选择器间重复样式的问题
6、子标签选择器:
父标签 子标签 子标签...{}
作用:给所有的该标签嵌套标签添加样式
7、属性选择器:
标签[属性名=属性值]{}
作用:给特定的标签属性加上样式
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的选择器学习</title>
<!--
style选择器学习:
全局标签:
标签名{}
作用:给当前网页中所有该标签增加样式
id选择器:
#属性的id属性值{}
作用:给某个指定的标签添加指定的的样式
类选择器:
.类选择器名{}
作用:给不同的标签添加相同的样式
全部选择选择器:
*{}
作用:给所有的HTML标签添加相同的样式
------------------------以上必须掌握------------------------------------
组合选择器:
选择器1,选择器2,....{}
作用:解决不同的选择器间重复样式的问题
子标签选择器:
父标签 子标签 子标签...{}
作用:给所有的该标签嵌套标签添加样式
属性选择器:
标签[属性名=属性值]{}
作用:给特定的标签属性加上样式
-->
<style type="text/css">
/* 普通标签样式*/
hr{
height: 5px;
background-color: red;
}
table{
background-color: blue;
height: 200px;
width: 200px;
}
/* id选择器 */
#t{
background-color: red;
}
/* 类选择器 */
.common{
color: gray;
}
/* 组合选择器 */
p a,h5 a{
color: aqua;
}
/* 子标签选择器 */
ul li{
color: brown;
}
/* 属性选择器 */
input[type=text]{
background-color: red;
}
</style>
</head>
<body>
<h3>css的选择器学习</h3>
<hr>
<table id="t" class="common">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
<p>
<a href="">百度一下</a>
</p>
<h5><a href="">搜狗一下</a></h5>
<b class="common">css标签选择器的学习</b>
<ul>
<li>哈哈</li>
<li>呵呵</li>
<li>嘻嘻</li>
</ul>
<input type="text" name="uname" id="" value="" /><br>
<input type="password" name="upwd">
</body>
</html>
结果显示:
css常用样式
直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css常用样式学习</title>
<!-- 常用样式学习 -->
<!-- 表格样式学习 -->
<style>
body{
background-image: url(img/1.jpg); /* 选择图片路径*/
background-repeat: no-repeat;/* 不允许图片重复 */
background-size: cover;/* 图片平铺 */
}
/* 设置表格样式 */
table{
}
/* 设置行高 */
tr{
height: 50px;
}
/* 设置单元格样式 */
td{
width: 100px;/* 设置行宽 */
border: solid 1px;/* 设置边框线 */
border-radius: 10px;/* 设置边框角度 */
text-align: center;/* 设置字体的位置 */
background-color: orange;/* 设置背景颜色 */
font-weight: bold;/* 加粗字体 */
letter-spacing: 10px;/* 字体与字体之间的间隙 */
}
/* --------------------------------------------------------------------- */
/* 列表样式学习 */
ul{
background-color: gray;/* 设置列表的背景颜色为灰色 */
height: 50px;/* 设置列表的高度 */
}
li{
list-style-type: none;/* 设置列表前边的黑点消失 */
float: left;/* 设置每个列表选项靠左 */
}
li a{
font-weight: bold;/* 设置字体加粗 */
font-size: 20px;/* 字体大小 */
color: blue;/* 颜色 */
margin-left: 20px;/* 设置每对字体间的间隔 */
position: relative;/* 设置字体相对于列表的位置 */
top:10px;/* 设置字体距离列表上方的距离 */
}
</style>
</head>
<body>
<h3>css常用样式学习</h3>
<hr>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>爱好</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>唱歌</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>跳舞</td>
</tr>
</table>
<hr>
<ul>
<li><a href="">首页</a></li>
<li><a href="">java</a></li>
<li><a href="">python</a></li>
<li><a href="">c#</a></li>
</ul>
</body>
</html>
实现结果:
图片案例
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
text-align: center;
background-color: gray;
}
img{
width: 12%;
height: 200px;
border: solid 1px;
padding: 10px;/* 设置内容和边框之间的距离 */
background-color: white;
transform: rotate(-10deg);/* 设置旋转的角度 */
margin: 20px;
}
img:hover{
transform: rotate(0deg) scale(2);/* 设置照片旋转的角度(正数是顺时针旋转,负数逆时针旋转) scale是放大的倍数 */
z-index: 1;/* 设置图片显示的优先级 */
transition: 1.5s;/* 设置旋转的时间 */
}
</style>
</head>
<body>
<br><br><br><br><br>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<br>
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
</body>
</html>
实现结果
光标放在图片上会有不同的效果**(火狐浏览器打开,多尝试几个浏览器)**
盒子模型案例
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型案例</title>
<style type="text/css">
div{
height: 300px;
width: 300px;
margin-left: 20px;
}
#header,#tail{
width: 700px;
margin: auto;
margin-top: 50px;
}
#div01{
border: solid 1px orange;
float: left;
}
#div02{
border: solid 1px blue;
float: left;
}
#div03{
border: solid 1px red;
float: left;
}
#div04{
border: solid 1px purple;
float: left;
}
</style>
</head>
<body>
<div id="header">
<div id="div01">
我是div01
</div>
<div id="div02">
我是div02
</div>
</div>
<div id="tail">
<div id="div03">
我是div03
</div>
<div id="div04">
我是div04
</div>
</div>
</body>
</html>
实现结果: