CSS(层叠样式表)

2017-02-28 本文已影响58人阿凡提说AI

CSS 的语法

1.基本语法规则
CSS 的语法规则比较简单,由 3 部分组成:选择器、属性和值,写法如下:

selector {property: value}

其中选择器规定了样式的影响范围,属性是希望更改的外观项目,值为该项目可以选择的值,如样式 body { color : red }的含义是将 body 元素中的文本颜色变为红色。
样式的属性和值都放在一对花括号内,如果有多对属性和值,中间用英文分号分隔。 CSS 对属性和值的大小写不敏感,CSS 中的注释为“/注释内容/”格式。
2.样式的引用方式
有多种方式将样式定义引入至 HTML 页面中,最常见的做法是将所有的样式保存在扩展名为.css 的文件中,然后在<head>元素中通过<link>元素引入,这样可以让多个 HTML 页面引用同一个 CSS 样式,如下面代码所示:

<link rel="stylesheet"type="text/css" href="样式文件地址" >

也可以在<style>元素中通过@import 指令引用 CSS 文件,但部分浏览器不支持这种写法:

<style>
@import : url('样式文件地址')
</style>

如果样式规则不需要被多个页面重用,也可以直接写在<style>元素中,称之为页面内样式,如下所示:

<style>
    body { color : red }
</style>

如果样式规则只对某元素生效,也可以将样式规则写在该元素的 style 属性中,称之为内联样式。大量使用内联样式会混淆 CSS 代码与 HTML 代码,并不推荐,如下所示:

<p style="font-size : 14pt; color : red">红色的文本</p>

如果多种样式之间存在冲突,其优先级是:内联样式→页面内样式→@import 引入的样式→<link>引入的样式。
3.选择器分类
按照影响的范围不同,CSS 选择器可以划分为以下几种。

HTML 选择器:HTML 选择器的名称为 HTML 的元素名,会影响页面中所有的同名元素(不区分大小写)。如希望页面中所有的段落文本为红色,可以定义p { color : red }样式。
类选择器:类选择器的名称以符号“.”开头,会影响页面中所有 class 属性值相同的元素。
ID 选择器:ID 选择器的名称以符号“#”开头,会影响页面中 id 属性值相同的元素 (区分大小写,且 id 属性值应该是唯一的)。
HTML + 类选择器:HTML + 类选择器的名称格式为“元素名.类选择器名”,如选择器“p.header”的影响范围为所有的<p class="header">元素,而不是所有的<p> 元素或 class 属性值为 header 的元素。
上下文选择器:上下文选择器指多个选择器之间用空格分隔,用于根据上下文元素准确地描述影响范围,比如上下文选择器“li span”的影响范围是出现在<li>元素中的<span>元素,而不是所有的<span>元素。
组选择器:如果页面多处希望采用相同的样式规则,可以定义组选择器,即多个选择器之间用英文逗号分隔,这些选择器均会使用同一样式。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS 选择器</title>
<style>
p { color : red }
p.c1 {
    font-size:1.5em
}
p.c2 {
    font-size:0.5em
}
#special {
    font-style:italic
}
ul li p {
    text-decoration:underline
}
</style>
</head>
<body>
<p class="c1">应用类选择器c1选择器的段落</p> 
<p class="c2">应用类选择器c2选择器的段落</p> 
<p>普通段落</p>
<p id="special">id属性为special的段落</p>
<ul>
      <li><p>列表段落</p></li>
      <li class="c2"><p>列表段落</p></li>
</ul>
</body>
</html>

伪类:伪类是一系列特殊的选择器,可用来描述超链接的不同状态,常见的伪类如下。
 a:link:用于修饰尚未单击过的超链接。
 a:visited:用于修饰单击过的超链接。
 a:hover:用于修饰鼠标置于其上的超链接。
 a:active:用于修饰鼠标获取焦点的超链接。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>伪类</title>
<style>
a:link {
   text-decoration:none; /*不加下画线*/ 
}
a:visited {
    text-decoration:line-through; /*添加删除线*/ 
}
a:hover {
    font-size:1.5em;
}
a:active {
    color:red; 
}
</style>
</head>
<body>
/*字体放大 1.5 倍*/
<a href="01_x.html">普通超链接</a>
<a href="01_2.html">浏览过的超链接</a> 
<a href="01_3.html">鼠标移上的超链接</a>
</body>
</html>

4.选择器的命名规则
选择器的命名规则如下:

不要包含特殊符号,如+、-、'、"、/、*、\等。
HTML 选择器命名和 HTML 标签名称一样,最好全部使用小写字母。
类选择器命名采用英文单词组合的方法,单词首字母小写;使用功能而不是外观来描述,比如要显示学生的姓名,采用红色字体,选择器应该叫“.studentName”,而不是”.redFont”。
无论采用什么命名风格,都需要坚持到底,不能在一个样式文件中存在多种命名风格。
5.样式的继承
理论上讲,嵌套在父元素内的子元素会继承父元素的样式,如存在样式 body {color: red },则<body>元素内的所有子元素中的文本均应显示为红色,但各种浏览器对样式的继承支持并不一致,为了令代码在各种浏览器下均能正常显示,适当定义一些冗余规则是必要的。如下例所示,对 body 指定的样式并未被 input 元素继承:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS 选择器</title>
<style>
body {
    color : red 
}
</style>
</head>
<body>
<p>普通段落</p>
<input type="button" value="普通按钮"/> 
<table>
  <tbody>
        <tr>
              <td>普通单元格</td>
        </tr>
    </tbody>
