CSS学习笔记
第一章 CSS概述
CSS 指级联样式表 (Cascading Style Sheets)；
第二章 CSS基本选择器
第一节：CSS基本语法
第二节：CSS基本选择器
1）标记选择器
2）类别选择器
3）ID选择器
第三节：在 HTML 中引入 CSS 的方法
1、行内样式
2、内嵌式
3、链接式
<title>链接式</title>
<link href="red.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>我爱编程!</p>
</body>
--------------------
red.css
4、导入样式（了解）
blue.css
5、几种方式的优先级比较
第三章 网页制作小实践
第一节：网页裸奔
第二节：设置标题
第三节：设置图片
第四节：设置正文
第五节：设置整体页面
<title>网页制作小实践</title>
<style>
/*用CSS美化页面 */
body{
margin:0px;
background-color:#DFDFDF;
}
h1{
color:white;
background-color:gray;
text-align:center;
padding:20px;
}
img{
width:150px;
height:180px;
float:left; /*向左悬浮*/
margin:5px;
}
p{
font-size:12px;
line-height:1.5;
text-indent:2em; /*缩进2格*/
}
</style>
</head>
<body>
<h1>Java之父——詹姆斯·高斯林</h1>
<img alt="Java之父" title="詹姆斯·高斯林" src="java.jpg" />
<p>。。。</p>
<p>。。。</p>
<p>。。。</p>
</body>
第四章 CSS 高级特性
第一节：复合选择器
1.1 “交集”选择器
1.2 “并集”选择器
1.3 “后代”选择器
1.4 “子”选择器
第二节：CSS 的继承特性
第三节：CSS 的层叠特性
层叠样式的规则： 行内样式 > ID 样式 > 类别样式 > 标记样式
第五章 用 CSS 设置文本样式
第一节：设置文字的字体
/*当系统没有第一种字体时，用接下来的字体，以此类推*/
.p2{
font-family:黑体，宋体 <!--不用分号 -->
}
第二节：设置文字的倾斜效果
p{
font-style:italic;
}
第三节：设置文字的加粗效果
p{
font-weight:bold;
}
第四节：设置英文字母大小写转换
第五节：设置文字的大小
p{
font-size:24px;
}
第六节：设置文字的装饰效果
第七节：设置段落首行缩进
p{
text-indent:2em;
}
第八节：设置字词间距
第九节：设置文字的行高
p{
line-height:1.5;
}
第十节：设置段落之间的距离
p{
border:5px red solid; <!--为了便于观察，加边框-->
margin:10px;
}
第十一节：设置文本的水平位置
<p style="text-align:left">好好学习，天天向上。</p>
<p style="text-align:center">好好学习，天天向上。</p>
<p style="text-align:right">好好学习，天天向上。</p>
第十二节：设置文字和背景的颜色
p{
color:red;
background-color:green;
}
第十三节：设置段落的垂直对齐方式
暂略。
第六章 用 CSS 设置图像效果
第一节：设置图片边框
第二节：设置图片大小及缩放
第三节：图文混排
第四节：设置图片与文字的对齐方式
<img src="red.jpg" style="vertical-align:baseline;">
<img src="blue.jpg" style="vertical-align:bottom;">
<img src="blue.jpg" style="vertical-align:middle;">
<img src="red.jpg" style="vertical-align:top;">
<img src="blue.jpg" style="vertical-align:text-top;">
<img src="red.jpg" style="vertical-align:text-bottom;">
<img src="blue.jpg" style="vertical-align:sub;">
<img src="blue.jpg" style="vertical-align:super;">
<img src="blue.jpg" style="vertical-align:20px;">
<img src="blue.jpg" style="vertical-align:-20px;">
第七章 用 CSS 设置背景颜色和背景图像
第一节：设置背景颜色
<body style="background-color:pink;">
第二节：设置背景图像
<body style="background-image:url(grid.jpg);">
第三节：设置背景图像平铺
<body style="background-image:url(grid.jpg);">
<div style="height:96px;border:1px red solid;background-image:url(banner.jpg); background-repeat:repeat-x;">我是标题</div>
</body>
第四节：设置背景图像位置
<body style="background-image:url(dog.jpg); background-repeat:no-repeat;background-position:100px 100px;">
第五节：设置背景图片位置固定
<body style="background-image:url(dog.jpg); background-repeat:no-repeat;background-position:100px 100px;background-attachment:fixed;">
第六节：设置背景图片大小（追加）
在css中控制背景图片的大小用 background-size: length|percentage|cover|contain
length用法：
background-size:100px； //背景图片显示的宽和高为100像素
background-size:100px 160px；//背景图片显示的宽为100像素，高为600像素
percentage用法：
background-size：60%； //背景图片的显示宽度和高度是图片大小60%；
background-size：60% 80%； // 背景图片的显示宽度是图片大小的60%，高度是80%；
cover用法：
background-size：cover； //把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain用法：
background-size：contain； //把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
第八章 CSS 盒模型
第一节：盒模型基本概念
盒模型：
相框边框 - > border
画和相框边框的距离 -> padding
相框之间的距离 -> margin
第二节：边框
border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式：
dotted点状 solid实线 double双线 dashed虚线
第三节：内边距
用 padding 设置内边距
第四节：外边距
用 margin 设置外边距
第五节：网页布局与盒模型
第六节：盒子在标准流中的定位
1.行内元素之间的水平 margin
margin-right + margin-left
2. 块级元素之间的竖直 margin
margin-bottom margin-top 以大的为标准
3. 嵌套盒子之间的 margin
子块的 margin 将以父块的内容为参考
4. margin 属性可以设置成负值
第九章 盒子的浮动与定位
第一节：盒子浮动 float
Float 属性：
默认是 none ，按照标准流来定位；
Left：左悬浮；
Right：右悬浮；
第二节：使用 clear 清除浮动的影响
Clear 属性：
默认是 none，允许两边都可以有浮动对象；
Left： 不允许左边有浮动对象
Right：不允许右边有浮动对象
Both：不允许有浮动对象
第三节：盒子定位 position
Position 属性：
默认是 static，按照标准流来定位；
Relative：相对定位，相对于原本的标准位置偏移指定的距离；
Absolute：绝对定位，以它的包含框为基准进行偏移；
Fixed：固定定位，以浏览器窗口为基准进行定位；
第四节：z-index 空间位置
z-index 空间位置，默认是 0，z-index 值大的页面位于其值小的上方；
第五节：盒子 display 属性
display：
Inline：把元素变成内联元素；
Block：把元素变成块级元素；
第十章 用 CSS 设置表格样式
第一节：设置表格的边框
Border：设置表格边框；
Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；
Border-spacing ：设置单元格的间距；
Padding：设置单元格内容和边框之间的距离；
第二节：设置表格的宽度
Table-layout
默认 auto 自动方式，根据单元格的内容自动调整宽度；
Fixed 固定方式 表格宽度固定；
第三节：设置表格隔行换色
核心CSS：
.t tr{
background-color:#CCC;
}
tbody tr.even{
background-color:#AAA;
}
第四节：设置表格列样式
核心CSS：
/*邻接选择器*/
th+td{
text-align:center;
}
th+td+td+td{
text-align:center;
background-color:red;
}
第五节：设置鼠标经过时行变色效果
/*设置鼠标经过时行变色效果*/
tbody tr:HOVER{
background-color:aqua;
}
第十一章 用 CSS 设置超链接样式
第一节：使用 CSS 伪类别来设置超链接样式
链接的四种状态：
a:link：普通的、未被访问的链接
a:visited：用户已访问的链接
a:hover：鼠标指针位于链接的上方
a:active：链接被点击的时刻
a:link{
color:red;
text-decoration:none;
}
a:visited{
color:purple;
text-decoration:none;
}
a:hover{
color:green;
text-decoration:none;
}
a:active{
color:yellow;
text-decoration:none;
}
第二节：创建按钮式超链接
a:link,a:visited{
padding:4px 10px 4px 10px;
text-decoration:none;
background-color:#DCDCDC;
border-top:1px solid #FFF0F5;
border-left:1px solid #FFF0F5;
border-bottom:1px solid #A9A9A9;
border-right:1px solid #A9A9A9;
}
a:hover{
padding:5px 8px 3px 12px;
text-decoration:none;
background-color:#C0C0C0;
border-top:1px solid #A9A9A9;
border-left:1px solid #A9A9A9;
border-bottom:1px solid #FFF0F5;
border-right:1px solid #FFF0F5;
}
第十二章 用 CSS 设置列表样式
第一节：设置列表的符号
<style type="text/css">
/* */
ul,ol{
list-style-type:square;
}
</style>
</head>
<body>
<ul>
<li style="list-style-type:none;">个人主页</li>
<li>我的动态</li>
<li>我的相册</li>
<li>消息</li>
<li>留言</li>
</ul>
<ol>
<li>个人主页</li>
<li style="list-style-type:circle;">我的动态</li>
<li>我的相册</li>
<li>消息</li>
<li>留言</li>
</ol>
第二节：设置列表图片符号
<style type="text/css">
/* */
ul,ol{
list-style-image:url("li.png");
}
</style>
</head>
<body>
<ul>
<li>个人主页</li>
<li>我的动态</li>
<li style="list-style-image:url('image.png');">我的相册</li>
<li>消息</li>
<li>留言</li>
</ul>
<ol>
<li>个人主页</li>
<li>我的动态</li>
<li style="list-style-image:url('image.png');">我的相册</li>
<li>消息</li>
<li>留言</li>
</ol>
</body>
第三节：创建简单导航菜单
<title>创建简单导航菜单</title>
<style type="text/css">
/* */
#navigation{
font-family:Arial;
font-size:14px;
text-align:center;
}
#navigation ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #9F9FED; /* 添加下划线 */
float:left;
}
#navigation li a{
width:120px;
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
}
#navigation li a:link, #navigation li a:visited{
background-color:#1136c1;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#002099; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">个人主页</a></li>
<li><a href="#">我的动态</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">消息</a></li>
<li><a href="#">留言</a></li>
</ul>
</div>
</body>
第十三章 CSS 固定宽度布局
第一节：CSS 布局
第二节：绝对定位法
<style type="text/css">
/* */
body{
text-align:center;
}
#head,#container,#content,#side,#foot{
border:1px red solid;
margin:20px auto 20px auto;
padding:20px 0px 20px 0px;
}
#head,#container,#foot{
width:960px;
}
#container{
border:0px;
position:relative;
height:250px;
}
#content{
position:absolute;
width:700px;
height:240px
}
#side{
margin-left:750px;
height:200px
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
<div id="content">content</div>
<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
第三节：浮动法
<style type="text/css">
/* */
body{
text-align:center;
}
#head,#container,#content,#side,#foot{
border:1px red solid;
margin:20px auto 20px auto;
padding:20px 0px 20px 0px;
}
#head,#container,#foot{
width:960px;
}
#container{
border:0px;
}
#content{
float:left;
width:700px;
height:240px
}
#side{
float:right;
width:200px;
margin-left:10px;
height:200px
}
#foot{
clear:both;
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
<div id="content">content</div>
<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
第十四章 CSS变宽度布局
第一节 变宽度布局（用百分比，布局随浏览器窗口大小变化）
width:63%;
width:33%
【完】
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
