登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›CSS介绍

CSS介绍

兮督 6 天前
CSS 基本介绍一


目录

  • CSS 基本介绍一

    • 一.快速入门

      • 1.练习模式：
      • 2.只需3步即可让HTML焕然一新：

    • 二、CSS优势
    • 三、四种导入方式
    • 四、核心选择器详解

      • 1. 三大基本选择器

        • 标签选择器
        • 类选择器
        • id选择器

      • 2.层次选择器

        • 后代选择器：在某个元素后面
        • 子选择器：一代
        • 相邻兄弟选择器：同辈，只有一个 ，相邻（向下）
        • 通用兄弟选择器，当前元素中向下的所有兄弟元素

      • 3.属性选择器

    • 五.字体样式

      • 1.span标签
      • 2.字体样式
      • 3.文本样式

        • 结语




css是网页设计的核心语言，负责将枯燥的HTML变得丰富多彩，本文将介绍css的一些用法。
一.快速入门

1.练习模式：

1.jpeg

2.只需3步即可让HTML焕然一新：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  8. </head>
  9. <body>
  10. <h1>我是标题1</h1>
  11. </body>
  12. </html>
复制代码
效果如下：
2.jpeg

二、CSS优势


  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式十分丰富
  • 建议使用独立于html的css文件
  • 利用SEO，容易被搜索引擎收录
三、四种导入方式

方式示例行内样式
内部样式外部样式@import导入@import url('style.css');
1.若有多个导入样式，遵循就近原则
2.大型项目优先使用外部样式表
四、核心选择器详解

1. 三大基本选择器

选择器优先级：ID > 类 > 标签
标签选择器


**页面里直接用HTML标签名（比如
、）当选择器，能选中页面里所有这个标签的元素。比如用当选择器，页面里所有段落都会被选中。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  9. <h1>内容1</h1>
  10. <h1>内容2</h1>
  11. <p>内容3</p>
  12. </body>
  13. </html>
复制代码
​     效果如下：
3.jpeg

类选择器

类选择器：给元素起个“类别名”（用定义），选择时用.类名，能选中所有带这个类名的元素。
一个类名可以给多个元素用，一个元素也能有多个类名。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  8. </head>
  9. <body>
  10. <h1 >标题1</h1>
  11. <h1 >标题2</h1>
  12. <h1 >标题3</h1>
  13. </body>
  14. </html>
复制代码
效果如下：
4.jpeg

id选择器

​     给元素起个“唯一名字”（用id="id名"定义）,选择时用#id名，一个id在页面里只能用一次，只能选中一个元素,必须保证全局唯一
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  8. </head>
  9. <body>
  10. <h1 >标题1</h1>
  11. <h1 >标题2</h1>
  12. <h1 >标题3</h1>
  13. </body>
  14. </html>[size=6]标题4[/size]
  16. [size=6]标题5[/size]
复制代码
效果如下：
5.jpeg

2.层次选择器

后代选择器：在某个元素后面

用空格连接两个选择器，比如div p，选中div里所有的p标签，不管是儿子、孙子还是更深层的都算。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  10. <p>p1</p>
  11. <p >p2</p>
  12. <p>p3</p>
  13. <ul>
  14.     <li>
  15.         <p>p4</p>
  16.     </li>
  17.     <li>
  18.         <p>p5</p>
  19.     </li>
  20.     <li>
  21.         <p>p6</p>
  22.     </li>
  23. </ul>
  24. <p >p7</p>
  25. <p>p8</p>
  26. </body>
  27. </html>
复制代码
如下：
6.jpeg

子选择器：一代

用>连接两个选择器，比如body > p，只选中body直接包含的“亲儿子”p标签，孙子辈的p不算。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  10. <p>p1</p>
  11. <p >p2</p>
  12. <p>p3</p>
  13. <ul>
  14.     <li>
  15.         <p>p4</p>
  16.     </li>
  17.     <li>
  18.         <p>p5</p>
  19.     </li>
  20.     <li>
  21.         <p>p6</p>
  22.     </li>
  23. </ul>
  24. <p >p7</p>
  25. <p>p8</p>
  26. </body>
  27. </html>
复制代码
7.jpeg

