zoukankan      html  css  js  c++  java
  • css层叠样式表

    学习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;}

    结果:

  • 相关阅读:
    Java-->实现断点续传(下载)
    Java-->分割文件
    Java-->IO流模拟实现用户登录以及登录信息
    Java-->PrintStream
    Java-->一个只能运行十次的程序
    MySQL之数据类型
    【linux相识相知】网络属性配置
    MySQL之基本语句
    【linux相识相知】sed命令
    【Linux相识相知】yum的配置使用和程序包的编译安装
  • 原文地址:https://www.cnblogs.com/zuiranlanyan/p/10637544.html
Copyright © 2011-2022 走看看