Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2015作业-css的基本语法及三种样式引入方式，选择器的应用
Blogger Information
Blog 37
fans 2
comment 0
visits 26510
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2015作业-css的基本语法及三种样式引入方式，选择器的应用
世纪天城
Original
588 people have browsed it

css的基本语法及三种样式引入方式

  1. 任何元素如果想引入到html文档中,必须要使用一个适当的标签,css也不例外 通过style标签引入的css规则,仅适用于当前的页面(html文档) css: 层叠样式表,用来设置页面中元素的样式,布局

2.h1: 选择器 {…}: 声明块,由一个或多个由分号分隔开的样式声明构成 h1 + {…}: 选择器 + 声明块 = 规则

css引入方式
1.style为css引入方式:内部样式>为css引入方式:内部样式 标签

内部样式代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>css引入方式:内部样式</title>
  7.     <!-- 1. 内部样式 <style> -->
  8.     <style>
  9.         h1 {
  10.             /* 声明: 属性和值组成 */
  11.             color: violet;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <h1>css引入方式:内部样式</h1>
  19.     <p>style为css引入方式:内部样式 标签</p>
  20. </body>
  22. </html>

2.css引入方式:外部样式表/公共样式表/共享样式表
使用link 标签引入外部公共样式表

<link rel="stylesheet" href="css/style.css">

标签引入外部公共样式表代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>css引入方式:外部样式表/公共样式表/共享样式表</title>
  7.     <!-- 使用link 标签引入外部公共样式表 -->
  8.     <link rel="stylesheet" href="css/style.css">
  9. </head>
  11. <body>
  12.     <h3>css引入方式:外部样式表/公共样式表/共享样式表</h3>
  13. </body>
  15. </html>

3.css引入方式:style属性设置样式
通过style属性给指定元素自定义/定制样式

style属性设置样式代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>css引入方式:style属性设置样式</title>
  7. </head>
  9. <body>
  10.     <h1>css引入方式:style属性设置样式</h1>
  11.     <!--通过style属性给指定元素自定义/定制样式 -->
  12.     <h1 style="color:teal">css引入方式:style属性设置样式</h1>
  13. </body>
  15. </html>

样式表的模块化:公共部分进行分离
@import用于引入模块化样式表

例如：

导入公共页眉 @import url(css/header.css);
导入公共页脚 @import 'css/footer.css';

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

选择器1: 简单选择器

标签选择器, 返回一组 

  1.     li{
  2.         background-color: chartreuse;
  3.     }

类选择器: 返回一组

  1.     .li{
  2.         background-color: chocolate;
  3.     }

id选择器: 返回一个 

  1.     #app3{
  2.         background-color: crimson;
  3.     }
  4.     /* 属性选择器: class, id  */

代码：

  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>选择器1: 简单选择器</title>
  8.     <style>
  9.         /* 1. 标签选择器, 返回一组 */
  10.         li{
  11.             background-color: chartreuse;
  12.         }
  13.         /* 2. 类选择器: 返回一组 */
  14.         .li{
  15.             background-color: chocolate;
  16.         }
  17.         /* 3. id选择器: 返回一个 */
  18.         #app3{
  19.             background-color: crimson;
  20.         }
  21.         /* 属性选择器: class, id  */
  22.     </style>
  23. </head>
  24. <body>
  25.        <ul>
  26.            <li>app1</li>
  27.            <li class="li">app2</li>
  28.            <li id="app3">app3</li>
  29.            <li>app4</li>
  30.            <li class="li">app5</li>
  31.            <li class="li">app6</li>
  32.            <li>app7</li>
  33.            <li>app8</li>
  34.            <li>app9</li>
  35.            <li>app10</li>
  36.        </ul>
  37. </body>
  38. </html>

选择器2:上下文选择器

因为html是一个结构化的文档:每一个元素在文档中有确切的位置
所以根据元素的上下文环境来选择是完全没有问题的

