文档介绍：CSS层叠样式表
CSS内容介绍
CSS概述
CSS设置方式
CSS语法
样式规则注释和样式规则优先级
CSS的属性分类介绍
CSS概述
CSS概念
CSS是Cascading Style Sheets 的缩写,中文的意思是层叠样式表或级联样式表。
CSS功能简介
CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。使用CSS能够简化网页的格式代码,加快下载显示的速度,外部链接样式可以同时定义多个页面,大大减少了重复劳动的工作量。
CSS设置方式
设置方式
举例
特点
内联样式
<body>
<h1 style="font-family:宋体;font-size:12pt;color:blue">在这里使用了H1标记</h1>
</body>
灵活,简单方便。
嵌入样式
<head>
<style type="text/css">
h1 {font-family:宋体;font-size:12pt;color:blue}
</style>
</head>
<body>
<h1>在这里使用了H1标记</h1>
</body>
一个样式可以在一个页面多次应用。
外部样式
<head>
<link rel="stylesheet" href="" type="text/css">
</head>
<body><h1>在这里使用了H1标记</h1></body>
h1 {font-family:宋体;font-size:12pt;color:blue}
需要有一个外部的样式表文件(.css),可以为多个网页所共同引用,即减少代码,又可以做到统一页面风格。
CSS语句格式
css语句格式如下:
selector {property: value} (选择符{属性:值})
选择符的作用:限制样式作用的范围
p {font-size:15}
当属性的值是多个单词组成时,必须在值上加引号
h1 {font-family: "Courier New"}
如果需要对一个选择符指定多个属性时,使用分号隔开。
p {font-size:15;color:red}
选择符主要包括:
html选择符
class选择符
id选择符
html选择符
html选择符:就是以html标签作为选择符的情况。
其作用域为所有符合条件的html标签
h1 {text-align: center; color: red}
p {font-size:15;color:red}
class选择符
class选择符:使用html标签的class属性设置值的选择符就是class选择符。
{color:red}
{color:yellow}
{color:green}
关联class selector:可以为同一个元素(html标签)定义不同的样式。
独立class selector:可以为多个不同的元素(html标签)定义相同的样式
<p class="stop">这是stop的样式</p>
<p class="warning">这是warning的样式</p>
<p class="normal">这是normal的样式</p>
演示效果
<p class="title">蓝色的段落</p>
<h1 class="title">蓝色的标题</h1>
<style type="text/css">
.title{text-align:center;color:blue}
</style>
演示效果
ID选择符
ID属性用来定义某一特定html标签,一个网页文件只能有一个标签使用某一ID属性值,ID Selector就是用来设置这样具有ID属性html标签的样式。
经验总结:因为ID selector只能为单个的html标签设置样式,因此具有一定的局限性。
ID属性在JavaScript得到广泛的应用。
<style type="text/css">
#title{text-align:center;color:blue}
</style>
<div id="title">
e to neusoft</div>
包含选择符
包含选择符:是指用空格隔开的两个或多个单一选择符组成的字符串
使用:主要用来对某些具有包含关系的元素来单独定义样式,比如元素1里包含元素2,使用包含选择符定义的样式就只能对在元素1里的元素2起作用,而对单独的元素1和元素2不起作用。
div p{color:red;font-size:12;}
<html>
<head>
<style type="text/c