相邻兄弟选择器：同辈，只有一个 ，相邻（向下）

用+连接，比如.active+p，选中紧挨着.active标签后面的那个p（必须是同一个父元素下，且紧挨着）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  10. <p>p1</p>
  11. <p >p2</p>
  12. <p>p3</p>
  13. <ul>
  14.     <li>
  15.         <p>p4</p>
  16.     </li>
  17.     <li>
  18.         <p>p5</p>
  19.     </li>
  20.     <li>
  21.         <p>p6</p>
  22.     </li>
  23. </ul>
  24. <p >p7</p>
  25. <p>p8</p>
  26. </body>
  27. </html>
复制代码
如下
8.jpeg

通用兄弟选择器，当前元素中向下的所有兄弟元素

用连接，比如.activeP，选中.active标签后面所有同层级的p（同一个父元素下，不用紧挨着）。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  10. <p>p1</p>
  11. <p >p2</p>
  12. <p>p3</p>
  13. <ul>
  14.     <li>
  15.         <p>p4</p>
  16.     </li>
  17.     <li>
  18.         <p>p5</p>
  19.     </li>
  20.     <li>
  21.         <p>p6</p>
  22.     </li>
  23. </ul>
  24. <p >p7</p>
  25. <p>p8</p>
  26. </body>
  27. </html>
复制代码
效果如下：
9.jpeg

3.属性选择器

根据元素的属性来选，比如input[type="text"]，选中所有type属性是text的输入框；a[href]选中所有带href属性的链接。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  9. <p ></p>
  10. 1
  11. 2
  12. 3
  13. 4
  14. 5
  15. 6
  16. </body>
  17. </html>
复制代码
如下
10.jpeg

五.字体样式

1.span标签

一个“小容器”标签，本身没啥样式，主要用来包裹一小段文字或内容，方便单独设置样式（比如给一句话里的几个字改颜色），不像div会换行。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  10. 欢迎学习标签
  11. </body>
  12. </html>
复制代码
效果如下：
11.jpeg

2.字体样式

控制文字本身的样子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  8. </head>
  9. <body>
  10. <h1>背景故事</h1>
  11. <p >
  12.     2034年，人类首次接收到来自宇宙深处的讯息。这段来自深空文明的讯息并未能够被完整破译，这激发了人们对于宇宙和未知文明探索的好奇心，也衍生了各种有关于深空的传说，甚至影响了未来几十年人类历史的发展。 [2]
  13. 世界观</p>
  14. <p>
  15.     Evol：只体现在少数人身上的特殊能力。拥有Evol的极少数人被称为Evolver，即超进化人类。超前的自然进化的基因使得Evolver的某方面能力得到强化，超越一般人类。经过数百年的变迁，Evol的存在已经不是秘密。被提取并运用到生活各方面中的Evol基因，也在进一步改变世界。 [2]
  16. </p>
  17. </body>
  18. </html>
复制代码
12.jpeg

3.文本样式

控制文字整体的排版和外观
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  8. </head>
  9. <body>
  10. <h1>背景故事</h1>
  11. <p >
  12.     2034年，人类首次接收到来自宇宙深处的讯息。这段来自深空文明的讯息并未能够被完整破译，这激发了人们对于宇宙和未知文明探索的好奇心，也衍生了各种有关于深空的传说，甚至影响了未来几十年人类历史的发展。 [2]
  13.     世界观</p>
  14. <p >
  15.     Evol：只体现在少数人身上的特殊能力。拥有Evol的极少数人被称为Evolver，即超进化人类。超前的自然进化的基因使得Evolver的某方面能力得到强化，超越一般人类。经过数百年的变迁，Evol的存在已经不是秘密。被提取并运用到生活各方面中的Evol基因，也在进一步改变世界。 [2]
  16. </p>
  17. <p >12345</p>
  18. <p >12345</p>
  19. <p >12345</p>
  20. </body>
  21. </html>
复制代码
如下
13.jpeg

样式继承：字体/文本属性自动继承
结语

CSS3现已支持动画、渐变、网格布局等高级特性，优秀的CSS代码应像好散文——清晰、简洁、富有表现力。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
兮督
6 天前

0

粉丝关注

10

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