HTML学习——CSS之一-CSDN博客

本文深入讲解了CSS（层叠样式表）的概念与作用，包括如何通过CSS来描述HTML元素的显示方式，以及如何使用选择器、派生选择器、ID选择器和class选择器来精确控制网页样式。同时，介绍了CSS的三种创建方式：外部样式表、内部样式表和内联样式。

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

HTML 是用来描述文档内容的，比如<h1>是告诉我们这是个标题，是告诉我们这是一段。但是在后来的发展中许多浏览器开始往里面添加各种属性和样式的定义以丰富网页的显示方式，最终为规范html的写法w3c组织发布了html 4.01和css, 用以将关于样式显示的问题交给css处理，这是一种思维方式的改变。作为可以层叠叠加使用的样式规则，灵活的作用方式都极大提高了css对于网页效果的配置作用和力度。

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素 :用来描述元素的显示方式
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
优先原则为“靠近”原则离的越近修饰的优先权越高

语法： selector {property : value}

元素或标签 {属性：属性值} 当属性值为一个以上单词时需要加引号。

派生选择器的使用：其实就是利用限定条件的上下文进行指定，指定某个元素或标签在特定的上下文中具有的属性值。

例如 li strong { color : blue}则表示在列表li中的strong 类型的字体是蓝色。

id选择器 #：可以为某个id的元素或标签指定其特定的样式，显然由于是id的缘故这一指定也是唯一的。

例如：

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#p1 {color:red;}
#p2 {color:green;}
下面的 HTML 代码中，id 属性为 p1 的 p 元素显示为红色，而 id 属性为 p2 的 p 元素显示为绿色。
这个段落是红色。
这个段落是绿色。

上述两种的选择器可以混合使用以完成你想要的结果。例如 ： #id p{ ...; ...;...;}  #idh1{ ...; ...;...;}

class选择器 .：可以为某个类指定其样式定义，也可以和派生选择器搭配使用。

 例如：.fancy td {                                            td .fancy {
                   color: #f60;                                           color: #f60;

                   background: #666;                                       background: #666;

                }    在fancy类中的所有td的样式                             }  所以遵循fancy类的td

创建方式  ： 1. link 外部样式表:  <link rel="stylesheet" type="text/css" href="mystyle.css" />
            2.  内部样式表： <head>
                        <style type="text/css">
                          hr {color: sienna;}
                          p {margin-left: 20px;}
                          body {background-image: url("images/back40.gif");}
                        </style>
                        </head>

             3.内联样式： <p style="color: sienna; margin-left: 20px">

转载于:https://www.cnblogs.com/wanghuijunshiwo/archive/2009/06/19/1506956.html