当前位置：首页 > Web开发 > 正文

CSS二之调治样式

2024-03-31 Web开发

标签：

CSS二之调节样式一、补充

选择器优先级补充

mycss1.css

/*p {*/ /* color: green;*/ /*}*/ #d1 { color: red; }

选择器优先级

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>       <style> /*.c1 {*/ /* color: blue;*/ /*}*/ /*p {*/ /* color: deeppink;*/ /*}*/ #d1 { color: red; } </style> </head> <body>  <p id="d1" class="c1" style="color: yellow">今天周五啦马上要放假啦好开心啊</p>   </body> </html>

技术图片

二、CSS调解样式

宽和高

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 400px; } span { width: 200px; height: 400px; } </style> </head> <body> <div style="color: deeppink"> 效率第一 </div> <span style="color: darkorange"> 坚持就是胜利 </span> </body> </html>

技术图片

字体属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { font-family: "Microsoft New Tai Lue", monospace; font-size: 48px; font-weight: lighter;/字重/ /*color: yellow;*/ /*color: #ffffff;*/ /*color: rgb(255,103,0);*/ color: rgba(255,100,0,0.4);/*多了个透明度*/ } </style> </head> <body> <p>床上明月光...地上鞋俩双...啊床受不了</p> </body> </html>

技术图片

文字属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*text-align: justify; !*两端对齐*!*/ /*text-decoration: underline; !*文本装饰下划线*!*/ /*text-decoration: line-through; !*定义穿过文本下的一条线。*!*/ text-decoration: overline;/*定义文本上的一条线。*/ font-size: 16px; /*字体大小*/ text-indent: 32px; /*首行缩进2个字符*/ } a { text-decoration: none;/*默认。定义标准的文本*/ color: yellow; } </style> </head> <body> <p>加油努力奋斗</p> <a href=http://www.mamicode.com/"http:/www.mzitu.com">点我哦有你好看</a> </body> </html>

技术图片

背景属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div {*/ /* background-color: black;*/ /* color: white;*/ /*}*/ .c1 { width: 1000px; height: 1000px; /*background-color: red;*/ /*background-image: url("111.png");*/ /*!*background-repeat: no-repeat;!*不填充整个页面*!*!*/ /*!*background-repeat: repeat-x;!*只填充x轴*!*!*/ /*background-repeat: repeat-y;!*只填充y轴*!*/ /*background-position: 100px 10px;!*第一个调节左右第二个调节上下*!*/ /*支持简写*/ background: center center url("111.png") yellow no-repeat; } </style> </head> <body> <div style="font-size: 32px" class="c1">啊亚峰真的好帅啊</div> </body> </html>

技术图片

图片背景应用案列之图片背景固定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { background-image: url("111.png"); background-attachment: fixed;/*将图片固定在背景中*/ } </style> </head> <body> <div style="height: 800px;background-color: red"></div> <div style="height: 800px;background-color: grey"></div> <div style="height: 800px" id="d1"></div> <div style="height: 800px;background-color: yellow"></div> </body> </html>

技术图片