CSS学习

最新推荐文章于 2024-09-23 15:32:37 发布

原创最新推荐文章于 2024-09-23 15:32:37 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

Web学习专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了CSS与HTML元素整合的三种方式：内部样式表、内联样式表和外部样式表。同时，深入探讨了各种选择器的使用，包括id选择器、class选择器、元素选择器、属性选择器、后代选择器以及锚伪类选择器，帮助读者掌握网页布局的精髓。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、css和html元素的整合的三种方式：

内部样式表在当前页面中使用的样式

       <style>
                   #divId2{
                       background-color: #0f0;
                   }
          </style>
内联样式表通过标签的style属性设置样式

外部样式表有独立的css文件

2、选择器

id选择器

           要求:
               html元素必须有id属性且有值 <xxx id="id1"></xxx>
               css中通过"#"引入,后面加上id的值 #id1{...}

class选择器

           要求:
               html元素必须有class属性且有值 <xxx class="cls1"/>
               css中通过"."引入,后面加上class的值 .cls1{...}
       元素选择器
           直接用元素(标签)名即可 xxx{...}

派生的选择器

       属性选择器★
           要求:
               html元素必须有一个属性不论属性是什么且有值 <xxx nihao="wohenhao"/>
               css中通过下面的方式使用
                   元素名[属性="属性值"]{....}
                   例如:
                       xxx[nihao="wohenhao"]{....}
       后代选择器
           选择器后代选择器{...} 在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式了解的选择器

锚伪类选择器

           a:link {color: #FF0000}   /* 未访问的链接 */
           a:visited {color: #00FF00}   /* 已访问的链接 */
           a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
           a:active {color: #0000FF}   /* 选定的链接 */