CSS基础知识

最新推荐文章于 2025-11-24 23:00:57 发布

原创最新推荐文章于 2025-11-24 23:00:57 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

本文介绍了CSS层叠样式表的基本概念及使用方法，包括四种样式引入方式：行内样式、内嵌式、链接式和导入式。详细解释了CSS的选择器如标记选择器、类别选择器和id选择器，并演示了如何进行集体声明和使用嵌套选择器。

CSS (Cascading Style Sheet) 层叠样式表,用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.

样式分为:
1 行内样式
2 内嵌式
3 链接式
4 导入式

CSS基本语法:
1 css 选择器:
a 标记选择器
   <style>
h1   {color:red;    font-size:12px;}
选择器 {属性名:属性值;属性名:属性值;}
</style>
b 类别选择器
   .class     {color: green;font-size:12px;}
   类别选择器 {属性名:属性值;属性名:属性值;}
c id选择器
#id    {color:yellow;font-size:12px;}
id名称 {属性名:属性值;属性名:属性值;}

2 选择器的声明:
a 集体声明:
<style>
h1,h2,h3,h3,h4,h5,p{ //集体声明1
   color:red;
   font-size:15px;
}
h2.special,.special,#one{//集体声明2
   text-decoration:underline;
}
</style>

code:
<body>
<h1>集体声明1</h1>
<h2 class="special">集体声明2</h2> //同时应用集体声明1和集体声明2
<h3>集体声明3</h3>
<h4>集体声明4</h4>
<h5>集体声明5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p3>
<p id="one">集体声明p3</p>
</body>
b:选择器的嵌套
   <style>
p b{color:red;text-decoration:underline;}
   </style>
   code:
   <body>
     <p>嵌套使用<b>css</b>标记的方法<p>
     嵌套之外的<b>标记</b>不生效
   </body>

3 css 的继承
a 父子关系
   <style>
     h1{color:red;text-decoration:underline;}
     h1 em{color:green;font-size:12px;}
   </style>
   code:
   <body>
     <h1>祖国的首都<em>北京</em>。</h1> //em斜体标记继承了h1标记
     //em 标记之间的内容首先会应用父类的样式,在应用的子类的样式
     //如果子类的样式和父类的相同,父类的将会被覆盖
   </body>