一起入门前端(二)
今天要讲的主角是CSS,首先用一张图展示CSS学习的路径:
CSS概要:
CSS 指层叠样式表 (Cascading Style Sheets),在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS基础语法:由选择器和声明构成,例如:h1{color:red;font-size:14px;}
CSS基础选择器:(这里只介绍基础的选择器,在jQuey中会更详细介绍)
1.派生选择器:通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁,例如li strong{color:red;}
2.id选择器:以"#"来定义,例如:要筛选<div id='box'></div>则可以使用#box;
3.类选择器:以"."来定义,例如:要筛选<div class='red'></div>则可以使用.red;
4.属性选择器:以"[]"来定义,例如:要筛选<a href='http://www.cnblogs.com/sweet12-04/' title='a'>sweet</a>则可以使用[title='a'];
css基本样式:
1.css背景:
属性 | 描述 |
---|---|
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
background-color | 设置元素的背景颜色 |
background-image | 把图片设置为背景 |
background-position | 设置背景图片的起始位置 |
background-repeat | 设置背景图片是否及如何重复 |
css3背景:
属性 | 描述 |
---|---|
background-size | 规定背景图片的尺寸 |
background-origin | 规定背景图片的定位区域 |
background-clip | 规定背景的绘制区域 |
2.css文本
属性 | 描述 |
---|---|
color | 文本颜色 |
direction | 文本方向 |
line-height | 行高 |
letter-spacing | 字符间距 |
text-align | 对齐元素中的文本 |
text-decoration | 向文本添加修饰 |
text-indent | 缩进元素中文本的首行 |
text-transform | 元素中的字母 |
unicode-bidi | 设置文本方向 |
white-space | 元素中空白的处理方式 |
word-spacing | 字间距 |
3.css链接:
css链接的4种状态:a:link --普通的、未被访问的链接 a:visited --用户已访问的链接 a:hover --鼠标指针位于链接的上方 a:active --链接被点击的时刻
css修改链接下划线:text-decoration:none;则将下划线取消掉;
4.css列表:
list-style-type用来装饰列表前的样式,例如有序列表默认是123,可以使用li{list-style-type:lower-alpha},修改为小写字母。
list-style-img也是用来装饰列表前样式,不过使用的是图片,例如无序列表默认的样式是小黑点,可以使用ul{list-style-img:url(图片url地址)},修改为图片。
list-style为复合样式
5.css表格,在表格学习中,我们主要了解以下属性:
border-collapse ---设置是否把表格边框合并为单一的边框。
border-spacing ---设置分隔单元格边框的距离。
caption-side --- 设置表格标题的位置。
empty-cells ---设置是否显示表格中的空单元格。
table-layout ---设置显示单元、行和列的算法。
6.css轮廓,轮廓是绘制于元素周末的一条线,位于边框边缘的一周,起到突出元素的作用,涉及的属性有:
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
CSS盒模型:
盒子的组成包括: margin(外边距);border(边框);padding(内边距);content(内容) 正文框的最内部分是实际的内容,直接包围内容的是内边距。下面用一张图描述他们的结构:
css内边距使用padding,如果希望h1元素各边都有10像素的内边距,可以这样表示h1{pddding:10px;},也可以按照上右下左的顺序呢分别设置内边距。
如果只想设置一边的内边距,可以使用padding-top padding-right padding-bottom padding-left。
css边框使用border,可以规定元素边框的样式颜色及宽度,分别使用border-style,border-width,border-color,当然也可以使用border符合属性,例如:h1{border:solid 3px red;}同h1{border-style:solid; border-color:red; border-width:3px}是等效的。同样也可以设置单边框的样式,颜色及宽度:border-top-style border-right-style border-bottom-style border-left-style,border-top-color border-right-color border-bottom-color border-left-color,border-top-width border-right-width border-bottom-width border-left-width。
css外边距使用margin,同padding使用是一样的。
CSS定位:
CSS有三种基本的定位机制:
普通流:元素按照其在 HTML 中的位置顺序决定排布的过程。
浮动:浮动的框可以向左或向右移动,知道它的外边缘碰到包含框或另一个浮动框的边框为止。
绝对定位:绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
首先:position,position可能会有的值有:
值 | 描述 |
---|---|
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 脱离了文本流(即在文档中已经不占据位置) 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
CSS浮动:
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
当不需要元素继承float属性时,可以使用clear:both,清除浮动。