一、CSS介紹
1、CSS是指层叠样式表(Cascading Style Sheets)。一般情况下,样式通常存储在样式表中,而外部样式通常存储在CSS文件中,并且多个样式定义可层叠为一。
2、CSS可以解决以下几个问题:
(1)定义如何显示HTML元素;
(2)解决内容与表现分离的问题;
(3)提高工作效率。
二、CSS的基本语法
CSS的构成
CSS主要是由选择器,以及一条或者多条声明构成。
即:选择器{ 声明1,声明2,...,声明N } (其中选择器通常是需要改变样式的HTML元素,声明是由属性和值构成,中间用冒号隔开)
例如:h1 {color:red; font-size:14px;} 或 h1{
color:red;
font-size:14px;
}
注意:(1)若值为多个单词,则要给值添加双引号;
(2)css对大小写不敏感,为了容易编译,通常会在“:”和值之间加入空格,因为空格不会影响css实现效果;
三、CSS选择器
CSS选择器大致可以分为:派生选择器、id选择器、类选择器、属性选择器。
1、派生选择器
通过依据元素在其上下文之间的位置关系来定义样式。
比如有一段html代码:
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
我希望将代码中的<li><strong>标签之间的代码,变为斜体字,可以这样定义:
li strong{
font-style:italic;//字体样式:斜体字
font-weight:normal;字体的粗细:正常
}
2、id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式,以“#”号来定义。
例如下面的html代码:
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
将id=“red”的p元素改为红色,将id="green"的p元素改为绿色
#red {
color:red;
}
#green {
color:green;
}
id选择器也可以和派生选择器一起使用,例如:
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
注意:id属性只能在每个html中出现一次
3、类选择器
在CSS中,类选择器以一个点号显示
例如下面的html代码:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
定义类选择器:
.center {
text-align:center;
}
类选择器也可以被用做派生选择器,例如:
.fancy td {
color: #f60;
background: #666;
}
4、属性选择器
对带有指定属性的html元素设置样式。
例如对下面的html代码:
<h1>可以应用样式:</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
设置样式:
[title]
{
color:red;
}
还可以扩展为属性和值选择器等,如
[title=w3school]
{
color:red;
}
四、CSS的引用
引用样式表的方法有三种:内部样式表、外部样式表、内联样式
1、内部样式表
<head>
<style type="text/css">
//css代码段
</style>
</head>
2、外部样式表
<head>
<link rel="stylesheet" type="text/css" href="xxx.css"/>
</head>
其中:rel表示当前文档和被链接文档之间的关系,href指定被连接文档的地址,格式为“.css”
3、内联样式表(一般不使用)
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
如此,将样式写在标签里
注意:html文档中,内部样式表和外部样式表同时存在的话,会以内部样式表为主,外部样式表为辅。
五、CSS样式
CSS样式分为:背景、文本、字体、链接、列表、表格、轮廓
六、CSS框模型(盒子模型)
分为:内边距、外边距、边框、外边距合并
七、CSS定位
分为:相对定位、绝对定位、浮动