Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS样式规则
Blogger Information
Blog 46
fans 0
comment 0
visits 39107
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
CSS样式规则
lus菜
Original
1319 people have browsed it

css规则的三种引入样式:

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

以下示例：

  1. 内部样式表:
  2. <style>
  3. h1 {
  4.    color: violet;border: 1px solid #000;
  5. }
  6.  </style>
  7. <body>
  8.     <h1>php.cn</h1>
  9. </body>

效果如下:

  1. 外部样式表:
  2.    <head>
  3.     <meta charset="UTF-8">
  4.     <title></title>
  5.     <style></style>
  6.          //使用link 标签引入外部公共样式表
  7.         <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>
  10.     <h1>php中文网</h1>
  11. </body>

效果如下:

  1. 行内样式:
  2. <body>
  3.      //通过style指定元素自定义/定制样式
  4.     <h1 style="color: blue;">css真的非常好用</h1>
  5. </body>!

效果如下:

标签选择器、class选择器、id选择器、结构伪类选择器

  1. 标签选择器:
  2. <style>
  3. li {
  4.     background-color: violet;
  5.  }
  6. </style>
  7. <body>
  8.     <ul>
  9.         <li>item1</li>
  10.         <li>item2</li>
  11.         <li>item3</li>
  12.         <li>item4</li>
  13.         <li>item5</li>
  14.     </ul>
  15. </body>

效果如下:

  1. class选择器:
  2. <style>
  3. li[class="on"]{
  4.            background-color: violet;
  5. }
  6. //class选择器可简化为 . 
  7. .on{
  8.    background-color: violet;
  9. }
  10. </style>
  11. <body>
  12.     <ul>
  13.         <li>item1</li>
  14.         <li class="on">item2</li>
  15.         <li>item3</li>
  16.         <li class="on">item4</li>
  17.         <li class="on">item5</li>
  18.     </ul>
  19. </body>

效果如下:

  1. id选择器:
  2. <style>
  3. li[id="foo"]{
  4.           backgroundcolor:violet;
  5. }
  6.  //因为浏览器不检查id的唯一性,必须由开发者自行保证
  7.  //id选择器使用 # 简化
  8. #foo{
  9.       background-color: violet;
  10. }
  11. </style>
  12. <body>
  13.     <ul>
  14.         <li id="foo">item1</li>
  15.         <li>item2</li>
  16.         <li id="foo">item3</li>
  17.         <li>item4</li>
  18.         <li>item5</li>
  19.     </ul>
  20. </body>

效果如下:

上下文选择器：

1空格:所有层级 2.>：父子级 3. +: 相邻的兄弟 4.~: 所有相邻兄弟
  1. <style>
  2.         //1. 后代选择器: 所有层级
  3.         ul li {
  4.             background-color: violet;
  5.         }
  6.        //2. 子元素选择器: 仅父子层级
  7.         body>ul>li {
  8.             background-color: #bbbbbb;
  9.         }
  10.         // 3. 同级相邻选择器: 仅选中与之相邻的第一个兄弟元素
  11.         .start+li {
  12.             background-color: tomato;
  13.         }
  14.        // 4. 同级所有选择器：仅选中与之相邻的后面所有兄弟元素
  15.         .start ~ li {
  16.             background-color: yellow;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <ul>
  22.         <li>item1</li>
  23.         <li class="start">item2</li>
  24.         <li>item3</li>
  25.         <li>item4
  26.             <ul>
  27.                 <li>item4-1</li>
  28.                 <li>item4-2</li>
  29.                 <li>item4-3</li>
  30.             </ul>
  31.         </li>
  32.         <li>item5</li>
  33.     </ul>
  34. </body>

效果如下:

  1. 结构伪类选择器:
  2. //匹配第3个li
  3. <style>
  4. ul li:nth-of-type(3) {
  5.             background-color: #bbbbbb;
  6.           }
  7.        //选择所有索引为偶数的子元素, 2,4,6,8...
  8.         ul li:nth-of-type(2n){
  9.             background-color: violet;
  10.         }
  11.          //选择第一个子元素: :first-of-type :nth-of-type(1) 的语法糖 :first-of-type
  12.         ul li:first-of-type{
  13.             background-color: salmon;
  14.         }
  15.         //如果只是想匹配父元素的唯一子元素,使用 :only-of-type就可快速实现
  16.         ul li:only-of-type{
  17.             background-color: slateblue;
  18.         }
  19. </style>
  20. <body>
  21.     <ul>
  22.        <li>item1</li>
  23.        <li>item2</li>
  24.        <li>item3</li>
  25.        <li>item4</li>
  26.        <li>item5</li>
  27.        <li>item6</li>
  28.        <li>item7</li>
  29.        <li>item8</li>
  30.        <li>item9</li>
  31.        <li>item10</li>
  32.     </ul>
  33.     <ul>
  34.         <li>今天是个好日子</li>
  35.     </ul>
  36. </body>

效果如下:

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