1. 首页首页
  2. 科技前沿科技前沿

2025年css小白也能懂-2

科技前沿 • • 阅读 51

css小白也能懂-2css 小白也能懂 2 css 背景 背景色 可以使用 background 属性为元素设置背景色 把元素的背景设置为灰色 p background color gray 如果希望背景色从元素中的文本向外少有延伸 只需增加一些内边距 p background color gray padding 20px

大家好，我是讯享网，很高兴认识大家。

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..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标签被用来选中文档中的文字。

小讯
上一篇 2025-02-14 19:54
下一篇 2025-04-07 12:45

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/39407.html