css小白也能懂-2
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标签被用来选中文档中的文字。
本文地址:https://blog.csdn.net/crraxx/article/details/109395674
上一篇: CSS简单练习02