文档章节

css层叠样式表

o
 osc_w9s1w4o0
发布于 2019/04/01 17:11
字数 504
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

学习web的第五天

CSS层叠样式表,也称为级联样式表,用来设计网页风格。

老师说内联样式表不介意我们使用,我们只要了解并掌握就行了,重点给我们讲解了外部样式表。

css的优势:1、表现和内容相分离,css通过定义html标记的样式,使得页面内容和显示相分离,简化了网页格式设计。 2、加强了网页的表现力。 3、增强了网站风格的一致性。

css编辑方法:1、写在html文件里(内部样式表) 2、写在独立的*.css文件里(外部样式表 ) 

选择器:1、标记选择器——对html的标记重新定义,该样式立即生效。 2、类选择器——以点号"."开头,并可以任意命名,该样式应用后生效。 3、ID选择器——以"#"开始,可以任意命名。

内联样式表的格式:

          

<head>
    <style type="text/css">
      body{background:#ccc;} /*标记选择器*/
      #p1{color:#222;size:14px;}  /*id选择器*/
      .pic{float:right;padding:20px;}  /*类选择器*/
     </style>
</head>
<body>
   ……
   ……
   ……
</body>

外部样式表引用方法:( 在<head>标签部分引用)

       

<head>
<link href="css1.css" rel="stylesheet" type="text/css">
</head>

简单的做了个例子:

  html部分代码:

<!DOCTYPE html>
<html>
    <head>
        <title>简单网页制作</title>
        <link href="css1.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1 id="hh1">Web前段开发技术课程简介</h1>
        <hr />
        <p class="p1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《Web前端开发技术》课程是计算机科学与技术、信息管理与信息系统、软件工程等专业的一门基础课程,也是其他计算机相关专业的公共基础课程,通过对Web前端开发三大主流技术学习和研究,让学生理解和掌握HTML、JavaScript、CSS等相关知识,通过实验培养学生设计与开发Web站点的基本操作技能。</p>
    </body>
</html>

  css部分代码:

#hh1{text-align:center;}
.p1{background:#ccc;color:red;}

结果:

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

hbase2.1.9 centos7 完全分布式 搭建随记

hbase2.1.9 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实际情...

osc_4tfw1dxv
26分钟前
7
0
zookeeper3.5.5 centos7 完全分布式 搭建随记

zookeeper3.5.5 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实...

osc_6jhxf9ab
28分钟前
19
0
steam夏日促销悄然开始,用Python爬取排行榜上的游戏打折信息

前言 很多人学习python,不知道从何学起。 很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手。 很多已经做案例的人,却不知道如何去学习更加高深的知识。 那么针对这三类人,...

osc_ur9mmbck
29分钟前
16
0
python 里 certifi 库的作用

python 里 certifi 库的作用 安装了certifi之后,和requests库一样也有一个cacert.pem,可以用编辑器打开cacert.pem,里面包含了很多可信任知名公司的证书/公钥 库的路径,我这里是python2.7...

osc_1x6ycmfm
30分钟前
11
0
干掉"ZooKeeper",阿里为什么不用ZK做服务发现?

  20大进阶架构专题每日送达   链接:yq.aliyun.com/articles/601745   2020年Java面试题库连载中   !   正文   站在未来的路口,回望历史的迷途,常常会很有意思,因为我们会不...

osc_q5m9dzk0
32分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部