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

    样式表 CSS:
    三种使用方式:

    1、内嵌样式表
    结构:
    <body>
    <标签名 style="100px;height:50px;font-size:30px; margin-left:50px"></标签名>
    </body>

    margin 与其他元素的距离

    2、内联样式表
    结构
    <head>
    <style type="text/css">
    .class的分组依据{
    样式的属性
    }
    #id的值{
    样式的属性
    }
    标签名{
    样式的属性
    }
    </style>
    </head>
    <body>
    <标签 class="分组依据"id="值"></标签>
    </body>

    3、外部样式表
    在解决方案里右键自己的网站名,选择添加,添加样式表。
    随后把鼠标放在建好的样式表上,拖进HTML代码编辑的页面的head里,自动生成一行链接(link)代码<link href="" rel="" />

    三种标记选择方法:

    .class的分组依据{
    样式的属性
    }
    #id的值{
    样式的属性
    }
    标签名{
    样式的属性
    }


    选择器:
    1、标签选择器
    <head>
    <style tyle="text/css">
    p --格式对p标签起作用
    {
    样式
    }
    </style>
    </head>

    2、class选择器
    可以重复,可以多个class,用空格隔开
    <head>
    <style tyle="text/css">
    .main /*定义样式*/
    {
    wight:100%;
    height:42px;
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div class="main">
    </div>
    </body>

    3、id选择器:
    唯一,不能重复
    <head>
    <style tyle="text/css">
    #main /*定义样式*/
    {
    wight:100%;
    height:42px;
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="main">
    </div>
    </body>

    4、用 , 隔开,表示并列
    <head>
    <style tyle="text/css">
    p,span /*标签p、span两者同样的样式*/
    {
    样式
    }
    </style>
    </head>

    5、用 空格 隔开,表示后代
    <head>
    <style tyle="text/css">
    .main p /*找到使用样式“main”的标签,在该标签里的p标签使用该样式*/
    {
    样式
    }
    </style>
    </head>

    6、用 点 ,筛选
    <head>
    <style tyle="text/css">
    p.sp /*在标签p中class="sp"的标签,执行以下样式*/
    {
    样式
    }
    </style>
    </head>

    id的优先等级最高,其次是class,最后是标签名

    背景与前景
    background-color:#颜色编号 ; 背景色 编程三基色是红绿蓝
    background-image:url(路径); 设置背景图片
    background-attachment:fixed; fixed,背景是固定的,不随字体滚动。scroll,背景随字体滚动。
    background-repeat:no-repeat; no-repeat不平铺,repeat平铺,repeat-x横向平铺,repeat-y纵向平铺
    background-position:center; 设置背景图位置时,repeat必须为no-repeat。center背景图居中,right top 背景图放在右上角,left 100px top 200px 离左边100像素,离上边200像素(可设为负值)

    字体
    font-family; 字体样式
    font-size; 字体大小
    font-wight:bold; bold是加粗,normal是正常
    font-style:italic; italic是倾斜,normal是正常
    coloc:#颜色编号 颜色
    text-decoration:underline; 下划线,overline是上划线,line-through是删除线,none是去掉下划线
    text-align:center; 水平居中对齐,left是左对齐,right是右对齐
    text-indent:28px; 首行缩进量
    vertical-align:middle; 垂直居中对齐,top是顶部对齐,bottom是底部对齐,一般设置行高后使用
    line-height:24px; 行高
    display:none; none不显示,不占位置。inline-block显示为块,不自动换行,宽高可设
    visibility:hidden; 可视性。hidden,隐藏但是占空间。visible显示

    边界和边框
    border:5px solid bule; 四边框:5像素宽度、实线、蓝色(相当于以下三行)
    border-width:5px;
    border-style:solid;
    border-color:bule;
    border-top 5px solid bule; 上边框:5像素宽度、实线、蓝色(分写同上)
    border-bottom 5px solid bule; 下边框:5像素宽度、实线、蓝色(分写同上)
    borderr-left 5px solid bule; 左边框:5像素宽度、实线、蓝色(分写同上)
    borderr-right 5px solid bule; 右边框:5像素宽度、实线、蓝色(分写同上)

    超链接属性
       a:link { text-decoration: none;color: blue}
       a:active { text-decoration:blink}
       a:hover { text-decoration:underline;color: red}
       a:visited { text-decoration: none;color: green}

    其中:
      a:link 指正常的未被访问过的链接;
      a:active 指正在点的链接;
      a:hover 指鼠标在链接上;
      a:visited 指已经访问过的链接;


      text-decoration是文字修饰效果的意思;
      none参数表示超链接文字不显示下划线;
      underline参数表示超链接的文字有下划线

    查询网站:www.css88.com

  • 相关阅读:
    awk 入门教程【转】
    xargs 命令教程【转】
    redis 执行lua脚本
    SpringMVC 执行过程分析
    EurekaClient 服务注册、发现、续约
    Springboot 自动配置 & 自定义Starter
    Netty 实现HttpServer
    Spring中@Import 用法
    Netty自定义任务&Future-Listener机制
    Springboot + Netty + WebSocket 实现简单的聊天
  • 原文地址:https://www.cnblogs.com/sunshuping/p/5601657.html
Copyright © 2011-2022 走看看