JavaWeb第二章HTML与CSS网页06

一、CSS规则:

在CSS样式表中包括3部分内容:选择符、属性和属性值。语法格式如下:

选择符{属性1:属性值1;

    属性2:属性值2;}

eg:<style>

h2{//选择器

font-family:宋体;//font-family:属性。宋体:属性值。

color:red;

}

</style>

CSS选择器:

1、标记选择器

HTML页面是由很多标记组成的,而CSS标记选择器就是声明页面中那些标记采用哪些CSS样式。

     例如:a选择器就是用于声明页面中所有有<a>标记的样式风格。

<style>

a{

font-family:9px;

color:#F93;

}

</style>

 2、类别选择器

使用标记选择器很快捷,但是会有一定局限性,如果声明标记选择器,那么页面中的所有该标记就都会发生相应变化。

如果页面中有两个<h2>,想要使每个<h2>标记显示的效果都不一样,这时就需要引入类别选择器。

类别选择器名称由用户自己定义,并以“.”号开头,要应用类别选择器,只需使用class属性来声明即可。

eg:

<style>

.one{ //定义类名为one的类别选择器

font-family:宋体; //设置字体

font-size:24px; //设置字体大小

color:red; //设置字体颜色

}


.two{ //定义类名为two的类别选择器

font-family:宋体; //设置字体

font-size:16px; //设置字体大小

color:red; //设置字体颜色

}

</style>

</head>

<body>

<h2 class="one">应用了选择器one</h2>

<p>正文1</p>

<h2 class="two">应用了选择器two<h2>

<p>正文内容2</p>

</body>

3、id选择器

id选择器是通过HTML页面中的id属性来选择增添样式,与类别选择器基本相同,但由于HTML页面中不能

包含两个相同的id标记,因此定义的id选择器也只能被使用一次。

命名id选择器要以“#”号开始,后加HTML标记中的id属性值。

eg:<style>

#first{

font-size:19px;

}

</style>

    <body>

<p id ="first">ID选择器</p>

</body>

二、在页面中包含CSS

在页面中包含CSS有3种方式:

1、行内样式

2、内嵌样式

3、链接式

行内样式很直接,但是太繁琐;内嵌样式使用广泛,而且内嵌样式表更加便于维护;链接式是最常用 的一种引用样式表的方式。将CSS样式定义在一个单独的文件中,然后在HTML页面中通过<link>标记引 用,是一种最为有效的使用css样式的方式。

eg:

①创建名称为css的样式表,在表中定义页面 中<h1>、<h2>、<h3>、<p>标记的样式代码如下:

h1,h2,h3{

color:#6CFw;

font-family:"Trebuchet MS",ARIAL,Helvetica;

}

p{

color:#F)Cs;

font-weight:200;

font-size:24px;

}


在页面中通过<link>标记将样式表引入到页面中,此时css样式表将自行加载到页面中。

<title>通过链接形式引入样式表</title>

<link href="css.css">

</head>

<body>

<h2>页面文字一</h2>

<p>页面文字二</p>

</body>

CSS3也引入了一些新特性,可自行了解。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值