zoukankan      html  css  js  c++  java
  • html第四节课

    css

    CSSCascading Style Sheet,叠层样式表),作用是美化HTML网页。

     

    /*注释区域*/    此为注释语法

     

    一、样式表

     

    (一)样式表的分类

     

    1.内联样式表

     

      和HTML联合显示,控制精确,但是可重用性差,冗余较多。

     

      例:<p style="font-size:14px;">内联样式表</p>

     

    2.内嵌样式表

     

      作为一个独立区域内嵌在网页里,必须写在head标签里面。

     

      <style type="text/css">

     

      p   //格式对p标签起作用

     

      {

     

      样式;

     

      }

     

      </style>

     

    3.外部样式表

     

      新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表附加样式表。一般用link连接方式。

     

      有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他的样式),如下:

     

     

     

     

     

    (二)选择器

     

    1.标签选择器。用标签名做选择器。

     

     

     

    2.class选择器。都是以“.”开头。

     

     

     

    3.ID选择器。以“#”开头。

     

    <div id="样式名">

     

     

     

    4.复合选择器

     

    1)用隔开,表示并列。

     

     

     

    2)用空格隔开,表示后代。

     

     

     

    3)筛选“.”

     

     

     

     

     

     

     

    二、样式属性

     

    (一)背景与前景

     

    1.背景:

     

     

     

    2.前景字体:

     

     

     

    (二)边界和边框

     

    border(表格边框、样式等)、margin(表外间距)。padding(内容与单元格间距)。

     

     

     

    (三)列表与方块

     

    widthheight、(topbottomleftright)只有在绝对坐标情况下才有用。

     

     

     

     

     

     

     

     

    链接的style

     

      a:link 超链接被点前状态

     

      a:visited 超链接点击后状态

     

      a:hover 悬停在超链接时

     

      a:active 点击超链接时

     

      在定义这些状态时,有一个顺序l v h a

     

     

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <!--<style type="text/css">
    div,p
    {
    font-size:36px;
    color:#90F;
    background-color:#0F3;}

     


    </style> -->
    <link href="Untitled-3.css" rel="stylesheet" type="text/css" />
    </head>

     

    <body>
    <div id="qq">div<p>标签</p></div>
    <span style="background-color:#CF3; color:#F00">span层标签</span>
    <p>这是一个温暖的春天。</p><p>12345</p>
    <a href="http://www.autohome.com/">汽车之家</a>

     

    </body>
    </html>

    @charset "utf-8";
    /* CSS Document */
    <style>
    *
    {
    margin:0px;
    padding:0px;}
    p
    {
    font-size:36px;
    color:#90F;
    background-color:#0F3;}
    #qq
    {
    background-color:#00F;
    font-size:50px;
    color:#F00;}
    #qq p
    {
    background-color:#00F;
    font-size:80px;
    color:#6F0;}

    a:link
    {
    text-decoration:none;
    color:#000;}
    a:visited
    {
    text-decoration:none;
    color:#000;}
    a:hover
    {
    color:#F00;
    text-decoration:underline;}
    a:active
    {
    text-decoration:underline;
    color:#C60;}
    </style>

     

     

  • 相关阅读:
    App架构经验总结
    通过C语言程序改动控制台的背景和前景颜色
    java实现读取yaml文件,并获取值
    java 实现yaml 数据转json与map
    yaml标记语言的简介
    重新学习之spring第二个程序,配置AOP面向切面编程
    重新学习之spring第一个程序,配置IOC容器
    重新学习Spring之核心IOC容器的底层原理
    hibernate之xml映射文件关系维护,懒加载,级联
    hibernate映射xml文件配置之一对多,多对多
  • 原文地址:https://www.cnblogs.com/xiongxiaobai/p/5307384.html
Copyright © 2011-2022 走看看