css小白也能懂-2
css背景
背景色
可以使用background属性为元素设置背景色。
把元素的背景设置为灰色
p {background-color: gray;}
如果希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p {background-color: gray; padding: 20px;}
实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {background-color: gray;}
</style>
</head>
<body>
<div id="box">
<!-- 若body中有内容，则宽为浏览器宽，高为内容的高 -->
<p>p标签中内容的背景颜色为灰色，若body中没有内容，灰色背景默认宽为浏览器的宽度，高为0</p>
</div>
</body>
</html>
运行结果：
实例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<div id="box">
<!-- 若body中有内容，则宽为浏览器宽，高为内容的高，本例中由于上下各加了40个像素的内边距所以高加40。 -->
<p>p标签中内容的背景颜色为灰色，若body中没有内容，灰色背景默认宽为浏览器的宽度，高为0</p>
</div>
</body>
</html>
运行结果：
注意：background-color不能继承。如果一个元素没有指定背景色，那么背景就是透明的。
背景图像
要把图像放入背景，需要使用 background-image。 background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
background-image: url(img/李白.jpg);
背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
body
{
background-image: url(img/李白.jpg);
background-repeat: repeat-y;
}
背景定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url(img/李白.jpg);
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。如：top、bottom、left、right 和 center。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
body
{
background-image:url(img/李白.jpg);
background-repeat:no-repeat;
background-position:50px 100px;
}
实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
height:860px;
background-image: url(img/李白.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>
注意background插入背景和用img插入图片的区别。
</p>
</body>
</html>
运行结果：
实例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 区别在head和body中插入背景的不同 */
/* 开辟宽为1600个像素，高为860个像素的空间。设置背景颜色为蓝色。 */
/* 插入图片，图片的大小为宽650个像素，高860个像素 */
/* 设置背景为不重复插入,且背景图像居中放置 */
p{ width:1600px;
height:860px;
background-color:skyblue;
background-image: url(img/李白.jpg);
/* 宽在前，高在后 */
background-size: 650px 860px ;
background-repeat:no-repeat;
background-position: center;
}
</style>
</head>
<body>
<p>
注意background插入背景和用img插入图片的区别。
</p>
</body>
</html>
运行结果：
注意：css用background插入背景和用img插入的不同。在使用background时若body中有内容，内容可以置于图片之上，在img插入图片时会占用资源数。
css伪类
设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
伪类的语法：
:link - 普通的、未被访问的链接
:visited - 用户已访问的链接
:hover - 鼠标指针位于链接的上方
:active - 链接被点击的时刻
:focus向拥有键盘输入焦点的标签添加样式
例如：
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: darkgray;
}
a:hover {
color: #FF7F50;
}
a:active {
color: blueviolet;
}
.p1:hover {
color: #00FFFF;
font-family: 仿宋;
}
.b1:hover {
color: #FF0000;
}
.t1:focus {
color: #0000FF;
background-color: #A9A9A9;
}
.t2:hover {
background-color: #FF7F50;
color: #0000FF;
font-size: ;
}
.t2:active {
background-color: aqua;
color: #8A2BE2;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com">腾讯</a>
<p class="p1">这是在伪类中的一个段落</p>
<input type="button" value="按钮" class="b1" />
<input type="text" class="t1" />
<table class="t2" border="1" width="500" height="350">
<tr>
<td>CSS</td>
<td>伪类</td>
<td>未访问</td>
</tr>
<tr>
<td>访问过</td>
<td>悬停</td>
<td>点击</td>
</tr>
</table>
</body>
</html>
运行结果：
注意：visited放在hover之前
active必须位于hover之后
css列表
列表类型
在一个无序列表中，列表项的标志是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型，可以使用属性 list-style-type
ul {list-style-type : square}
上面的声明把无序列表中的列表项标志设置为方块。
列表项图像
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用list-style-image属性做到：
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值，就可以使用图像作为标志。
列表标志位置
这是利用list-style-position完成的。
实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.u1>li {
/* list-style-type: none;
list-style-position:inside;
text-align: center;
list-style-image: url(img/捕获.PNG);
上方所注释的四行内容与下面两行等价*/
list-style: none url(img/捕获.PNG) inside;
text-align: center;
}
.u2>li {
list-style-image: url(img/捕获2.PNG);
}
</style>
</head>
<body>
<ul class="u1">
<li>列</li>
<li>列</li>
<li>列</li>
<li>列</li>
</ul>
<ul class="u2">
<li>列</li>
<li>列</li>
<li>列</li><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.u1>li {
/* list-style-type: none;
list-style-position:inside;
text-align: center;
list-style-image: url(img/捕获.PNG);
上方所注释的四行内容与下面两行等价*/
/* ist-style-position:inside;指列表项目标记放置在文本以内，且环绕文本根据标记对齐。*/
list-style: none url(img/捕获.PNG) inside;
text-align: center;
}
/* list-style-position的值默认为outside 指保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。*/
.u2>li {
list-style-image: url(img/捕获2.PNG);
}
</style>
</head>
<body>
<ul class="u1">
<li>列</li>
<li>列</li>
<li>列</li>
<li>列</li>
</ul>
<ul class="u2">
<li>列</li>
<li>列</li>
<li>列</li>
<li>列</li>
</ul>
</body>
</html>
<li>列</li>
</ul>
</body>
</html>
运行结果：
透明
定义透明效果的属性是opacity
opacity属性设置标签的不透明级别值为1。
规定不透明的从0.0（完全透明）到1.0（完全不透明）。
实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img:hover{
opacity: 0.7;
}
img:active{
opacity: 0.3;
}
</style>
</head>
<body>
<img src="img/李白.jpg" />
</body>
</html>
css标签分类
css标签可以分为块级标签，行级标签和行级块标签
块级标签：无论内容多少都会独占一行
例如<p>、<h1> 、<ul>、 <ol>、 <hr/>等
行级标签：只占自身大小的标签，不会占一行
例如<font> 、<b> 、<i> 、<a>等
行级块标签：可设置大小不占一行
例如<input/> 、<img>等
注意：一般情况下使用块级标签包含行级标签，不使用行级标签包含块级标签。
a可以包含任何标签，除去a本身
p标签不可以包含任何的块标签
可以通过设置宽高后观察标签大小是否变化来判断是行级标签，块级标签或者是行级块标签。
Display
通过display样式可以修饰标签的类型。
可选值：
block：设置标签为块标签
inline：设置标签为行标签
inline-block：设置标签为行级块标签
none：隐藏标签（标签在页面中完全消失）
实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
修改标签的类型
-->
<!-- 行级标签 -->
<p>明月几时有，</p>把酒问青天。
<!-- 行级标签 -->
<p style="display: inline;">明月几时有，</p>把酒问青天。
<!-- 行级块标签 -->
<p style="display: inline-block;" >明月几时有，</p>把酒问青天。
<p style="display: inline-block;width:5000px;" >明月几时有，</p>把酒问青天。
<!-- 让标签中的内容在网页中消失，不占网页空间 -->
<p style="display:none">明月几时有，</p>把酒问青天。
<!-- 块级标签 -->
<p style="display:block;" >明月几时有，把酒问青天。</p>
<!-- 可以通过设置宽高后观察标签大小是否变化来判断是行级标签，块级标签或者是
行级块标签，变化则为行级标签
-->
</body>
</html>
运行结果：
div和span
div标签
div是块级标签，可以放置任何标签。
div没有任何附加功能，给了什么属性就能变成什么样。
div主要的作用是被用来布局网页。
span标签
span是行级标签
span 没有任何附加功能，给了什么属性就能变成什么样。
span标签被用来选中文档中的文字。
3921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
