欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS重要知识概述——Java Web从入门到精通第2章

程序员文章站 2022-06-24 14:44:20
一、CSS简单规则 CSS样式表包含3部分内容:选择符、属性和属性值 其中选择符包括基本的3种选择器: 1、标记选择器,如标签等; 2、类别选择器,用class属性来声明即可; 3、id选择器,用id来声明,只能使用1次。 二、CSS选择器 1、标记选择器,例如对标签,下 ......

一、css简单规则

css样式表包含3部分内容:选择符、属性和属性值

CSS重要知识概述——Java Web从入门到精通第2章

其中选择符包括基本的3种选择器:

1、标记选择器,如<a></a>标签等;

2、类别选择器,用class属性来声明即可;

3、id选择器,用id来声明,只能使用1次。

 

二、css选择器

1、标记选择器,例如对<a></a>标签,下面代码声明了页面中所有<a>标记的样式风格

<style>
    a{
           font-size:9px;
           color:#f93;
      }
</style>

 

2、类别选择器,例如下面代码,要使每个<h2>标签实现不一样的字体,可以用class属性来为每个<h2>标签声明不一样的类(可以同时加载多个类别选择器的样式,在多种类别选择器之前,用空格进行分隔,例如“<h2 class="size color"”,这个h2可以同时加载size和color的样式)

CSS重要知识概述——Java Web从入门到精通第2章

 

 

3、id选择器,和类别选择器类似,只不过用id声明,且一个id只能使用一次

CSS重要知识概述——Java Web从入门到精通第2章
<style>
    #first{
            font-size:18px
        }
    #second{
            font-size:24px
        }
    #third{
            font-size:36px
        }
</style>
<body>
        <p id="first">id 选择器</p>
        <p id="second">id 选择器2</p>
        <p id="third">id 选择器3</p>
</body>
view code

 

三、在页面中包含css

1、行内样式:直接定义在html标记之内,通过style属性实现,适合初学者,但灵活性不强,如<p style="color:#f00; font-size:36px;"。

2、内嵌式:在页面中使用<style></style>标记将css样式包含在页面中,通常在<head></head>标签内定义。

3、链接式:用的最多,将css样式定义在一个单独的文件中,在html页面中通过<link>标记引用,通常也放在<head></head>标签内:

语法如下:

<link rel='stylesheet' href='path' type='text/css'>

rel:定义外部文档和调用文档间的关系

href:css文档的绝对或相对路径

type:指的是外部文件的mime类型

 CSS重要知识概述——Java Web从入门到精通第2章

CSS重要知识概述——Java Web从入门到精通第2章