一、方式
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>
时间： 2024-07-28 17:23:45