推荐直接去网络上查所需要的样式,样式名和值有非常多
此处推荐:CSS 教程
1,什么是CSS,有什么作用。
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
*:也称级联样式表。
CSS 节省了大量工作!
样式定义通常保存在外部 .css 文件中。
通过使用外部样式表文件,您只需更改一个文件即可更改整个网站的外观!
CSS的作用是:
修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。
CSS好比是HTML的化妆品。
HTML还是主主体,CSS依赖HTML。CSS的存在就是修饰HTML。
所以新建的文件还是xx.html。
2,在HTML页面中嵌入CSS的三种方式。
第一种方式: 内联定义:
内联定义即是在对象的标记内使用对象的style属性来设置CSS样式:
<标签 style="样式名:样式值; 样式名:样式值;......">
</标签>
定义了两个样式:
<p style="margin-left:0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p>
第二种方式:样式块方式:
在head标签中使用style块,
语法格式:
<head>
<style type="text/css">
选择器{
样式名:样式值;
样式名:样式值;
......
}
选择器{
样式名:样式值;
样式名:样式值;
......
}
......
<style>
</head>
第三种方式:链入外部样式表文件
这种方式最常用
(将样式写到一个独立的xxx.css文件中,在xxx.css文件中样式定义的方法一般是第二种方式
在需要的网页上直接引入css文件,样式就直接引入了)
语法格式:
<head>
<link type="text/css" rel="stylesheet" href="css的文件路径" />
</head>
这种方式的有点是:易维护,维护成本低。
标签选择器:
使用HTML的标签名,来选择特定的元素,范围很大,但是不灵活
语法格式:
标签名{
样式名:样式值;
样式名:样式值;
......
}
CSS id 选择器:
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!
要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id
语法格式:
#id{
样式名:样式值;
......
}
CSS 类选择器
每个元素都有一个class属性
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
语法格式 :
.类名{
样式名:样式值;
......
}
可以跨不同标签
代码实例:
CSS嵌入HTML的第一种方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS嵌入的第一种方式:内联定义方式</title>
</head>
<body>
<!--
width:宽度样式
height:高度样式
background-color:背景色样式
display:布局样式
none:将对象隐藏
block :将对象强制作为对象呈现,为对象之后添加新行
-->
<!--
样式还能这样写:
border:1px solid black;
-->
<div style="width:300px; height:300px;
background-color:red; display:block;
border-style:solid; border-width:1px;">
</div>
</body>
</html>
CSS嵌入HTML的第二种方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML引入CSS样式的第二种方式</title>
<style type="text/css">
#username{
color:red;
}
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
.myclass{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 设置字体为红色 -->
<span id="username">对不起,用户不能为空 </span>
<div></div>
<div></div>
<div></div>
<!-- class相同的可以认为是同一类标签 -->
<input type="text" class="myclass"/>
<select class="myclass">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
CSS嵌入HTML的第三种方式:
1,创建一个xxx.css文件。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS嵌入HTML的第三种方式</title>
<!-- 引入外部CSS文件 -->
<link type="text/css" rel="stylesheet" href="/S/index.css">
</head>
<body>
<div>
<h3>H3标签</h3>
</div>
</body>
</html>