初步学习CSS之定义、分类和基本语法

最新推荐文章于 2023-01-09 23:53:16 发布

zhangyang0402

最新推荐文章于 2023-01-09 23:53:16 发布

阅读量1.1k

点赞数

分类专栏： Web程序设计文章标签： css stylesheet class html 文档 bi

本文链接：https://blog.csdn.net/zhangyang0402/article/details/2230477

版权

Web程序设计专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、什么是CSS?
CSS(Cascading Style Sheets):层叠样式表
由于HTML主要是控制网页的内容,但在网页界面排版上处理得不是很理想,所以就有了CSS的产生.也就是说,CSS主要用于处理网页内容的显示排版(布局)

二、CSS的分类

CSS按层次可分为三类:
行内样式表(Inline Style Sheet)
内部样式表(Internal Style Sheet)
外部样式表(External Style Sheet)

1.行内样式表(Inline Style Sheet)
该样式表只出现于标签中,且只对标签中的内容起作用.

格式:
<标签名 style="属性1:值1;属性2:值2;属性3:值3;……">内容</style>

例:
Inline Style Sheet.html:

<html>
<head>
<title>行内样式表</title>
</head>
<body>
<p style="font-family:宋体; font-size:20pt;font-style:italic;">行内样式表(Inline Style)</p>
</body>
</html>

2.内部样式表(Internal Style Sheet)
该新式表说明位于<head></head>中,能作用于整个文档.

格式:
<style type="text/css">
......
</style>

例:
Internal Style Sheet.html:

<html>
<head>
     <title>内部样式表</title>
     <style type="text/css">
       p.large{
                font-size:30pt;
              }
       p.small{
                font-size:15pt;
              }
      </style>
</head>
<body>
      <p class="large">内部样式表(Internal Style Sheet),字体大小为30pt</p>
      <p class="small">内部样式表(Internal Style Sheet),字体大小为15pt</p>
</body>
</html>

3.外部样式表(External Style Sheet)
顾名思义,外部样式表是个独立文件,后缀为.css,文件的MIME类型为text/css.当某文档需要引用外部样式表时,将外部样式表的链接在<head></head>中说明即可.

格式:
<link href="要链接到的外部样式表url" rel="stylesheet" type="text/css">

例:
External Style Sheet.html:

<html>
<head>
     <title>外部样式表</title>
     <link href="ess.css" rel="stylesheet" style="text/css">
</head>
<body>
      <p class="font">外部样式表(External Style Sheet)</p>
</body>
</html>

ess.css:

p.font{
        font-family:宋体;
        font-size:20pt;
        font-style:italic;
        font-weight:bold;
        color:purple;
      }

三、基本语法
一个样式(Style)的语法由三部分构成：选择器(Selector)、属性(Property)、属性值(Value)。
基本格式：selector {property: value}

下面看一下常见的几种选择器：
1.简单的选择器
如:<p>{
          font-family:宋体;
          font-size:20pt;
          font-style:italic;
          font-weight:bold;
          font-align:center;
          color:#808000;
        }
注:几个属性间用";"隔开.
特殊情况下:
(1)若几个选择器的属性和属性值相同,则可进行组合:
如:
h1,h2,h3,h4 {
                font-style:italic;
                font-weight:bold;
                color:#808000;
              }
(2)嵌套的形式.
如:
demo.html:

ess2.css:

b i{
     font-style:italic;
     font-size:25pt;
     color:#808080;
   }
可知,此种情况下,样式只对含有<b>且<b>标签里有<i>标签的内容起作用,对只有<b>标签的内容不起作用。

2.类选择器
格式:标签名.类选择器名

例子如上面"内部样式表"中的p.large,p.small,large和small就是类选择器名,在正文中引用它们时,只需在标签的class属性中写上相应的类选择器名即可.

特殊情况下,当某个类选择器适用于多个标签时,可不写标签名,格式为:.类选择器名,这样标签都可使用该选择器

如:
my.html:

<html>
<head>
      <title>通用选择器</title>
      <link href="ess3.css" rel="stylesheet" style="text/css">
</head>
<body>
     <p class="myfont">这是第一行</p>
     <h1 class="myfont">这是第二行</h1>
</body>
</html>

ess3.css:

.myfont{
        font-family:宋体;
        font-size:30pt;
        font-weight:bolder;
      }

3.CSS中的注释
CSS中的注释为: /* */