qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 大数据 › 数据仓库与分析 › CSS-1

CSS-1

[复制链接]
发表于 2026-1-24 22:45:03 | 显示全部楼层 |阅读模式
1.内部样式
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>内部样式</title>
  8.         <!-- style写在head中，写在body中也行，但是系统会自动归进head里 -->
  9.         <style>
  10.             h1
  11.             {
  12.                 color: aqua;
  13.                 font-size: 330px;
  14.             }
  15.             image
  16.             {
  17.                 width: 400px;
  18.                 height: 400px;
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <h1>我是NOZOMI</h1>
  25.     </body>
  26. </html>
复制代码
2.外部样式
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>外部样式</title>
  8.         <!-- 外部样式    rel是relation的意思 -->
  9.         <link rel="stylesheet" href="./style.css">
  10.     </head>
  11.     <body>
  12.         <h1>我是NOZOMI</h1>
  14.     </body>
  15. </html>
复制代码

优先级 ：
行内样式>内部样式=外部样式
3.语法规范

 4.选择器

1.统配选择器

作用：可以选中全部html元素
语法：
*{
        属性：属性值
}
2.元素选择器

作用：选中特定元素
语法：
 标署名{
}
3.类选择器

 
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>类选择器</title>
  8.         <!-- '.'+自已定义的class类名 -->
  9.         <style>
  10.             .test
  11.             {
  12.                 color: aqua;
  13.                 font-size: 330px;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  19.         <h1 class="test">我是NOZOMI</h1>
  21.     </body>
  22. </html>
复制代码
4.id选择器
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>id选择器</title>
  8.         <!-- '#'+自已定义的id -->
  9.         <style>
  10.             #test
  11.             {
  12.                 color: aqua;
  13.                 font-size: 330px;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  19.         <h1 id="test">我是NOZOMI</h1>
  21.     </body>
  22. </html>
复制代码
差别点：
1、ID选择器只能在文档中使用一次。与类选择器差别，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
实例：
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>区别</title>
  8.         <style>
  9.             .stress
  10.             {
  11.                 color: aqua;
  12.             }
  13.             .bigsize
  14.             {
  15.                 font-size: 330px;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  21.         <p class="stress bigsize">我是NOZOMI</p>
  23.     </body>
  24. </html>
复制代码
5.子选择器
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>子选择器</title>
  7.         <style>
  8.             .nozomi>span
  9.             {
  10.                 color: cornflowerblue;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  16.         <p class="nozomi">nozomi的son是<span>biyue</span></p>
  18.     </body>
  19. </html>
复制代码
6.后代选择器
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>后代选择器</title>
  8.         <style>
  9.             /* 后代选择器是选择所有的子代 */
  10.             .nozomi span
  11.             {
  12.                 color: cornflowerblue;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  18.         <p class="nozomi">nozomi的son是<span>biyue</span>和<span>biyueyue</span></p>
  20.     </body>
  21. </html>
复制代码
7.交集选择器
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>交集选择器</title>
  8.         <style>
  10.             /* 标签+类名 */
  11.             p.handsome
  12.             {
  13.                 color: cornflowerblue;
  14.             }
  16.             /* 也可以 */
  17.             .cute.girl
  18.             {
  19.                 color: blueviolet;
  20.             }
  22.             /* 后面的覆盖前面的，指的是这里的顺序 */
  23.             .blue
  24.             {
  25.                 color: blue;
  26.             }
  28.             .red
  29.             {
  30.                 color: red;
  31.             }
  33.         </style>
  34.     </head>
  35.     <body>
  37.         <p class="handsome">Nozomi</p>
  39.         <p class="cute girl">biyue</p>
  41.         <p class="red blue">lovely couple</p>
  43.     </body>
  44. </html>
复制代码
8.并集选择器
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>并集选择器</title>
  8.         <style>
  10.             .handsome,
  11.             .cute{
  12.                 color: burlywood;
  13.                 font-size: large;
  14.             }
  15.             
  16.         </style>
  17.     </head>
  18.     <body>
  20.         <p class="handsome">Nozomi</p>
  22.         <p class="cute">biyue</p>
  24.     </body>
  25. </html>
复制代码
9.兄弟选择器
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>兄弟选择器</title>
  8.         <style>
  10.             /* 与div紧紧相邻的p元素，相隔一个不行，在上面也不行 */
  11.             div+p{
  12.                 color: aqua;
  13.             }
  15.             /* 用法：我想要除主页外的li元素红色 */
  16.             li+li{
  17.                 color: red;
  18.             }
  19.            
  20.             
  21.         </style>
  22.     </head>
  23.     <body>
  25.         <div>Nozomi</div>
  26.         <p>biyue</p>
  28.         <ul>
  29.             <!-- 因为主页的li元素，没有li跟它是兄弟，菜单1有主页跟它是兄弟，2有1跟它是兄弟 -->
  30.             <li>主页</li>
  31.             <li>菜单1</li>
  32.             <li>菜单2</li>
  33.         </ul>
  35.     </body>
  36. </html>
复制代码
10.属性选择器
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>属性选择器</title>
  8.         <style>
  9.             /* 第一种   所有带有title属性的元素*/
  10.             [title]{
  11.                 color: red;
  12.             }
  14.             /* 第二种  所有title='0721'的元素 */
  15.             [title='0721']{
  16.                 color: antiquewhite;
  17.             }
  19.             /* 第三种  所有title值以a开头的元素 */
  20.             [title^='a']{
  21.                 color: black;
  22.             }
  24.             /* 第四种  所有title值以c结尾的元素 */
  25.             [title$='c']{
  26.                 color: blueviolet;
  27.             }
  29.             /* 第五种  所有title值内有b的元素 */
  30.             [title*='b']{
  31.                 color: blue;
  32.             }
  33.             
  34.             
  35.         </style>
  36.     </head>
  37.     <body>
  39.         <div title="0721">NOZOMI</div>
  40.         <div title="ace">NOZOMI</div>
  41.         <div title="wc">NOZOMI</div>
  42.         <div title="rbr">NOZOMI</div>
  44.         
  45.     </body>
  46. </html>
复制代码
11.伪类选择器

1.动态伪类
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>动态伪类</title>
  8.         <style>
  10.             /* 注意：此顺序是固定的，顺序反了的话会因为逻辑被覆盖 */
  11.             /* hover和active不仅只有超链接可用，其它标签也可，比如span */
  13.             /* link-未被点击 */
  14.             a:link{
  15.                 color: bisque;
  16.             }
  18.             /* visited-已被点击 */
  19.             a:visited{
  20.                 color: black;
  21.             }
  23.             /* hover-鼠标悬浮在上面，出现的颜色 */
  24.             a:hover{
  25.                 color: aqua;
  26.             }
  28.             /* active-鼠标点击时，出现的颜色 */
  29.             a:active{
  30.                 color:red;
  31.             }
  32.             
  33.         </style>
  34.     </head>
  35.     <body>
  37.         <a href="https://www.baidu.com" >去百度</a>
  39.         
  40.     </body>
  41. </html>
复制代码
2.结构伪类
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>结构伪类-1</title>
  8.         <style>
  10.             /* div的p类型子元素，同时是第一个儿子，如果div的第一个儿子是span，那么都无法选中 */
  11.             /*如果想要p类型里的第一个---first-of-child */
  12.             div>p:first-child{
  13.                 color: red;
  14.             }
  15.             
  16.             
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div>
  21.             <span>A</span> <!-- 不会变红 -->
  22.             <p>B</p>    <!-- 不会变红 -->
  23.             <p>C</p>
  24.             <p>D</p>
  25.         </div>
  27.         
  28.     </body>
  29. </html>
复制代码
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>结构伪类-1</title>
  8.         <style>
  10.             /* div的p类型后代元素，同时是第一个儿子，这里的p的父亲是谁无所谓，但必须是第一个儿子 */
  11.             div p:first-child{
  12.                 color: red;
  13.             }
  14.             
  15.             /* 同时，这样也行 */
  16.             p:first-child{
  17.                 color: antiquewhite;
  18.             }
  19.             
  20.         </style>
  21.     </head>
  22.     <body>
  24.         <!-- A和B都会变红 -->
  25.         <div>
  26.             <p>A</p>   
  27.             <div>
  28.                 <p>B</p>
  29.             </div>
  30.             <p>C</p>
  31.             <p>D</p>
  32.         </div>
  34.         
  35.     </body>
  36. </html>
复制代码

3.否定伪类

 4.UI伪类

4.目的伪类
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>目标伪类</title>
  8.         <style>
  10.             div{
  11.                 width: 300px;
  12.                 height: 300px;
  13.                 background-color: aqua;
  14.             }
  16.             /* 作用是将跳转到的div变红 */
  17.             div:target{
  18.                 color: red;
  19.             }
  20.            
  21.             
  22.         </style>
  23.     </head>
  24.     <body>
  26.         <a href="#one">去看第1个</a>
  27.         <a href="#two">去看第2个</a>
  28.         <a href="#three">去看第3个</a>
  29.         <a href="four">去看第4个</a>
  31.         <div id="one">1</div>
  32.         <div id="two">2</div>
  33.         <div id="three">3</div>
  34.         <div id="four">4</div>
  36.         
  37.     </body>
  38. </html>
复制代码
 5.语言伪类

12.伪元素选择器



 5.选择器的优先级

 




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

南七星之家
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表