后代选择器: 所有层级 

  1.     ul li {
  2.         background-color: lightblue;
  3.     }

子元素选择器: 仅父子层级
body>ul>li {
background-color: teal;
}
同级相邻选择器: 仅选中与之相邻的第一个兄弟元素 

  1.     .li+li {
  2.         background-color: lightgreen;
  3.     }

同级所有选择器: 选中与之相邻的后面所有兄弟元素 

  1.     .li~li {
  2.         background-color: yellow;
  3.     }

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>选择器2:上下文选择器</title>
  7.     <style>
  8.         /* 因为html是一个结构化的文档:每一个元素在文档中有确切的位置 */
  9.         /* 所以根据元素的上下文环境来选择是完全没有问题的 */
  10.         /* 1. 后代选择器: 所有层级 */
  11.         ul li {
  12.             background-color: lightblue;
  13.         }
  15.         /* 2. 子元素选择器: 仅父子层级 */
  16.         body>ul>li {
  17.             background-color: teal;
  18.         }
  20.         /* 3. 同级相邻选择器: 仅选中与之相邻的第一个兄弟元素 */
  21.         .li+li {
  22.             background-color: lightgreen;
  23.         }
  26.         /* 4. 同级所有选择器: 选中与之相邻的后面所有兄弟元素 */
  27.         .li~li {
  28.             background-color: yellow;
  29.         }
  30.     </style>
  31. </head>
  33. <body>
  34.     <ul>
  35.         <li>app1</li>
  36.         <li class="li">app2</li>
  37.         <li id="app3">app3</li>
  38.         <li>app4</li>
  39.         <li class="li">app5</li>
  40.         <li class="li">app6</li>
  41.         <li>app7</li>
  42.         <li>app8</li>
  43.         <li>app9</li>
  44.         <li>app10</li>
  45.     </ul>
  46. </body>
  48. </html>
  50. <!-- 上下文选择器: 
  51. 1. 空格: 所有层级
  52. 2. > : 父子级
  53. 3. + : 相邻的兄弟
  54. 4. ~ : 所有相邻兄弟 -->

伪类选择器: 结构相关,难点重点

  1. 匹配任意位置的元素: :nth-of-type(an+b)
    an+b: an起点,b是偏移量, n = (0,1,2,3…)

    选择所有元素

  1.     ul li:nth-of-type(1n) {
  2.         background-color: violet;
  3.     }

1乘以任何数都等于自己,所以省去1

  1.     ul li:nth-of-type(n+3) {
  2.         background-color: violet;
  3.     }

反向获取任意位置的元素: nth-last-of-type(an+b)

  1.     ul li:nth-last-of-type(-n+3) {
  2.         background-color: violet;
  3.     }

我只选择倒数第3个,直接命中

  1.     ul li:nth-last-of-type(3) {
  2.         background-color: violet;
  3.     }

选择所有索引为偶数的子元素, 2,4,6,8…

  1.     ul li:nth-of-type(2n) {
  2.         background-color: violet;
  3.     }

计算方式

  1.     2*0 = 0
  2.     2*1 = 2
  3.     2*2 = 4
  4.     2*3 = 6 */

选择所有索引为奇数的子元素, 1,3,5,7,9…

  1.     ul li:nth-of-type(2n-1) {
  2.         background-color: violet;
  3.     }

这里用2n+1也是对的,大家考虑一下为什么?

偶数行: even 

  1.     ul li:nth-of-type(even) {
  2.         background-color: rgb(250, 9, 250);
  3.     }

奇数行: odd 

  1.     ul li:nth-of-type(odd) {
  2.         background-color: rgb(32, 7, 255);
  3.     }

选择第一个子元素: :first-of-type */

  1.     /* :nth-of-type(1) 的语法糖 :first-of-type */
  2.     ul li:first-of-type {
  3.         background-color: rgb(24, 245, 98);
  4.     }

