Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > css的样式导入方式及选择器
Blogger Information
Blog 19
fans 0
comment 1
visits 14215
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的样式导入方式及选择器
心
Original
592 people have browsed it

css 样式引用

css 样式引用有四种

  1. 内部样式引用，在当前页面生效 style
    1. <!DOCTYE html>
    2. <html>
    3.  <head>
    4.      <title>内部样式的引用</title>
    5.      <style>
    6.          div{
    7.              color: red;
    8.          }
    9.      </style>
    10.  </head>
    11.  <body>
    12.      <div>12112</div>
    13.  </body>
    14. </html>
    2.行内样式的引用是用 stlye 属性来定制样式
    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.  <title>行内定制样式</title>
    5.  <body>
    6.      <p style="color:red;">你好 中文网</p>
    7.  </body>
    8.  </head>
    9. </html>
    3.外联样式的引用 使用 link 标签 
    1. <!DOCTYPE html>
    2. <html>
    3.  <head>
    4.  <title>外联样式</title>
    5.  <link text="stylesheet" href="文件位置">
    6.  <body>
    7.      <p>你好 中文网</p>
    8.  </body>
    9.  </head>
    10. </html>
    4.公共样式的引入使用 @import url();

选择器的使用

  1. <!DOCTYPE hmtl>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>选择的使用<title>
  6.         <style>
  7.             /*标签选择器 一组*/
  8.             li{
  9.                 border:1px soild red;
  10.             }
  11.             /*类选择器 一组 使用方式 .类名*/
  12.             .demo{
  13.                 color:red;
  14.             }
  15.             /*id 选择器 浏览器不保证唯一性 由开发者自定义 使用方式 #id*/
  16.             #id{
  17.                 background-color:blue;
  18.             }
  19.             /* 后代选择器  所有层级*/
  20.             ul li{
  21.                 color:blue;
  22.             }
  23.             /*子元素选择器  仅父子层级*/
  24.             body>ul>li{
  25.                 background-color:red;
  26.             }
  27.             /*同级相邻选择器*/
  28.             .demo1+li{
  29.                 background-color:bule;
  30.             }
  31.             /*同级所有选择器*/
  32.             。demo~li{
  33.                 color:yellow;
  34.             }
  35.             /*伪类选择器*/
  36.             a:hover{
  37.                 display:none;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <ul id="dd">
  43.             <li class="demo"></li>
  44.             <li class="demo1"></li>
  45.             <li class="demo"></li>
  46.             <li class="demo"></li>
  47.         </ul>
  48.         <a href="">你好</a>
  49.     </body>
  50. </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