css学习
CSS 指层叠样式表 (Cascading Style Sheets)
一. css三种使用方法
行内样式
在style属性直接写css样式。
例:
<div style="color: red;">行内样式</div>
内嵌式
在标签里加标签写样式。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.embedded {
color: red;
}
</style>
<title></title>
</head>
<body>
<div class="embedded">内嵌式</div>
</body>
</html>
外部式
引用外部的.css文件。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>
<body>
<div class="external">外部式</div>
</body>
</html>
style.css文件内容如下:
.external {
color: red;
}
css三种使用方式的优先级:
行内样式>内嵌式>外部式
二. css选择器
element选择器
HTML元素以标签类型直接选择。
p {
color: red;
}
<p>我是一个p标签</p>
<span>我是一个span标签</span>
<p>我是另一个p标签</p>
id选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
<div id="para1"> id选择器</div>
#para1 {
text-align:center;
color:red;
}
class选择器
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。
<div class="para2"> class选择器</div>
.para2 {
text-align:center;
color:red;
}
属性选择器
下面的例子是把包含标题(title)的所有元素变为蓝色
[title] {
color:blue;
}
<div title="css学习1">属性选择器</div>
<div>属性选择器</div>
<div title="css学习3">属性选择器</div>
带值属性选择器
下面的实例标题title='css-example’元素的边框样式:
[title=css-example] {
color:blue;
}
<div title="css-example">属性选择器带值</div>
<div>属性选择器带值</div>
<div title="css-example">属性选择器带值</div>
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子
[title~=css] {
color:blue;
}
<div title="css">属性选择器</div>
<div title="css example">属性选择器带值</div>
<div title="css hh">属性选择器带值</div>
[title|=css] {
color:blue;
}
<div title="css">属性选择器</div>
<div title="css-example">属性选择器带值</div>
<div title="css-hah">属性选择器带值</div>
常用表单用法
input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
}
其它选择器参考手册地址
http://www.w3school.com.cn/cssref/css_selectors.asp
三 css定位布局
CSS Position(定位)
- Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。
- static :默认值;默认布局。
- absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。
- relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
- fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置。
-
absolute
绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。 -
relative
相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 -
fixed
固定定位;类似于absolute,但不随着滚动条的移动而改变位置。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style type="text/css">
#parent{
position:absolute;
left:100px;
top:100px;
padding: 20px 100px;
border: 2px solid red;
}
.mydiv
{
height: 200px;
width: 300px;
border-color: Black;
border-style: solid;
border-width: 1px;
}
/* #a
{
position:absolute;
left:900px;
top:150px;
} */
/* #b
{
position:relative;
left:500px;
top:100px;
} */
/* #c
{
position:fixed;
left:970px;
top:400px;
} */
/* #d
{
position:static;
background-color:Window;
} */
</style>
</head>
<body>
<div id="parent">
<div id="a" class="mydiv" >
div-a<br />
position:absolute;<br />
绝对定位;脱离文档流,遗留空间由后续元素填充。
</div>
<div id="b" class="mydiv">
div-b<br />
position:relative;<br />
相对定位;不脱离文档流,只改变自身的位置,在文档流原先的位置遗留空白区域。
</div>
<div id="c" class="mydiv">
div-c<br />
position:fixed;<br />
固定定位;固定在页面中,不随浏览器的大小改变而改变位置。
</div>
<div id="d" class="mydiv"></div>
</div>
<input type="text" value="input1" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
盒子模型
每个元素,都会形成一个矩形块,主要包括四部分:margin(外边距)+border(边框)+padding(内边距)+content(内容)
-
Margin(外边距) - 清除边框外的区域,外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
-
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
-
Content(内容) - 盒子的内容,显示文本和图像。
!http://www.w3school.com.cn/i/ct_boxmodel.gif !
css盒子尺寸的计算:
我们通过给高宽赋值,来定义content(内容)的高度和宽度。如果没有做任何声明,那么高度和宽度的默认值将是自动(auto)。即在css中给一个块级元素的width和height属性赋值时比如div{width :200px; height: 200px}时,其中的width 和height只是对content部分设置的,即上图中content区域的长和宽。而不是内容,内边距,边框的总和(但在IE的早期版本包括IE6中,盒子模型的width和height却是内容+内边距+边框的总和,尽管符合人们思考的逻辑习惯,但是不符合规范,造成了很多兼容性问题。)
例子:
在 CSS 中,width 和 height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。假设框的每个边上有 10个像素的外边距和10个像素的内边距和5个像素的边框。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为50像素,以下是CSS代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box {
width: 50px;
height: 50px;
border: 5px solid #000;
margin: 10px;
padding: 10px;
}
</style>
<title></title>
</head>
<body>
<div class="box">我是盒子模型</div>
</body>
</html>
margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
css单位
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
英寸: margin : 0.25in;
…
另外,还可以为 margin 设置一个百分比数值:
百分数是相对于父元素的 width 计算的。元素设置的外边距是其父元素的 width 的 10%。
学习相关资料:
css定位布局学习地址
http://zh.learnlayout.com/position.html
w3cschoolcss学习地址
http://www.w3school.com.cn/css/index.asp
菜鸟css学习地址
http://www.runoob.com/css/css-tutorial.html
css所有属性
http://www.runoob.com/cssref/css-reference.html