微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > css引入方式和css选择器
博主信息
博文 16
粉丝 0
评论 0
访问量 22623
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
css引入方式和css选择器
刚哥哥
原创
891人浏览过

css引入方式：

css具有多种引入方式：

1、通过在开始标签内写style 属性 定义css 样式；（内联样式）；
  1. 内联样式定义css属性和值，它的优先级最高，相当于私人订制；
2、在head内通过style 元素定义css样式;（内嵌样式）
  1. 这种方式只在本html文档内有效，
3、通过引入外部css文件的方式引入css；（外联样式）
  1. 这种方式可以同时导入到多个html文档中同时使用，通过link标签导入；
4、在style元素内通过@import 关键字导入css样式，（导入方式）
  1. 用于从其他样式文件导入样式规则，@import url("使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url");

示例代码：

1、内联样式示例代码：

  1. <h1 style="color:red">css内联样式示例，内联css样式优先级最高</h1>

2、内嵌样式示例代码：

  1. <head>
  2.     <style>
  3.         h1 {
  4.             color:red;
  5.         }
  6.     </style>
  7. </head>
  8. <body>
  9.     <h1>内嵌样式代码演示，内嵌样式css只在当前html文档中有效</h1>
  10. </body>

3、通过引入外部css文件的方式引入css；（外联样式）

  1. <head>
  2.     <link rel="stylesheet" href="外部css文件路径"/>
  3. </head>

4、通过@import关键字导入css

  1. <style>
  2.     @import url("CssFileName.css");
  3. </style>

css选择器：

css有以下几种选择：

1、标签选择器；
  1. 语法：
  2.     h1{
  3.         属性：值；
  4.         }

注释：h1：标签

*（星号），代表所有元素

2、类选择器：
  1. 语法：
  2.         .top{
  3.             属性：值；
  4.             }

注释：top：类名

3、id选择器：
  1. 语法：
  2.             #top{
  3.                 属性:值;
  4.                 }

注释：top :id名；id在同一个html页面中，具有唯一性，唯一性有开发者自己把控，

4、上下文选择器：
  1. html是结构化文档，文档有父级、同级、后代；
  2. 语法格式：父级 目标元素{声明块}；
5、结构伪类选择器：

1、结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

  1.  2、:root 伪类
  2. ：root，匹配文档树的根元素，：root表示<html>元素，优先级高；
  4. 语法样式：
  5. :root { 样式属性 }
  6.     譬如，:root{background:red} ，表示将页面背景色设置为红        色。
  7.     声明全局CSS变量时 :root 很有用。
  9. 3、 :empty 伪类
  10.     :empty 伪类，代表没有子元素的元素。

4、nth-of-type(n)和:nth-last-of-type(n)选择器

  1. :nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素，

选择器示例代码：

1、标签选择器：

  1. h1 {
  2.     color:red;
  3. }
  4. <body>
  5.     <h1>h1标签</h1>
  6. </body>

2、类选择器：

  1.     .top {
  2.         border:1px solid red;
  3.     }
  4.     <body>
  5.         <div class="top">
  6.             1像素实线边框
  7.         </div>
  8.     </body>

3、id选择器：

  1.     #top {
  2.         border:2px solid red;
  3.     }
  4.     <body>
  5.         <div id="top">
  6.             2像素实线边框
  7.         </div>
  8.     </body>

4、上下文选择器：

  1.         <style>
  2.         ul li {
  3.             color:red;
  4.         }
  5.     </style>
  6. </head>
  7. <body>
  8.     <ul>
  9.         <li>上下文选择器1</li>
  10.         <li>上下文选择器2</li>
  11.         <li>上下文选择器3</li>
  12.         <li>上下文选择器4</li>
  13.         <li>上下文选择器5</li>
  14.     </ul>
  15. </body>

5、结构伪类选择器：

  1.        /* 选择奇数列 */
  2.         ul :nth-of-type(odd){
  3.             color:red;
  4.         }
  5.         /* 选择偶数列 */
  6.         ul :nth-of-type(even){
  7.            color: royalblue;
  8.            background-color: seagreen;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <ul>
  14.         <li>上下文选择器1</li>
  15.         <li>上下文选择器2</li>
  16.         <li>上下文选择器3</li>
  17.         <li>上下文选择器4</li>
  18.         <li>上下文选择器5</li>
  19.     </ul>
  20. </body>
批改老师：天蓬老师天蓬老师

批改状态：合格

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

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

  • PHP学习

  • 技术支持

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