开始学习CSS
最简单的html和css结构:
<html>
<head>
<title> </title>
<style type="text/css">
……
</style>
</head>
<body>
……
</body>
</html>
每个属性声明以一个分号结束!
h1, h2 { # 这里的h1,h2叫选择符,这里可以放多个选择符
color: gray; #这个样式适用选择符选择的元素
}
链接到外部样式表
创建一个css文件: test.css
内容(不需要<style>
和</style>
标记):
h1, h2 {
color: gray;
}
在html中链接到外部样式表
<link type="text/css" rel="stylesheet" href="../test.css" />
css的继承
指我们设置上级(父级)的css样式,上级(父级)及以下的子级(下级)都具有此属性。 一般只有文字文本具有继续特性,如文字大小、文字加粗、文字颜色、字体等。
继承的覆盖
在css里,被应用的规则总是最具体的。因为,如果
元素有一个规则,元素也有一个更具体的规则,那浏览器一般会执行更具体的规则。css的注释
/*文字*/ #这个可以进行段注释
元素类:
把把元素添加到一个类中,只需添加一个类名的(如test)的class属性。
<p class="test">
创建类的选择符:
p.test {
color: green;
}
.test { #用一个点后接一个类名,这个规则将会适用于该类内的所有成员。
color: green;
}
一个元素可以加入多个类
<p class="test1 test2 test3">
#每个类名之间用空格隔开,类名顺序无所谓
关于样式的应用:
- 如果没有选择符与元素匹配,刚依赖继承
- 如果没有可继承的元素,刚使用浏览器给的默认值。
- 如果多个选择符匹配了一个元素的同一属性(比如颜色),刚配置最具体的那个选择符,如果有多个选择符一样具体,刚匹配最后一个规则。
字体和颜色样式
-
font-family 定义网页中的字体,可定义多种,如果前一种系统中,没有则使用下一种显示
-
font-size 控制字体大小
定义方法:px,em,百分数和关键字
font-size: 14px; #字体大小14像素 ,尽量不要用这种方式,定义字体
font-size: 1.2em; #字体大小为父元素字体的1.2倍
font-size: 150%; #字体大小为父元素的150%
font-size: small; #small一般为12像素,其余的值有: xx-small、x-small、small、medium、large、x-large、xx-large;每种字体都比前一种大20% -
color 给文本添加颜色
color 是字体颜色
backgroud-color 是背景颜色
可以用颜色名直接定义,也可以使用十六进制定义 。
backgroud-color: red;
backgroud-color: rgb(80%, 40%, 0%);
backgroud-color: rgb(204, 102, 0);
backgroud-color: #cc6600; -
font-weight 设置字体的粗细 #可以设置为 lighter(较细)、normal(正常)、bold(粗)、bolder(更粗)
-
font-style 给字体添加样式
italic 斜体, -
text-decoration 给文本添加更多样式 #可设置: none、underline、overline、line-through、blink(闪动)
盒模式
- line-height 行间距,这个也是可以继承的,在body设置后,页面所有元素都会改变
比如line-height: 1.6em;
#字体的1.6倍
css把每个单一的元素看作一个盒子
-
内容区:图片或一些文字
-
补白: 盒子的内容和边框之间,补白是透明的,本身没有颜色或修饰
-
边框: 元素周围可以有边框,是可选的边框包围着补白,边框可以有各种宽度、颜色和样式
-
边界: 包围着边框,如果两个盒子相邻,边界就相当于它们之间的空间。和补白一样,边界也是透明的,本身没有颜色或修饰
-
border-color 设置边框颜色
-
border-width 设置边框宽度
-
border-style 设置边框样式
可能的值
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |
-
background-color 设置元素的背景颜色
-
padding 设置补白的像素大小或边框里面部分的百分之几
比如: padding: 25px; 内容的四周为25像素的补白
padding:10px 5px 15px 20px; 上:10px,右:2px,下:15px, 左:20px(顺时针方向)
padding:10px 2px 15px; 上:10px,右左:5px, 下:15px
padding:10px 5px; 上下:10px, 右左:5px
百分比的话:规定基于父元素的宽度的百分比的内边距
还有
padding-left 左补距离
padding-right 右补距离
padding-top 头顶补距离
padding-bottom 底补距离
- margin 设置外边距,即边界(两个盒子之间的距离)
这个用法和padding一样,可以参考padding - background-image 设置背景图片
background-image: url(images/backgroud.gif); - background-repeat 设置是否及如何重复背景图像
值: repeat 默认。背景图在垂直和水平方向重复 repeat-x 水平方向重复 repeat-y 垂重方向重复 no-repeat 图像只显示一次
-
background-position 设置背景图像的起始位置
值 top left #如果仅规定一个关键词,第二个值默认为center,如果不规定,默认为0%, 0% top center top right center left center center center right bottom left bottom center bottom right x% y% 左上角为0% %;如果只规定了一个,另一个默认为50%; xpx ypx 左上角为0 0 ;只规定了一个,另一个默认也为50%
定义边框的一侧
border-top-color 上边框的颜色
border-top-style 上边框的样式
border-top-width 上边框的带度
top可以替换为:right,left, bottom
样式的id
id 具有唯一性, (开头不能为数字)
id的使用:
<p id="footer">this is a test!</p>
在css中规定为id属性方法:
#footer
或 p#footer
如果给多个id相同属性的话,id之间用逗号隔开
#a, #b, #c {
color: red;
}
使用多样式表
<link type="text/css" rel="stylesheet" href="lounge1.css" />
<link type="text/css" rel="stylesheet" href="lounge2.css" />
<link type="text/css" rel="stylesheet" href="lounge3.css" />
样式表的顺序很重要,最下面的优先最高,一个样式表会覆盖在它之前链接的样式表中的样式、
div
就像一个容器,可以把元素一起放进去,div仅仅是结构,没有任何“外观”左默认样式
<div id="test">
</div>
样式:
- width 设置元素的宽度;这个宽度只是内容区的宽度,height也是一样
- height 设置元素的高度
- text-align 在块元素中text-lign来设置其中文本(包括图片)的对齐方式
可为center,left,right
justify 这个是文字两端对齐
选中div中的特定元素
div h2 { #表示所有的div
color: black;
}
或
#elixirs h2 { #id为elixirs的div
color: black;
}
也可以
#elixirs blockqoute h2{ #表示id为"elixirs"的元素的子孙<blockqoute>的子孙<h2>元素
color: bulue;
}
css属性的合并
background-color: white;
background-image: url(cock.gif);
background-repeat: repeat-x;
合并为:
background: white url(cock.gif) repeat-x (顺序无所谓)
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
合并为:
font: small/1.6em Verdana, Helvetica, Arial, sans-serif;
span 创建一组内联字符和元素
<span class="cd">buddha bar</span>, <span class="artist">claude challe</span>
css中添加样式
.cd {
font-style: italic;
}
.artist {
font-weight: bold;
}
<a>
元素和它的几个特征
a:link { #未被访问的链接
color: green;
}
a:visited { #已被访问的链接
color: red;
}
a:hover { #鼠标停留在上面的链接
color: yellow;
}
还有两个状态为 focus(聚焦,即tab键选中的时候,);active(用户第一次点击一个链接)
这两个状态一般不用,有些浏览器不能很好的支持
伪类
像<a>
元素的link、visited 就是伪类
层叠
css流
块元素从上往下读,默认占据浏览器窗口的整个宽度
内联元素从左往右读
两个内联元素的边界是两个元素的边界之和
两个块元素的边界是取较大元素的边界
漂移元素
漂移元素必须设置一个明确的宽度值,不能是默认的
float:left # 让一个元素靠左或靠右
float: right
clear: right #右边不能有漂移元素,如果则把这一段往后移
clear:both
漂移元素的边界不会和块元素的边界重叠,
流动和冻结设计
冻结:内容的宽度是固定的
流动:由浏览器决定宽度,用auto来默认显示
凝胶物布局:
内容区的宽度是固定的,但边界随着浏览窗口变大或缩小
绝对布局
用属性 position 来告诉浏览器使用绝对布置
position:absolute #绝对布局
position:static #默认的,浏览器决定哪个元素放哪
position:fixed #相对于浏览器边缘的绝对位置
绝对布局用z-index属性互相层叠放置,数值较大的放上面
相对布局
position:fixed
#相对于浏览器边缘的绝对位置
表格
<table summary="test"> #summary,摘要,在浏览器上不显示,就像程序的注释一样
<caption> #给表格添加标题
这是一个标题
</caption>
<tr> #每个<tr> 构成一行
<th>1</th> #<th>构成一列的表格表头(会被加粗)
<th>2</th>
</tr>
<tr>
<td>1</td> #每个<td>构成表单的一个单元
<td>2</td>
</tr>
</table>
border-spacing:1px 2px
#设置单元单之间的距离,水平为1,垂直为2
border-collapse:bollapse;
#取消单元格之间的距离,距离为0
占两行 #rowspan定义一个表格单元所占据的行数
占两列 #colspan定义一个表格单元所占据的列数
li {
list-style-type: disc;
}
设置列表的主属性,也就是列表前面的那个圆点
`list-syle-type: disc` #disc为圆点,circle为圆圈,square为方块,none为消除所有标志
也可以自定义:
li {
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-lef: 20px;
}
表单
表单里填写的内容:
文本框
提交按钮
单选框
复选框
密码输入框
文本区