</table>
</body>
</html>

利用组选择器,将样式改为 body,input { color : red }可以解决此问题。

常用 CSS 属性介绍

1.字体属性

屏幕快照 2017-02-28 下午1.37.12.png

屏幕快照 2017-02-28 下午1.38.07.png

2.背景属性

屏幕快照 2017-02-28 下午1.41.15.png

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>背景</title>
<style>
body {
    background-image: url(02_5.png);
    background-repeat: no-repeat;
    background-position: right top;
}
.bg {
    background-image: url(05_4.png);
}
</style>
</head>
<body>
<table width="400" border="1" class="bg">
    <caption>
            背景重复的表格
    </caption>
    <tbody>
        <tr>
            <td>aaaa</td><td>bbbb</td><td>cccc</td> 
        </tr>
        <tr>  
            <td>aaaa</td><td>bbbb</td><td>cccc</td> 
        </tr>
        <tr>
            <td>aaaa</td><td>bbbb</td><td>cccc</td>
        </tr>
      </tbody>
</table>
</body>
</html>

3.区块属性

屏幕快照 2017-02-28 下午1.48.11.png
下例演示了使用 vertical-align 属性代替_{、^{标签实现脚注、尾注的效果:

例 05_5.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>区块</title>
<style>
p.exp {
text-indent:50px;
font-size:2.0em;
}
p.header {
text-align:center;
}
p.power {
vertical-align:super;
font-size:0.5em;
}
p.foot {
vertical-align:sub;
font-size:0.5em;
}
</style>
</head>
<body>
<p class="header">区块属性演示</p>
<p class="exp">X<span class="power">2</span> + Y<span class="foot">3</span>= 32</p>
</body>
</html>

4.方框属性

浏览器通过 BOX 模型(盒子模型)来确定元素中间距、边框、边距等的位置,其中边框称为 border,边距(边框与周围元素的距离)称为 margin,间距(边框与元素内部内容的距离)称为 padding,如图 5-12 所示。

屏幕快照 2017-02-28 下午1.58.51.png

图 5-13 所示为 IE 8 中的盒子模型。

屏幕快照 2017-02-28 下午1.59.51.png

屏幕快照 2017-02-28 下午2.02.17.png

屏幕快照 2017-02-28 下午2.03.39.png

下例演示了使用 float 等属性进行排版的效果:

例 05_6.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>方框</title>
<style>
p.first {
font-size:13px;
text-indent:2em; /*缩进 2 个字的距离*/
padding-left:50px;
padding-right:50px;
}
p.first img {
float : left;
width:64px;
}
p.second {
font-size:13px;

padding-left:50px;
padding-right:50px;
}
p.second span {
float:left;
font-size:3.0em;
}
hr {margin:25px; }
</style>
</head>
<body>
<p class="first">![](02_5.png)文字紧密围绕在msn水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。文字紧密围绕在 msn 水晶小人的周围。</p>
<hr/>
<p class="second"><span>今</span>日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的,今日最重要的新闻是这样的。
</body>
</html>

5.边框属性

大部分可见的 HTML 元素都可以拥有边框,CSS 可以对上、下、左、右 4 个方向的边框样式进行修饰,

屏幕快照 2017-02-28 下午2.19.54.png

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>边框</title>
<style>
table {
border-collapse:collapse;
border : solid 1px black;
}
caption {
font-size:2em;
font-weight:bold;
}
th {background-color:#aaa; }
td,th {
border : solid 1px black;
padding : 5px;
}
</style>
</head>
<body>
<table width="400" border="1">
<caption>
标准的细线表格
</caption>
<thead>
<tr>
<th>AAA</th><th>BBB</th><th>CCC</th>
</tr>
</thead>
<tbody>
<tr><td>aaa</td><td>bbb</td><td>ccc</td> </tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td> </tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td> </tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
</tbody>
</table>
</body>
</html>

6.列表属性

顾名思义,列表相关的属性专门用于修饰无序列表<ul>与有序列表<ol>

屏幕快照 2017-02-28 下午2.28.18.png

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>列表</title>
<style>
ul {
list-style-image:url(05_8.gif);
}
</style>
</head>
<body>
<ul>
<li>最新的新闻</li>
<li>最新的新闻</li>
<li>最新的新闻</li>
</ul>
</body>
</html>

7.定位属性

HTML 元素的位置与显示方式均由定位属性决定。默认情况下,HTML 元素采用自左向右、从上到下的布局显示方法,元素会根据内容自动决定元素大小

屏幕快照 2017-02-28 下午2.37.57.png

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>定位</title>
<style>
#d1 {
position:absolute;
left:50px;
top:50px;
width:300px;
height:300px;
background-color:#eee;
}
#d2 {
position:absolute;
right:0px;
bottom:0px;
width:200px;
height:200px;
background-color:#aaa;
}
#d3 {
position:absolute;
right:0px;
bottom:0px;
width:100px;
height:100px;
z-index:10;
overflow:auto
}
</style>
</head>
<body>
<div id="d1">
<div id="d3">![](02_11 (4).jpg)</div>
<div id="d2"></div>
</div>
</body>
</html>

8.扩展属性

屏幕快照 2017-02-28 下午2.46.57.png}}

CSS(层叠样式表)

CSS 的语法

常用 CSS 属性介绍

猜你喜欢

热点阅读