登录  /  注册
首页 > 博客列表 > CSS样式规则
博主信息
博文 49
粉丝 0
评论 0
访问量 47636
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS样式规则
lus菜
原创
1611人浏览过

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>

效果如下:

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录