PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > css的引入方式以及选择器

css的引入方式以及选择器

Jason Pu?
Jason Pu? 原创
2020年12月16日 13:25:16 783浏览

CSS的三种引入方式:

CSS的引入方式共有三种:行内样式、内部样式表、外部样式表,各自的特点和使用方法如下:

内部样式: 仅对当前文档的元素有效,使用 style 标签
外部样式: 适用于所有引入了这个css样式表的html文档,使用 link 标签
行内样式: 仅适用于当前的页面中的指定的元素,使用style属性

以下我以制作一个宽高为200PX,带有黑色边框的天蓝色盒子为例来演示三种引入方式;
实现的效果如下:

1:内部样式代码:

  1. <title>内部样式</title>
  2. <style>
  3. .box{
  4. height: 200px;width: 200px;
  5. border: 1px solid black;
  6. background-color: skyblue;
  7. text-align: center;
  8. font-size: 30px;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div class="box">
  14. instanse
  15. </div>
  16. </body>

2.外部样式:

  1. <title>内部样式</title>
  2. <link rel="stylesheet" href="instanse.css">
  3. </head>
  4. <body>
  5. <div class="box">
  6. instanse
  7. </div>

3.行内样式:

  1. <title>内部样式</title>
  2. </head>
  3. <body>
  4. <div style="height: 200px;width: 200px; border: 1px solid black;background-color: skyblue;text-align: center;font-size: 30px;">
  5. instanse
  6. </div>

CSS的选择器:

我们大致把CSS选择器分为三类:

一.简单选择器**

标签选择器(需要添加元素的标签,例如div,h1,header…)
类选择器(.)
ID选择器(#)
实例:

  1. <title>css选择器</title>
  2. <style>
  3. /* 标签选择器: */
  4. li{
  5. /* 所有li变红 */
  6. background-color:red;
  7. }
  8. /* 类选择器: */
  9. .active{
  10. /* case1 case2变蓝 */
  11. background-color:blue;
  12. }
  13. /* id选择器: */
  14. #example{
  15. /* case3变成粉红: */
  16. background-color:pink;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <ul>
  22. <li class="active">case1</li>
  23. <li class="active">case2</li>
  24. <li id="example">case3</li>
  25. <li>case4</li>
  26. <li>case5</li>
  27. <li>case6</li>
  28. </ul>
  29. </body>

二.上下文选择器:

后代选择器: 所有层级:空格
子元素选择器: 仅父子层级:>
同级相邻选择器: 仅选中与之相邻的第一个兄弟元素:+
同级所有选择器: 选中与之相邻的后面所有兄弟元素:~
实例:

  1. <style>
  2. /* 1.后台选择器: */
  3. ul li{
  4. background-color:red;
  5. }
  6. /* 2.子元素选择器: */
  7. ul>li>ul{
  8. background-color:green;
  9. }
  10. /* 3.同级相邻选择器: 选中相邻的第一个兄弟元素*/
  11. .start+li{
  12. background-color: blue;
  13. }
  14. /* 4.同级所有选择器: 选中相邻的后面所有兄弟元素 */
  15. .brother~li{
  16. background-color:yellow;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <ul>
  22. <li>case1
  23. <ul>
  24. <ul>1</ul>
  25. <ul>2</ul>
  26. <ul>3</ul>
  27. </ul>
  28. </li>
  29. <li class="start">case2</li>
  30. <li>case3</li>
  31. <li class="brother">case4</li>
  32. <li>case5</li>
  33. <li>case6</li>
  34. </ul>
  35. </body>

运行结果如下:

三.伪类选择器:

定义和用法:nth-of-type(n) 选择器匹配第 N 个元素,n 可以是数字、关键词或公式,使用公式 (an + b)描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值
和nth-child的不同:nth-child是选取父元素的第 N 个子元素,与类型无关。和nth-child的不同:nth-child是选取父元素的第 N 个子元素,与类型无关。
实例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>伪类选择器</title>
  7. <style>
  8. /* 选择第3个: */
  9. ul li:nth-of-type(3){
  10. background-color:green;
  11. }
  12. /* 选择双数行,n2或者直接使用语法糖even*/
  13. ul li:nth-of-type(2n){
  14. background-color:red;
  15. }
  16. /* 选择单数行:2n+1或2n-1也可以直接使用语法糖odd */
  17. ul li:nth-of-type(2n+1){
  18. background-color:blue;
  19. }
  20. /* 选择第一行: */
  21. ul li:first-of-type{
  22. background-color: pink;
  23. }
  24. /* 选择最后一行: */
  25. ul li:last-of-type{
  26. background-color: black;
  27. }
  28. /* 如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现 */
  29. </style>
  30. </head>
  31. <body>
  32. <ul>
  33. <li>case1</li>
  34. <li>case2</li>
  35. <li>case3</li>
  36. <li>case4</li>
  37. <li>case5</li>
  38. <li>case6</li>
  39. </ul>
  40. </body>
  41. </html>

运行结果如下:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议