选中最后一个: :last-of-type 

  1.     ul li:last-of-type {
  2.         background-color: rgb(20, 20, 20);
  3.     }

:nth-of-type(an+b)这是最核心的一个选择器,其它的相关选择器都是它的语法糖 */
:nth-last-of-type(), :first-of-type, :last-of-type,这些都是快捷方式 

  1.     ul:last-of-type li:first-of-type {
  2.         background-color: rgb(99, 5, 99);
  3.     }

如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现 

  1.     ul li:only-of-type {
  2.         background-color: rgb(230, 111, 13);
  3.     }

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>伪类选择器: 结构相关,难点重点</title>
  7.     <style>
  8.         /* 1. 匹配任意位置的元素: `:nth-of-type(an+b)` */
  9.         /* an+b: an起点,b是偏移量, n = (0,1,2,3...) */
  11.         /* 选择所有元素 */
  12.         ul li:nth-of-type(1n) {
  13.             background-color: violet;
  14.         }
  15.         /* 1乘以任何数都等于自己,所以省去1 */
  16.         ul li:nth-of-type(n+3) {
  17.             background-color: rgb(112, 110, 112);
  18.         }
  19.         /* 2. 反向获取任意位置的元素: `nth-last-of-type(an+b)` */
  20.         ul li:nth-last-of-type(-n+3) {
  21.             background-color: rgb(250, 187, 250);
  22.         }
  23.         /* 我只选择倒数第3个,直接命中 */
  24.         ul li:nth-last-of-type(3) {
  25.             background-color: rgb(8, 0, 8);
  26.         }
  27.         /* 选择所有索引为偶数的子元素, 2,4,6,8... */
  28.         ul li:nth-of-type(2n) {
  29.             background-color: violet;
  30.         }
  32.         /*
  33.         计算方式
  34.         2*0 = 0
  35.         2*1 = 2
  36.         2*2 = 4
  37.         2*3 = 6 */
  39.         /* 选择所有索引为奇数的子元素, 1,3,5,7,9... */
  40.         ul li:nth-of-type(2n-1) {
  41.             background-color: violet;
  42.         }
  44.         /* 这里用2n+1也是对的,大家考虑一下为什么? */
  45.         /* 偶数行: even  */
  46.         ul li:nth-of-type(even) {
  47.             background-color: rgb(250, 9, 250);
  48.         }
  49.         /* 奇数行: odd  */
  50.         ul li:nth-of-type(odd) {
  51.             background-color: rgb(32, 7, 255);
  52.         }
  54.         /* 3. 选择第一个子元素: :first-of-type */
  55.         /* :nth-of-type(1) 的语法糖 :first-of-type */
  56.         ul li:first-of-type {
  57.             background-color: rgb(24, 245, 98);
  58.         }
  61.         /* 3. 选中最后一个: :last-of-type */
  62.         ul li:last-of-type {
  63.             background-color: rgb(20, 20, 20);
  64.         }
  66.         /* :nth-of-type(an+b)这是最核心的一个选择器,其它的相关选择器都是它的语法糖 */
  67.         /* :nth-last-of-type(), :first-of-type, :last-of-type,这些都是快捷方式 */
  69.         ul:last-of-type li:first-of-type {
  70.             background-color: rgb(99, 5, 99);
  71.         }
  73.         /* 如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现 */
  74.         ul li:only-of-type {
  75.             background-color: rgb(230, 111, 13);
  76.         }
  77.     </style>
  78. </head>
  80. <body>
  81.     <ul>
  82.         <li>app1</li>
  83.         <li class="li">app2</li>
  84.         <li id="app3">app3</li>
  85.         <li>app4</li>
  86.         <li class="li">app5</li>
  87.         <li class="li">app6</li>
  88.         <li>app7</li>
  89.         <li>app8</li>
  90.         <li>app9</li>
  91.         <li>app10</li>
  92.     </ul>
  93.     <ul>
  94.         <li>1</li>
  95.     </ul>
  97. </body>
  99. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post