目录
什么是CSS
CSS全称Cascading Style Sheet,层叠样式表。CSS主要被用来修改HTML的显示样式,让HTML元素看起来更加美观。HTML主要关注网页的内容,而CSS主要关注元素的样式。
CSS类型
按照CSS的作用域,CSS可以分为:
- 行内样式
- 内部样式
- 外部样式
具体三种样式的使用规则可以看这篇文章:
【前端学习之路】在HTML中链接css样式的三种方法
他们对HTML元素影响的优先级为:行内样式>内部样式>外部样式
CSS语法
一个样式由三部分构成:选择器(selector),属性(property)和值(value)。
选择器(selector):选择定义样式的HTML元素
属性(property):希望改变的属性
值(value):给每个属性指定一个值,属性和值被冒号分开,并由花括号包围。
例子:
body {
color: #000000;
background: #ffffff;
margin: 0;
padding: 0;
font-family: serif;
}
选择器
标签选择器
标签选择器以标签为选择器,定义的样式影响HTML文档中所有相同标签。
语法结构:标签{}
例如:将所有h1标签的都变成红色。
<!--样式定义-->
<style type="text/css">
h1{
color:red
}
</style>
<!--在HTML中使用-->
<h1>h1标题</h1>
类选择器
类选择器以一个点号显示,用来定义一类元素的样式。
语法结构:.元素class属性值{}
例如:使用类选择器选中元素并修改文字元素对齐方式
<!--样式定义-->
<style type="text/css">
.center {text-align: center}
</style>
<!--在HTML中使用-->
<h1 class="center">
This heading will be center-aligned.
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
id选择器
id选择器可以为特有id的HTML水元素指定特定的样式。
语法结构:#元素特定id值{}
例子:使用id选定元素并修改其颜色
<!--样式定义-->
<style type="text/css">
#red {color:red;}
#green {color:green;}
</style>
<!--在HTML中使用-->
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
派生选择器
通过元素的上下文关系来定义样式,使标记更加简洁,选择器之间用空格分开。
语法结构:选择器1 选择器2 … 选择器3{}
例子:你希望table中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:
<style type="text/css">
table strong {
font-style: italic;
font-weight: normal;
}
</style>
分组选择器
对选择器进行分组,被分组的选择器就可以分享相同的声明,用逗号将需要分组的选择器分开。
语法结构:选择器[,选择器] {}
例:
h1,.green,#green{
color:green;
}
其中h1
, .green
, #green
三个选择器共用一个样式声明。
CSS框模型
在CSS的概念中,一切皆为框(盒)。
框模型 (Box Model) 规定元素框处理元素内容、内边距、边框和外边距的方式。
- element : 元素。
- border : 边框
- padding : 内边距,或者填充。
- margin : 外边距,空白或空白边。
例子:
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。
如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素:
#mybox {
width: 70px;
padding: 5px;
margin: 10px;
}
HTML元素显示方式
按照元素框的显示方式,可以分为
- 块元素:一个框独占一行,一行最多一个框
- 行内元素:多个行内元素可以共享一行
- 可变元素:由元素的父元素决定是块元素还是行内元素
块元素
块级元素生成一个元素框,(默认地)会填充其父级元素的内容,旁边不能有其他元素,在元素框之前和之后生成“分隔”符。一般是其他元素的容器元素,例如div。
块元素特点:
- 总是在新行上开始
- 高度,行高以及顶和底边距都可控制;
- 缺省宽度是它的容器(上级元素)的100%,除非设定一个宽度。
常见块元素:
<h1>:标题
<p>:段落
<div>:层
<form>:表单
行内元素
也叫内联元素,内联元素在当前行内生成元素框,而不会打断这行,行内元素不会在它本身之前或之后生成“分隔符”,行内元素只能容纳文本或者其他行内元素。
行内元素特点:
- 和其他行内元素都在一行上
- 高,行高及顶和底边距不可改变
- 宽度就是它的文字或图片的宽度,不可改变。
常见行内元素:
<a>:超链接;
<font>:字体
<image>:图片
<textarea>:多行文本输入框
<input>:输入框
<select>:选择输入框
<br>:换行
可变元素
可变元素:为根据上下文语境决定该元素为块元素或者内联元素。
常见的可变元素:
<applet>:Java Applet
<button>:按钮
使用display属性改变元素的框模型
display 属性设置为 inline:行内元素
display 属性设置为 block:块元素
display属性设置为 none :让生成的元素根本没有框,这样的话,该框及其所有内容就不再显示。
例子:修改Display
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<script src="js/jquery-1.9.1.min.js" type="text/javascript">
</script>
<script type="text/javascript" >
function changeDisplay() {
//1-获得用户新的显示选择
var newDisplay = $("#selectDisplay").val();
//2-设置元素样式的display属性
$("#head1").css({"display" : newDisplay});
$("#head2").css({"display" : newDisplay});
}
</script>
</head>
<body>
<h1 id="head1">我是标题1</h1>
<h1 id="head2">我是标题2</h1>
<select id="selectDisplay" onchange="changeDisplay();">
<option selected>block</option>
<option>inline</option>
<option>none</option>
</select>
</body>
</html>
选择不同的display属性,动态改变h1标签的display状态。
HTML元素定位
坐标系统:可以将任何元素(框模型)放置在坐标系统(浏览器)的任何位置上。
距离:使用像素(px)或者百分比(%)
CSS定位方式
普通流定位
绝对定位
绝对定位的元素位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块
绝对定位使元素的位置与文档流无关,不占据空间。
要对元素进行绝对定位,应将position属性的值设为absolute。接着,你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。
相对定位
采用相对定位的元素,其位置是相对于它在文档中的原始位置(流定位模型)计算而来的。这意味着,相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。
采用相对定位的元素会获得相应的空间,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
元素定位属性
其中使用z-index属性可以将内容显示在不同层,形成堆叠顺序。