您的位置：首页 > Web前端 > CSS

CSS_层叠样式表基础教程

2015-03-23 11:56 288 查看
　　层叠样式表（Cascading Style Sheets，简写CSS），网页可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的结构和内容（用HTML或其他相关的语言写的）与文件的显示样式（CSS）分隔开来。比如HTML中H2标志这一个二级标题，它在级别上比一级标题H1低，比三级标题H3高，这个就是结构上的信息。　　　　HTML文件中的每一个class或id都可以有自己的显示特征，而且每一个没有id特性的HTML结构也可以有自己的显示特征。这些结构有的是HTML自己需要的，有的是专门为CSS设置的。　　　　使用CSS的优点有：　　1.一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便；　　2.不同的读者可以有不同的样式，比如有的读者需要字体比较大；　　3.HTML文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息。　　　　CSS信息可以来自：　　1.作者样式　　①作者可以在HTML文档<head>标签中使用<link>标签调用独立的外部样式表（CSS文件）　　②作者可以将CSS信息内嵌在HTML页面内（元素直接使用style属性）　　③作者可以在HTML文档<head>标签中定义嵌入式样式表　　④作者可以直接在HTML页面内定义+调用样式表　　2.读者样式　　⑤读者可以在其浏览器内设立一个地区性的CSS文件。这个CSS文件可以用在所有的HTML文件上　　3.浏览器的样式　　⑥假如外部没有特别指定一个样式的话，一般浏览器自己有一个内在的样式。　　　　其优先级为：　　内嵌样式（在HTML元素内部）>　　内部调用样式（在HTML元素周围）>　　内部嵌入样式表（位于<head>标签内部）>　　外部样式表>（<link>调用调用外部样式表）　　区域性CSS文件>　　浏览器缺省设置　　　　一、CSS规则由两个主要的部分构成：选择器，以及一条或多条声明（属性+值），也就是调用+定义。　　　　1.元素选择器，文档的元素就是最基本的选择器。　　---------　　<H2><font color="red" bgcolor="white"><i>使用CSS</i></font></H2>　　　　上面的例子可以变成这样：H2是选择器，color和background是属性，red和white是值（如果值为多个单词，则要加引号）。　　　　<H2>使用CSS</H2>　　H2 { color: red; background: white; }　　---------　　2.ID选择器，id选择器以"#"来定义。　　#red {color:red;}　　<p id="red">这个段落是红色。</p>　　--------　　3.类选择器，类选择器以一个点号显示（类名的第一个字符不能使用数字）。　　.center {text-align: center}　　<h1 class="center">　　 This heading will be center-aligned　　</h1>　　4.属性选择器，对带有指定属性的HTML元素设置样式。　　下面的例子为带有title属性的所有元素设置样式：　　[title]　　{　　color:red;　　}　　5.DIV+CSS　　div+css是一种常见的网页布局方法。div是用来排版的，而css是用来定义div的样式。div+css通常采用外链的方式来调用层叠样式表文件（style.css），用id和class来标识区分网页中不同结构的特征。　　　　二、行内样式表　　除在HTML内直接「定义+调用」之外（如上1.2.3.4.），也可于HTML内直接使用style属性。　　用style属性设置颜色、字体和尺寸如下：　　<html>　　<body>　　<h1 style = "font-family:verdana">文章标题</h1>　　<p style = "font-family:arial;color:red;font-size:20px;">文字内容</p>　　<div style="color:red; background:yellow; font-weight:bold;">　　这个段落会被显示为黄底红字粗体。　　</div>　　</body>　　</html>　　　　1.网页设计中常用的CSS属性　　文字或元素的颜色：color　　字体：font-family　　文字大小：font-size　　段落首行缩进：text-indent（如「p {text-indent: 5em;}」）　　文本对齐方式：text-align（如「text-align:center」）　　背景颜色：background-color　　背景图像：background-image　　列表样式：list　　鼠标样式：cursor　　边框样式：border　　内补白：padding　　外边距：margin　　　　2.缩写规则　　①颜色缩写：16进制的色彩值，如果每两位的值相同，可以进行缩写，例如：　　000000可以缩写为#000，#336699可以缩写为#369;　　②边框缩写　　边框的属性如下：　　border-width: 1px;　　border-style: solid;　　border-color: #000;　　可以缩写为一句：border: 1px solid #000;　　③背景缩写　　background-color: #F00;　　background-image: url(background.gif);　　background-repeat: no-repeat;　　background-attachment: fixed;　　background-position: 0 0;　　可以缩写为一句：background: #F00 url(background.gif) no-repeat fixed 0 0;　　④合并相同属性的元素　　所有的标题元素都是绿色的，可以这样缩写：　　h1,h2,h3,h4,h5,h6 {　　 color: green;　　 }　　　　三、使用<head>植入样式表　　还可以使用<style>...</style>标记在HTML文档中定义嵌入式样式表，该标记必须放在<head>与</head>标记之间。　　<html>　　<head>　　<style type="text/css">　　 h1 {color:red}　　 p {color:blue}　　</style>　　</head>　　　　<body>　　<h1>Header-1</h1>　　<p>This is a paragraph.</p>　　</body>　　</html>　　　　四、使用 <link> 标签链接调用外部样式表　　HTML和CSS将网页文件的结构、内容与显示样式分隔开来，这里正是样式表功能发挥优势的地方。　　<head>　　<link rel="stylesheet" type="text/css" href="mystyle.css" />　　</head>　　　　DIV+CSS　　div+css是一种常见的网页布局方法。div是用来排版的，而css是用来定义div的样式。div+css通常采用外链的方式来调用层叠样式表文件（style.css），用id和class来标识区分网页中不同结构的特征。　　随着HTML5的到来，无处不在的<div id="header">和<div id="footer">传统代码方法，将变成标签<Header>和<footer>。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航