zoukankan      html  css  js  c++  java
  • 3月22日 样式表

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

    一、样式表

    (一)样式表的分类

    1.内联样式表

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

    2.内嵌样式表

    必须写在head标签里面;

    <style>

    p

    {

    样式

    }

    </style>

    3.外部样式表

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

    (二)选择器

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

    <style type="text/css">

    p

    {

    样式

    }

    </style>

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

    <head>

    <style>

    .main

    {

    样式

    }

    </style>

    </head>

    <body>

    <div class="main">

    </div>

    </body>

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

    <head>

    <style>

    #main

    {

    样式

    }

    </style>

    </head>

    <body>

    <div id="main">

    </div>

    </body>

    4.复合选择器

    (1)用“,”隔开,表示并列

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

    (3)筛选“.”。

    二、样式属性

    (一)背景与前景

    1.背景

    background-color:背景色

    background-image:url;设置背景图片

    background-attachment:fixed;背景固定

    background-attachment:scroll;背景随着字体滚动

    background-repeat:no-repeat;背景不平铺

    background-position:center;背景居中

    background-position:right top;背景放置在右上角

    2.前景字体

    font-family:"微软雅黑"

    font-size:字体大小

    font-weight:bold;字体加粗

    font-style:italic;字体倾斜

    color:字体颜色

    text-decoration:underline;下划线

    text-align:center;水平居中对齐

    vertical-align:middle;垂直居中对齐

    text-indent:首行缩进量

    line-height;行高

    diasplay:none;不显示

    visibility:hidden;可视性隐藏

    (二)边框和边界

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

    border-top;上边框

    border-bottom:下边框

    border-left:左边框

    border-right:右边框

    margin:20px opx 20px 0px:顺序为上右下左

    padding:内容与边框的间距

    链接的style:

    a:link 超链接被点前状态

    a:visited 超链接点击后状态

    a:hover 悬停在超链接时

    a:active 点击超链接时

  • 相关阅读:
    Android报表库aChartEngine系列(pie chart)
    二分查找算法java实现
    Android报表库aChartEngine系列(介绍)
    如何自定义view
    服务器性能瓶颈分析方法
    浅析C#中new、override、virtual关键字的区别
    Team Foundation Server 实例安装过程
    asp.net2.0站点应用程序池错误的问题
    C#字符串去除html标记
    web.config加密的问题
  • 原文地址:https://www.cnblogs.com/dongqiaozhi/p/5318893.html
Copyright © 2011-2022 走看看