css：又称层叠样式表 具体英文单词（好吧，我又不是学英文）
w3c，中文也称之为万维网。网页地址：http://www.w3school.com.cn/ 里面包最详细的教程，但是前提你愿意花费那么多的时间，而且不一定用的到。
css最重要的部分就是选择器了，首先简单说下css为什么出现
早期的页面html的属性，所有内容写在一个页面上显示十分的拥挤，维护起来非常的不方便，这时候css就出来了。
一句话：css实现了网页的结构和样式想分离
html可以把网页的大体结构布置出来，显示我们想要看到的效果
css可以给我们的网页，实现美化而且看起来十分的清晰条例
打开一个页面，如果想看他的具体源代码可以使用快捷键（f12），程序员专用工具
好了，废话一箩筐了，进入正题
css模块：
注释
单行注释：//注释内容
多行注释：/*注释内容（可跨行）*/
结合方式
css也是一种文件，html需要引入这种文件，实现结合，当然结合方式许多：大体三种
第一种：
<!DOCTYPE html>
<html>
<head>
<title>01-结合方式1.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 结合方式1:
html标签上加上style属性. 属性的值填写Css代码.
所有标签都有style属性.
-->
</head>
<body>
<p style="color:red;">This is my HTML page. </p>
</body>
</html>
第二种：
<!DOCTYPE html>
<html>
<head>
<title>01-结合方式1.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 结合方式2:
使用head标签中的style标签.设置页面样式.style中填写css代码
-->
<style>
p{
color:red;
}
</style>
</head>
<body>
<p style="color:red;">This is my HTML page. </p>
</body>
</html>
第三种：
建立一个css后缀名的文件 如p.css 代码如下
p{
color:red;
}在需要美化的页面引入该文件即可
<!DOCTYPE html>
<html>
<head>
<title>03-结合方式3.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">
<!-- 结合方式3:
-->
<link rel="stylesheet" type="text/css" href="p.css">
</head>
<body>
<p> This is my HTML page. </p>
</body>
</html>
css语法
<!DOCTYPE html>
<html>
<head>
<title>02-结合方式2.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">-->
<!-- 语法1:
选择器{
样式属性键: 样式属性值;
样式属性键:样式属性值1 样式属性值2 样式属性值3...;
/*
注释内容!
*/
语法2:
style="样式属性键: 样式属性值;"
}
-->
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p > This is my HTML page. </p>
</body>
</html>
css选择器
重点：对于html属性不会的，没有关系，但是css的选择器必须掌握，也是css的重点
选择器1：标签选择器
<style type="text/css">
a{
color:blue;
}
</style>
</head>
<body>
<a> This is my HTML page. </a>
</body>
选择器2：id选择器，使用id时.要保证id的值在页面中是唯一的
<style type="text/css">
#one{
color:yellow;
}
</style>
</head>
<body>
<a id="one" > This is my HTML page. </a><br>
<a> This is my HTML page. </a>
</body>
选择器3：class选择器
<style type="text/css">
.one{
color:green;
}
</style>
</head>
<body>
<p>This is my HTML page.</p>
<p class="one" >This is my HTML page.</p>
<a class="one" > This is my HTML page. </a><br>
<a> This is my HTML page. </a>
</body>
选择器4：伪类选择器:主要配合a标签、但其他标签也可以使用
选择标签的某个状态.需要配合其他选择器来使用
l link 未访问过
v visited 访问过
h hover 悬浮
a active 激活,点击
<style type="text/css">
a:link{
color:green;
}
a:visited{
color:black;
}
a:hover{
color:white;
}
a:active{
color:pink;
}
</style>
</head>
<body>
<a href="01-结合方式1.html" >点我</a>
</body>
</html>
选择器5：嵌套组合选择器
<style type="text/css">
#one,.two,font{
color:green;
}
</style>
</head>
<body>
<a id="one" >点我</a>
<p class="two" >点我</a>
<font>点我</font>
</body>
</html>
当然这些选择器不是绝对、还要不少其他选择器方式，但是作为最常用的选择器这些必须掌握
字体属性
对于看过前面html的，相比都了解font的有那些属性了吧，比如颜色、大小、等
但是实际开发中使用的却是css
<style type="text/css">
p{
font-family: 黑体;
font-size: 25px;
font-style:oblique;
font-weight:900;
font-variant:small-caps;
}
/* p{
font:oblique small-caps 900 25px 黑体;
} */
</style>
</head>
<body>
<p class="two" >
hello itcast! itheima!
床前明月光,疑是地上霜</a>
</body>
</html>
而且css还提供了html字体属性之外的属性，虽然html也可以实现，但是为了页面清晰，还是css比较好
对于上述fon标签多个属性值不建议使用，必须要保证其顺序，否则无效果
背景属性
<style type="text/css">
/*
background : background-color || background-image || background-repeat || background-attachment || background-position
body{
background-image: url("mn.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
*/
body{
background: url("mn.jpg") no-repeat fixed center;
}
</style>
</head>
<body>
<p>
HelloWorld<br>
HelloWorld<br>
HelloWorld<br>
HelloWorld<br>
HelloWorld<br>
</p>
<p>
HelloWorld<br>
HelloWorld<br>
HelloWorld<br>
HelloWorld<br>
HelloWorld<br>
</p>
</body>
</html>
background-image：url("")，设置图片路径
background-repeat：no，设置图片是否平铺
background-attachment：fixed，设置图片是否固定
使用background需要注意顺序，否则效果显示不出来
块和行标签
<!--
块级标签 => 占据的范围是一行
div p ul li ol,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
行内标签 => 占据的是行中的一部分
span a font b .......................
-->
</head>
<body>
helloworld<div>helloworld</div>helloworld<br>
helloworld<span>helloworld</span>helloworld
</body>
</html>
盒子模型
编程世界：一切皆对象
美工世界：一切皆盒子
<style type="text/css">
/*
盒子模型的属性
一. 边框系类属性
二. 尺寸属性
三. 边距
*内边距
*外边距
border-color:边框颜色
border-width:边框宽度
border-style:边框样式
border-color: red;
border-width: 1px;
border-style: solid;
margin-left:100px;左外边距
margin-top:100px;
padding-left:100px; 左内边距
padding-top:100px; 上内边距
注意:内边距会延长所在盒子的长或宽
*/
div{
border: 1px solid red;
}
#one{
height: 300px;
width: 300px;
}
#two{
height: 100px;
width: 100px;
margin-left:100px;
margin-top:100px;
}
</style>
</head>
<body>
<div id="one" >
<div id="two"></div>
</div>
</body>
</html>
盒子模型边距
<style type="text/css">
/*
padding : 1个值 上下左右
2个值 1.上下 2.左右
3个值 1.上 2.左右 3.下
4个值 1.上 2.右 3.下 4.左
*/
div{
border: 1px solid red;
height: 300px;
width: 300px;
}
#one{
padding: 10px 30px 50px 80px;
}
</style>
</head>
<body>
<div id="one" >
<div id="two"></div>
</div>
</body>
</html>
自己曾仔细想了想，到底要不要说这个呢，最后决定还是说了吧！
定位：
position 1
<style type="text/css">
.qq {
width: 100px;
height: 100px;
background-color: #f00;
/*固定定位
固定地位元素 相对于浏览器窗口进行定位 不管浏览器如何滚动
这个元素它的位置不会发生改变
定位的坐标 默认在浏览器左上方 或在其父元素中
* */
/*特点：1、脱标 2、层级比较高 在浏览器上面 所以他会压盖在标准文档流的元素上面 3、不管浏览器如何滚动 固定定位元素的位置不会发生改变*/
position: fixed;
left: 10px;
/*表示离左边有10个像素*/
top: 10px;
/*表示离上面有10个像素*/
</style>
</head>
<body>
<div class="qq"></div>
<p>
HelloWorld<br> HelloWorld
<br> HelloWorld
<br> HelloWorld
<br> HelloWorld
<br>
</p>
<p>
HelloWorld<br> HelloWorld
<br> HelloWorld
<br> HelloWorld
<br> HelloWorld
<br>
</p>
</body>
</html>
position2
<style type="text/css">
*{
padding:0;
margin: 0;
}
.box{
width: 600px;
border: 1px solid #000;
margin: 100px auto;
}
.div1{
width: 100px;
height: 100px;
background-color: #f00;
}
.div2{
width: 100px;
height: 100px;
background-color: #0f0;
/*相对定位 位置没有发生变化 没有脱标
如果没有给相对定位设置定位坐标值 它的位置不会发生改变 坐标值可负
top：100px=bottom：-100px
如果设置了定位的坐标 相对定位元素的位置就会发生改变
如果一旦设置了定位 相对定位元素它会在老家留下一个坑 因为在老家留下
一个坑所以他本身很少使用。 相对定位主要作用为了配合绝对定位来使用的
因此很少使用*/
position: relative;
left: 100px;
top:100px;
}
.div3{
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<!--div.box>div.div$*3-->
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
position3
<style type="text/css">
*{
padding:0;
margin: 0;
}
.box{
width: 600px;
border: 1px solid #000;
margin: 100px auto;
/*gradefather 随着box的fixed的脱标 失去内容 没有高度*/
/*box的fixed脱标失去实现对窗口定位*/
/*position: fixed;*/
/*子绝父相*/
/*子绝父绝
子绝父固*/
/*背景除外*/
/*凡是在网页中 一个元素压盖在另一个元素的上面 这种 一般都是使用绝对定位 非常重要*/
/*position: relative;*/
}
.div1{
width: 100px;
height: 100px;
background-color: #f00;
}
.div2{
width: 100px;
height: 100px;
background-color: #0f0;
/*绝对定位 1、 脱标 2、不占用空间 他会压盖住标准文档中的元素
* 就近原则
他会判断其父元素有没有定位属性 如果没有设置它找爷爷元素 以此类推 最后找到body元素*/
position: absolute;
/*left: 0;
bottom: 0;*/
left: 40px;
top: -40px;
}
.div3{
width: 100px;
height: 100px;
background-color: #00f;
}
.gradefather{
width: 800px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
}
</style>
</head>
<body>
<div class="gradefather">
<!--div.box>div.div$*3-->
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</div>
</body>
</html>
1438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
