CSS简单介绍
一、方式
1.内联式引用
2.内部引用
3.外部引用(链接式引用，导入式引用)
4.优先级(由高到低) 内联式》外部链接式》内部式》外部导入式
二、内联式
1.直接从HTNL标签上注明格式
2。使用方法简单，不建议使用
3.维护成本高
三、内部引用
1.将样式声明在HTMl页面中
2.使用<style>和</style>标签进行声明
3.把CSS代码集中在同一个区域，不仅便于维护，页面结构也清晰了
4.内部定义的样式不能被其他页面所使用
5.内部引用只使用与对特殊页面设置独特风格。
四、外部链接式引用
1.使用频率最高，最实用
2.将CSS样式定义在一个独立的文件中，使用.css作为扩展名，使用HTML的Link对象来引用它。
<link rel="stylesheet" type="text/css" href = "./style/1.css" />
将CSS与HTML分离，同一个CSS文件可以被不同的HTML所使用
3.便于维护
五、外部导入式引用
1.以import方式导入的样式表，在HTML初始化时，会被导入HTML页面中，作为文件的一部分。
2.链接式引用只有在HTML标签需要此样式时才被引入。
3.导入式最大用处就是可以在一个HTML中导入多个样式表。
<style type="text/css"> @import url("./style/1.css”) </style>
六、css注释与样式选择符
1.注释： /* */
2.样式选择符：标签选择符 类选择符 ID选择符
优先级(由高到低)：ID选择符》类选择符》标签选择符
3.标签选择符
@CHARSET "UTF-8"; body{ color:black /*页面文字为黑色*/ } p { font-family:"sans serif" /*字体为sans serif"*/ } p { texe-align:center;color:red /*文字居中，文字红色*/ }
4.类选择符
/*类选择符*/
p.right {
texe-align:right /*段落向右对齐*/
}
p.center {
texe-align:center /*段落居中*/
}
/*
<body>
<p class = "right">段落向右对齐</p>
<p class = "center">段落居中</p>
</body>
*/
/*另外一种表达方式*/
.center {
texe-align:center /*段落居中*/
}
/*
<h1 class = "center">标题居中</h1>
<p class = "center">段落居中</p>
*/
5.ID选择符
/*ID选择符*/ #center { texe-align:center /*段落居中*/ } /* <body> <p id = "center">段落居中</p> </body> */
6.选择符的嵌套
/*选择符的镶嵌*/ #main li{ color:red /*文字红色*/ } /* <body> <div id="main"> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> </body> */
7.样式表的层叠性
1.层叠性就是继承性
2.样式表的继承规则是：外部元素的样式会被该元素所包含的其他元素所继承
3.所有在元素中镶嵌的元素都会继承外层元素指定的属性值
<html> <head> <title>样式表的层叠性--继承</title> <style type="text/css"> <!-- div{ font-size: 36px; text-decoration: underline; } p{ line-height: 80px; } --> </style> </head> <body> <div id="main"> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> </body> </html>
八、CSS盒子模型
1.组成：内容、边框border、填充padding、边界margin等四部分组成。
CSS 字体属性（Font）
| 属性 | 描述 | CSS |
|---|---|---|
| font | 在一个声明中设置所有字体属性。 | 1 |
| font-family | 规定文本的字体系列。 | 1 |
| font-size | 规定文本的字体尺寸。 | 1 |
| font-size-adjust | 为元素规定 aspect 值。 | 2 |
| font-stretch | 收缩或拉伸当前的字体系列。 | 2 |
| font-style | 规定文本的字体样式。 | 1 |
| font-variant | 规定是否以小型大写字母的字体显示文本。 | 1 |
| font-weight | 规定字体的粗细。 | 1 |
font-weight：字体粗细
| 属性值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100、200…900 | 400 等同于 normal，而 700 等同于 bold。 |
font-size：字体大小
| 属性值 | 描述 |
|---|---|
| xx-small、x-small、small、medium、large、x-large、xx-large | 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。 |
| smaller | 把 font-size 设置为比父元素更小的尺寸。 |
| larger | 把 font-size 设置为比父元素更大的尺寸。 |
| length | 把 font-size 设置为一个固定的值。 |
| % | 把 font-size 设置为基于父元素的一个百分比值。 |
font-family：字体
font-style：斜体
| 属性值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
CSS 背景属性（Background）
| 属性 | 描述 | CSS |
|---|---|---|
| background | 在一个声明中设置所有的背景属性。 | 1 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-color | 设置元素的背景颜色。 | 1 |
| background-image | 设置元素的背景图像。 | 1 |
| background-position | 设置背景图像的开始位置。 | 1 |
| background-repeat | 设置是否及如何重复背景图像。 | 1 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |
CSS 文本属性（Text）
| 属性 | 描述 | CSS |
|---|---|---|
| color | 设置文本的颜色。 | 1 |
| direction | 规定文本的方向 / 书写方向。 | 2 |
| letter-spacing | 设置字符间距。 | 1 |
| line-height | 设置行高。 | 1 |
| text-align | 规定文本的水平对齐方式。 | 1 |
| text-decoration | 规定添加到文本的装饰效果。 | 1 |
| text-indent | 规定文本块首行的缩进。 | 1 |
| text-shadow | 规定添加到文本的阴影效果。 | 2 |
| text-transform | 控制文本的大小写。 | 1 |
| unicode-bidi | 设置文本方向。 | 2 |
| white-space | 规定如何处理元素中的空白。 | 1 |
| word-spacing | 设置单词间距。 | 1 |
| hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
| punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 |
| text-outline | 规定文本的轮廓。 | 3 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
| text-shadow | 向文本添加阴影。 | 3 |
| text-wrap | 规定文本的换行规则。 | 3 |
| word-break | 规定非中日韩文本的换行规则。 | 3 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
CSS 外边距属性（Margin）
| 属性 | 描述 | CSS |
|---|---|---|
| margin | 在一个声明中设置所有外边距属性。 | 1 |
| margin-bottom | 设置元素的下外边距。 | 1 |
| margin-left | 设置元素的左外边距。 | 1 |
| margin-right | 设置元素的右外边距。 | 1 |
| margin-top | 设置元素的上外边距。 | 1 |
CSS 内边距属性（Padding）
| 属性 | 描述 | CSS |
|---|---|---|
| padding | 在一个声明中设置所有内边距属性。 | 1 |
| padding-bottom | 设置元素的下内边距。 | 1 |
| padding-left | 设置元素的左内边距。 | 1 |
| padding-right | 设置元素的右内边距。 | 1 |
| padding-top | 设置元素的上内边距。 | 1 |
CSS 边框属性（Border 和 Outline）
| 属性 | 描述 | CSS |
|---|---|---|
| border | 在一个声明中设置所有的边框属性。 | 1 |
| border-bottom | 在一个声明中设置所有的下边框属性。 | 1 |
| border-bottom-color | 设置下边框的颜色。 | 2 |
| border-bottom-style | 设置下边框的样式。 | 2 |
| border-bottom-width | 设置下边框的宽度。 | 1 |
| border-color | 设置四条边框的颜色。 | 1 |
| border-left | 在一个声明中设置所有的左边框属性。 | 1 |
| border-left-color | 设置左边框的颜色。 | 2 |
| border-left-style | 设置左边框的样式。 | 2 |
| border-left-width | 设置左边框的宽度。 | 1 |
| border-right | 在一个声明中设置所有的右边框属性。 | 1 |
| border-right-color | 设置右边框的颜色。 | 2 |
| border-right-style | 设置右边框的样式。 | 2 |
| border-right-width | 设置右边框的宽度。 | 1 |
| border-style | 设置四条边框的样式。 | 1 |
| border-top | 在一个声明中设置所有的上边框属性。 | 1 |
| border-top-color | 设置上边框的颜色。 | 2 |
| border-top-style | 设置上边框的样式。 | 2 |
| border-top-width | 设置上边框的宽度。 | 1 |
| border-width | 设置四条边框的宽度。 | 1 |
| outline | 在一个声明中设置所有的轮廓属性。 | 2 |
| outline-color | 设置轮廓的颜色。 | 2 |
| outline-style | 设置轮廓的样式。 | 2 |
| outline-width | 设置轮廓的宽度。 | 2 |
| border-bottom-left-radius | 定义边框左下角的形状。 | 3 |
| border-bottom-right-radius | 定义边框右下角的形状。 | 3 |
| border-image | 简写属性，设置所有 border-image-* 属性。 | 3 |
| border-image-outset | 规定边框图像区域超出边框的量。 | 3 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 | 3 |
| border-image-slice | 规定图像边框的向内偏移。 | 3 |
| border-image-source | 规定用作边框的图片。 | 3 |
| border-image-width | 规定图片边框的宽度。 | 3 |
| border-radius | 简写属性，设置所有四个 border-*-radius 属性。 | 3 |
| border-top-left-radius | 定义边框左上角的形状。 | 3 |
| border-top-right-radius | 定义边框右下角的形状。 | 3 |
| box-decoration-break | 3 | |
| box-shadow | 向方框添加一个或多个阴影。 | 3 |
CSS 列表属性（List）
| 属性 | 描述 | CSS |
|---|---|---|
| list-style | 在一个声明中设置所有的列表属性。 | 1 |
| list-style-image | 将图象设置为列表项标记。 | 1 |
| list-style-position | 设置列表项标记的放置位置。 | 1 |
| list-style-type | 设置列表项标记的类型。 | 1 |
| marker-offset | 2 |
九、使用css控制超链接
1.css提供了对超链接进行控制的能力，包括了超链接不同状态、伪类、按钮特效等等。
2.css允许针对超链接的未访问、已访问、活动、图标悬停等状态分别定义了不同的样式。这样便于可为网站添加奇妙而实用的效果。可以通过伪类(pseudo-class)来实现这些效果。
3.伪类是针对HTML元素的条件和事件所定义的CSS样式。
十、css伪类
/*从未访问过的链接样式*/ a:LINK { color: #6699CC; } /*已访问的链接样式*/ a:VISITED { color: #660099; } /*活动的链接*/ a:ACTIVE { background-color: #FFFF00; } /*有鼠标悬停的链接样式*/ a:HOVER { color: orange; font-style: italic; }
十一、按钮超链接
<!DOCTYPE html> <html> <head> <title>button.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> <!-- a{ font-family: Arial; font-size:1em; text-align: center; margin:3px; } a:LANG,a:VISITED{ color: #002020; padding: 4px 10px 4px 10px; background-color: #00d8db; text-decoration: none; border-top: 1px solid #EE00EE;/*边框实现阴影效果*/ border-left: 1px solid #EE00EE; border-bottom: 1px solid #710071; border-right: 1px solid #710071; } a:HOVER{ color:#ffffff; padding: 5px 8px 4px 12px; background-color: #00c4c9; text-decoration: none; border-top: 1px solid #710071;/*边框实现阴影效果*/ border-left: 1px solid #710071; border-bottom: 1px solid #EE00EE; border-right: 1px solid #EE00EE; } --> </style> </head> <body> <a href="#">首页</a> <a href="#">列出所有联赛</a> <a href="#">添加新联赛</a> <a href="#">注册联赛</a> <a href="#">用户登入</a> </body> </html>
十二、css/div页面布局
1.div标签是实现页面布局的重要标签，是英文Division的缩写，即分区、分块的意思，是一个大容器。
2.span是另外一个常用语布局的标签，span在一行内定义一个区域，也就是一行内可以被多个span划分成好几个区域，是一个小容器。
3.大容器中可以放置小容器。
4.css与div
<!DOCTYPE html> <html> <head> <title>css与div</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> #left{ background-color: #CCC0CC; float: left; height: 300px; width: 200px; border: 9px soid #333333; } #right{ background-color: #CCCCCC; float: left; height: 300px; width: 200px; border: 2px soid #333333; } </style> </head> <body> <div id="left">左侧区域</div> <div id="right">右侧区域</div> </body> </html>
5.布局居中显示
<!DOCTYPE html> <html> <head> <title>css与div</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> #main{ width: 408px; margin-top: 120px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } #left{ background-color: #CCC0CC; float: left; height: 300px; width: 200px; border: 9px soid #333333; } #right{ background-color: #CCCCCC; float: left; height: 300px; width: 200px; border: 2px soid #333333; } </style> </head> <body> <div id = "main"> <div id="left">左侧区域</div> <div id="right">右侧区域</div> </div> </body> </html>
