CSS
1.
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
编辑
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开
2.选择器
id选择器:HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
class选择器:class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示
3.插入一个样式表的三种方法
-
外部样式表(External style sheet):当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
-
内部样式表(Internal style sheet):以使用 <style> 标签在文档头部定义内部样式表
-
内联样式(Inline style)
优先级如下:
(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
4.背景属性定义
背景图片:background-image:url('paper.gif')
背景图片平铺:background-repeat:repeat-x
背景图片不平铺:background-repeat:no-repeat
背景图像的位置区域:background-origin
background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
5.文本属性定义:
文本对齐方式:text-align (right,left,justify(每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)))
文本修饰:text-decoration
text-decoration 属性用来设置或删除文本的装饰
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
a {text-decoration:none;}
文本转换:text-transform
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写
文本缩进:text-indent:50px
6.字体属性定义
属性设置字体系列 font-family
字体样式:font-style, 这个属性有三个值:
-
正常 - 正常显示文本
-
斜体 - 以斜体字显示的文字
-
倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)
字体大小:font-size
7.链接样式属性定义
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
-
a:link - 正常,未访问过的链接
-
a:visited - 用户已访问过的链接
-
a:hover - 当用户鼠标放在链接上时
-
a:active - 链接被点击的那一刻
8.列表样式属性定义
指定列表项标记的类型:list-style-type
指定列表项标记的图像:list-style-image
9.表格属性定义
表格边框:border:1px solid black
折叠边框:border-collapse:collapse
宽高:width,height
表格填充:padding:15px
10.盒子模型
编辑
不同部分的说明:
-
Margin(外边距) - 清除边框外的区域,外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
-
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
-
Content(内容) - 盒子的内容,显示文本和图像。
11.分组选择器和嵌套选择器
分组选择器:为了尽量减少代码,你可以使用分组选择器。每个选择器用逗号分隔。在下面的例子中,我们对以上代码使用分组选择器:h1,h2,p { color:green; }
嵌套选择器:它可能适用于选择器内部的选择器的样式。在下面的例子设置了四个样式:
-
p{ }: 为所有 p 元素指定一个样式。
-
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
-
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
-
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
12.Display(显示)与Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
13.Position(定位)
position 属性指定了元素的定位类型。position 属性的五个值:
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
relative 定位
相对定位元素的定位是相对其正常位置
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
sticky 定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
14.Overflow
overflow 属性用于控制内容溢出元素框时显示的方式
overflow属性有以下值:
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
15.Float(浮动)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
16.水平和垂直对齐
元素居中对齐:margin:auto
文本居中对齐:text-align:center
图片居中对齐:margin:auto
左右对齐-使用定位方式:position:absolute
左右对齐-使用float方式:float:right
垂直居中对齐:padding,如果要水平和垂直都居中,可以使用 padding 和 text-align: center:
垂直居中:line-height:200px
垂直居中:position ,transform
17.边框
圆角:border-radius:2px
盒阴影:box-shadow
边界图片:border-image
18.2D转换
- translate() 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
- rotate() 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
- scale() 该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数。
- skew()
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。skewX(<angle>);表示只在X轴(水平方向)倾斜。skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
- matrix() 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
19.3D转换
- rotateX() 围绕其在一个给定度数X轴旋转的元素 rotateX(deg)
- rotateY() 围绕其在一个给定度数Y轴旋转的元素 rotateY(deg)