多语言展示
当前在线:615今日阅读:126今日分享:42

HTML网页制作:[16]如何在HTML中使用CSS

上一篇经验介绍了什么是CSS,这一篇将介绍如何在HTML中使用CSS以及CSS的基本语法。
工具/原料
1

一台电脑

2

txt\dw等

方法/步骤
1

CSS是由选择器加声明组成的。比如:h1{color:red;}h1就是选择器,意思是只要遇到h1,就使用该CSS的规则color:red; :这个事声明color:这个是属性red:这个是值

2

OK,我们先来分析选择器。

一.选择器
1

选择器的种类很多,各有各的作用。我们来一一讲解。标签选择器class选择器id选择器全局选择器组合选择器伪类选择器

2

标签选择器顾名思义,HTML中有许多标签,而标签选择器就是用来给标签直接申明样式的,简单、实用、常用。举例:p{color:red;}只要是p标签,其P标签内部的颜色,都是红色。如图代码无标题文档

嘿嘿哦嘿嘿呀哦嘿嘿哦

其中,

嘿嘿哦嘿嘿呀哦嘿嘿哦

  1. 嘿啥嘿
  2. 我想嘿嘿
  3. 专制各种不服

世界为亡,死不投降

5

看网页效果通过.alsp定义一个class选择器。在后面的代码中,哪个标签想用,就用class='alsp'去调用,就可以使用这件“衣服”来修饰自己了

6

ID选择器ID和class很像,但是和class有一个区别。class像姓名,两个人是可以同名的,但是id像身份证,只有一个人可以使用。例如:#alsp{color:red;}OK,上代码:#alsp{color:red;}

嘿嘿哦嘿嘿呀哦嘿嘿哦

  1. 嘿啥嘿
  2. 我想嘿嘿
  3. 专制各种不服

世界为亡,死不投降

7

看网页效果只能有一个标签使用该id,或者说该标签专属ID

8

全局选择器*{margin:0; padding:0;}这个很简单,前面用个*来表示,整个网页都会使用。这句话也是网页基本都要添加的,什么意思呢?自己试试看吧。

9

组合选择器组合选择,小编是非常喜欢使用的,原因无他,懒而已。他可以减少代码量,并且方便、易读。不过组合选择器的组合方式比较多,但也多很好理解。1)群模式比如:h1{color:red; font-size:14px;}p{color:red; font-size:14px;}a{color:red; font-size:14px;}这三个虽然标签不同,但是样式是一模一样的,所以,可以这样写:h1,p,a,{color:red; font-size:14px;}2)继承模式比如:.alsp  li{color:red;}

  • fdf
li是在ul之中的,算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签,其他的li标签并不会使用该样式。3)群模式(多元素并列选择器)其实也是一种特殊的群模式p.alsp{color:red;}

p.alsp

a.alsp

alsp仍然是一种class选择器,但是他只有在p的标签下被使用才生效。所以,第一行生效,p.alsp字样变红,第二行不生效

推荐信息