1.浏览器默认样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
*浏览器为在页面中没有样式时，也可以让页面有一个比较好的显示效果
*所以为很多元素设置一些默认的margin和padding
*而它的这些默认样式，正常情况下不需要使用
*所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统都去掉
*/
/*
*清除浏览器的默认样式
*/
*{
margin：0；
padding：0；
}
.box1 {
width:100px;
height:100px;
background-color:#bfa;
}
p{
background-color:yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<ul>
<li>无序列表</li>
</ul>
</body>
</html>
2.文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*
*text-transform可以用来设置文本的大小写
* 可选值：
* none 默认值，该怎么显示就怎么显示，不做任何处理
* capitalize 单词的首字母大写，通过空格来识别单词
* uppercase 所有的字母都大写
* lowercase 所有的字母都小写
*
*/
text-transform：lowercase；
}
.p2{
/*
*text-decoration可以用来设置文本的修饰
* 可选值：
* none 默认值，不添加任何修饰，正常显示
* underline 为文本添加下划线
* overline 为文本添加上划线
* line-through 为文本添加删除线
*/
text-decoration：line-through；
}
a{
/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
*/
text-decoration：none；
}
.p3{
/*
*letter-spacing可以指定字符间距
* letter-spacing:0px;
*word-spacing可以设置单词之间的空格大小
*word-spacing：120px；
*/
}
.p4{
/*
*text-align用于设置文本的对齐方式
*可选值：
* left 默认值，文本靠左对齐
* right 文本靠右对齐
* center 文本居中对齐
* justify 两端对齐
* 通过调整文本之间的空格大小来达到一个两端对齐的目的
*/
text-align：justify；
}
.P5{
/*
*text-indent用来设置行缩进
* 当给它指定一个正值时，会自动向右侧缩进指定的像素
* 如果为它指定一个负值，则会向左侧移动指定的像素
* 通过这种方式可以将一些不想显示的文字隐藏起来
*/
text-indent：2em；
</style>
</head>
<body>
<a href="#">我是超链接</a>
<p class="p1">
"we should start back".
</p>
<p class="p2">
"we should start back".emmm。。。
</p>
<p class="p3">
"we should start back".em。。。
</p>
<p class="p4">
"we should start back".em。。。
</p>
<p class="p5">
"we should start back".em。。。
</p>
</body>
</html>
3.RGB值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width:100px;
height:100px;
/*
*颜色单位：
* 在css可以直接使用颜色的单词来表示不同的颜色
* 红色：red，蓝色：blue，绿色：green
*也可以使用RGB值来表示不同的颜色
* 所谓的RGB值指的是通过Red Green Blue三元色
* 通过这三种颜色的不同的浓度，来表现不同的颜色
* 例子：rgb（红色的浓度，绿色的浓度，蓝色的浓度）
* 颜色的浓度需要一个0~255之间的值255表示最大，0表示没有
* 浓度也可以采用一个百分数来设置，需要一个0%~100%之间的数字
* 也可以使用十六进制的rgb值来表示颜色，原理和上边的rgb原理一样
* 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
* 每组表示一个颜色
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00~ff
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中的155
* 红色：
* #ff0000
* 像这种两位重复的颜色，可以简写
* 比如：#ff0000可以写成#f00
* #abc #aabbcc
*/
backgroun-color：red；
backgroun-color：rgb（161，187，253）；
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
4.修复ie6png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width:200px;
height:200px;
background-image:url(img/3.png);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<!--
在ie6中对图片格式png24支持度不高
如果使用的图片格式是png24，则会导致透明效果无法正常显示
解决办法：
1. 可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰度有所下降
2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件
然后再写一下简单的js代码，来处理这个问题
-->
<div class="box1"></div>
<div class="box2"></div>
<img src="img/3.png"/>
<!--在body标签的最后引入外部的js文件-->
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8-min.js"></script>
<!--再创建一个新的script标签，并且编写一些js代码-->
<script type="textt/javasript">
DD_belatedPNG.fix("div,img");
</script>
</body>
</html>
5.文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
em和strong
这两个标签都表示一个强调的内容，
em主要表示语气上的强调
strong表示强调的内容，比em更强烈，默认使用粗体显示
<p>
今天天气<em>真不错</em>!
</p>
<p>
<strong>
注意：如果你不认真读书。
</strong>
</p>
<!--
i标签中的内容会以斜体显示
b标签的内容会以加粗显示
-->
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p>
<!--
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如，合同中小字，网站的版权声明都可以放到small
-->
<p>
我是p标签中的内容<small>我是small标签中的内容</small>
</p>
<!--
网页中所有的如书名号的内容都可以使用cite标签，表示参考的内容
比如，书名，歌名，话剧名，电影名
-->
<p>
<cite>《论语》</cite>是最喜欢的一本书
</p>
<!--
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
-->
<p>
子曰：<p>学而时习之不亦说乎！</p>
</p>
<div>
子曰：
<blockquote>
有朋自远方来，乐呵乐呵！
</blockquote>
</div>
<!--
使用sup标签来设置一个上标
-->
<p>2<sup>2</sup></p>
<p>赵薇<sup><a href="#">[1]</a></sup></p>
<!--
sub标签用来表示一个下标
-->
<!--
使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线
-->
<p>
<del>17.75</del><br />
15.54<br />
</p>
<!--
ins表示一个插入的内容
ins中的内容，会自动添加下划线
-->
<p>
我们的老师真<ins>好啊</ins>!
</p>
<!--
需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
一般结合pre和code来表示一段代码
-->
<pre>
<code>
window.οnlοad=function(){
alert("hello world");
};
</code>
</pre>
</body>
</html>
6.字体分类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-family：arial,微软雅黑,华文彩云，serif；
}
</style>
</head>
<body>
<!--
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）
可以将字体设置为这些大的分类，当设置为打的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体
-->
<p style="font-size:50px;font-family:serif;">我是一段文字abcdefg</p>
</body>
</html>
7.字体一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*设置字体颜色，使用color来设置文字的颜色*/
color：red；
/*
设置文字的大小，浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小
在页面中，每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度，并不是字体的带线啊哦
一般情况下，文字都要比这个格要小一点，也有时会比格大
根据字体的不同，显示效果也不同
*/
font-size：30px；
/*
通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体
如果字体不支持，则使用默认字体
该样式可以同时指定多个字体，多个字体之间使用，分开
当采用多个字体时，该浏览器会优先使用前边的字体
如果没有再尝试下一个
*/
font-famliy：arial，微软雅黑；
.p2{
color:red;
font-size:30px;
font-family:"微软雅黑";
/*
font-style可以用来设置文字的斜体
可选值：
normal,默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分
一般我们只会使用italic
*/
font-size:italic；
/*
*font-weight可以用来设置文本的加粗效果
可选值：
normal，默认值，文字正常显示
bold，文字加粗显示
*该样式也可以指定100-900之间的9个值
但是由于用户的计算机往往没有这么多级别的字体，所以不能达到想要的效果
也就是200有可能比100粗，300有可能比200粗，也有可能是一样的
*/
font-weight：900；
/*
*
*font-variant可以用来设置小型大写字母
可选值：
normal，默认值，文字正常显示
small-caps，文本以小型大写字母显示
*小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母的大小小一些
*
*/
font-variant：small-caps；
}
.p2{
/*设置一个文字大小*/
font-size：50px；
/*设置一个字体*/
font-family：华文彩云；
/*设置文字斜体*/
font-style：italic；
/*设置文字的加粗*/
font-weight：bold；
/*设置一个小型大写字母*/
font-variant：small-caps;
}
.p3{
/*
*在css中正为我们提供了一个样式叫font
* 使用这样式可以同时设置字体相关的所有样式
* 可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
*
*使用font设置字体样式时，斜体，加粗，大小字母，没有顺序要求,可写可不写，如果不写则使用默认值
*大小必须是倒数第二个样式
*实际上使用简写属性也会有一个比较好的性能
*/
font:italic small-caps bold 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="p1">
我是一个p标签，abcdefg
</p>
</body>
</html>
8.样式继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size：30px；
}
</style>
</head>
<body>
<!--
像可以继承父亲的遗产一样，在css中，祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式
但是并不是所有的样式都会被子元素继承，比如：背景相关的样式都不会被继承，边框相关的样式，定位相关的
-->
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
<span>我是p元素外的span中的文字</span>
<p>我是一个段落</p>
<p>我是一个段落</p>
</body>
</html>
9.行间距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 在css并没有为我们提供一个直接设置行间距的方式
* 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
* 使用line-height来设置行高
* 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高
* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
*
* 行间距=行高-字体大小
*/
.p1{
font-size:20px;
/*
*通过设置line-height可以间接的设置行高
*可以接收的值：
* 1.直接接受一个大小
* 2.可以指定一个百分数，则会相对于字体去计算行高
* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数
*/
line-height：2；
}
.box{
width:200px;
height:200px;
background-color:#bfa;
/*
*对于单行文本来说，可以将行高设置为和父元素的高度一致，
* 这样可以是单行文本在父元素中垂直居中
*/
line-height：200px；
}
.p2{
/*
* 在font中也可以指定行高
* 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定，则会使用默认值
*/
font:30px/50px "微软雅黑“；
}
</style>
</head>
<body>
<p class="p1">
在我的后院，可以看见墙外有两株树。
</p>
</body>
</html>
10.背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
*background
*通过该属性可以同时设置所有背景相关的样式
*没有顺序要求，没有数量要求，不设置会采用默认值
*background:#bfa url(img/3.png) center center no-repeat fixed;
*/
.box1{
width:500px;
height:500px;
margin:0 auto;
/*设置背景样式*/
background-color:#bfa；
/*
*使用background-image来设置背景图片
*如果背景图片大于元素，默认会显示图片的左上角
*如果背景图片和元素一样大，则会将背景图片全部显示
*如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
*
*可以同时为一个元素指定背景颜色和背景图片
*这种背景颜色将会作为背景图片的底色
*一般情况下设置背景图片都会同时指定一个背景颜色
*/
background-image：url(img/2.jpg);
/*
*background-repeat用于设置背景图片的的重复方式
*可选值：
* repeat 默认值，背景图片会双方向重复（平铺）
* no-repeat 背景图片不会重复，有多大就显示多大
* repeat-x 背景图片沿水平方向重复
* repeat-y 背景图片沿垂直方向重复
*/
background-repeat：repeat-y；
}
</style>
<!-- <link rel="styleheet" type="text/css" href="css/style.css/>-->
</head>
<body>
<div class="box1"></div>
</body>
</html>
11.背景二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width:500px;
height:500px;
margin:0 auto;
background-color:#bfa;
background-image:url(img/3.png);
background-repeat:no-repeat;
/*
*背景图片默认在左上角显示
*通过background-position可以调整背景图片在元素中的位置
*可选值：
* 该属性可以使用top right bottom left center中的两个值来指定一个背景图片的位置
* top left 左上
* bottom right 右下
* 如果只给出一个值，则默认第二个值是center
*也可以直接指定两个偏移量
* 第一个值是水平偏移量
如果指定的是一个正值，则图片会向右移动指定的像素
如果指定的是一个负值，则图片会向左移动指定的像素
* 第二个值是垂直偏移量
如果指定的是一个正值，则图片会向下移动指定的像素
如果指定的是一个正值，则图片会向上移动指定的像素
* background-position：200px 100px；
*/
}
body{
background-image：url(img/3.png);
background-repeat:no-repeat;
/*
*background-attachment用来设置背景图片是否随页面一起滚动
* 可选值：
* scroll 默认值，背景图片随着窗口滚动
* fixed 背景图片会固定在某一位置，不随页面滚动,背景图片的定位永远相对于浏览器的窗口
*不随窗口滚动的图片，一般设置给body，不设置给其他元素
*/
background-attachment：scroll；
</style>
</head>
<body style="height:5000px;">
<div class="box1"></div>
</body>
</html>
13.简单布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除默认样式*/
*{
margin：0；
padding：0；
}
/*设置头部div*/
.header{
/*设置一个宽度*/
width：1000px；
/*设置一个高度*/
height：150px；
/*设置一个背景颜色*/
background-color：yellowgreen；
/*设置居中*/
margin：0 auto；
}
/*设置一个content*/
.content{
/*设置一个宽度*/
width：1000px；
/*设置一个高度*/
height：400px；
/*设置一个背景颜色*/
background-color：orange；
/*设置居中*/
margin：10px auto；
}
/*设置content中小div的样式*/
.left{
width:200px;
height:100px;
background-color:skyblue;
/*向左浮动*/
float:left;
}
.center{
width:580px;
height:100px;
background-color:yellow;
/*向左浮动*/
float:left;
/*设置水平外边距*/
margin：0 10px；
}
.right{
width:200px;
height:100px;
background-color:pink;
/*向左浮动*/
float:left;
}
/*设置一个footer*/
.header{
/*设置一个宽度*/
width：1000px；
/*设置一个高度*/
height：150px；
/*设置一个背景颜色*/
background-color：red；
/*设置居中*/
margin：0 auto；
}
</style>
</head>
<body>
<!-- 头部div -->
<div class="header"></div>
<!-- 主题内容div -->
<div class="content">
<!--左侧div-->
<div class="left"></div>
<!--中间div-->
<div class="center"></div>
<!--右侧div-->
<div class="right"></div>
</div>
<!-- 底部信息div -->
<div class="footer"></div>
</body>
</html>
716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
