• CSS样式表


    层叠样式表:CSS Cascading Style Sheet。V2.1  (3.0版本有些旧系统不支持)
    控制页面样式外观。

    一、样式表分三类:
    1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。
    <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线)

    2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。
    <head>
    ...
    <style type="text/css">
    input
    {
       border:0px;
       border-bottom:1px solid red;
    }
    </style>
    </head>

    3.外部样式表。——放在一个单独的.css样式表文件中。——可以对整个网站。

    (1)外部样式表的定义

    (2)外部样式表的调用

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

    二、样式表的选择器:
    内嵌、外部样式表的一般语法:
    选择器

       样式=值;
       样式=值;
       样式=值;
       ....

    1.基本:
    (1)标签选择器:用标记名称来当选择器。
    input{.....}
    div{...}
    span{...}
    td{...}

    (2)类别选择器:在HTML元素中使用class对元素进行分类,然后使用这个class的值作为选择器。以"."开头
    .class的名{.....}

    (3)ID选择器:针对HTLM中相应ID的元素起作用。以"#"开头
    #ID的名{...}
    #d1{font-size:48px;}
    #dd{border:5px dotted red;}

    2.复合:
    (1)用逗号隔开。——并列关系,同时起作用。

    input,#dd,.yellow,.uu
    {
       color:gray;
       line-height:28px;

    }

    (2)用空格隔开。——后代关系。
    div uu
    {
       background-color:blue;
    }

       <input name="txt" type="text" class="uu"/>
       <div>

      <input name="txt" type="text" />
      <input name="txt" type="text" class="uu" value="******"/>

          <span>
                <input name="txt" type="text" class="uu" value="******"/>
          </span>
       </div>

    什么是后代???后代即父辈以后的都是后代 而子集值包含下一代
    注意:<p>里面不要配div  反之则可以

     (3)class二次筛选。
    标签选择器.class选择器{....}

    input.uu
    {
       border:5px double red;
    }

    例:

    对比:div .uu与div.uu的不同。

    中间有空格的表示后代,没有空格的是筛选的意思。


    三、样式属性

    1、背景与前景

    background-color:#90;   背景色,样式表优先级高

    background-image:url(路径)  设置背景图片(默认)

    background-attachment:fixed;   背景是固定的,不随字体滚动

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

    background-repeat:no-repeat;   no-repeat,不平铺;repeat,平铺repeat-x,横向平铺;repeat-y,纵向平铺

    background-position:center;   背景图居中 ,设置背景图位置时,repeat必须为“no-repeat”

    background-position: right top   背景图放到右上角,

    background-position: left 100px top 200px;   离左边100像素,离上边200像素(可以设为负值

    字体

    font-family:"新宋体";   字体。常用微软雅黑,宋体

    font-size:12px;   字体大小,常用像素12px.14px(网站常用12px和14px),18px,还可以用“em”,"2.5em"即:默认字体的2.5倍,还可以用百分数

    font-weight:bold;   bold是加粗。normal是正常

    font-style:italic;   倾斜,normal是不倾斜

    color:#03C;  颜色

    text-decoration:underline;   下划线,overline是上划线,line-through是删除线,none是去掉下划线

    text-align:center;   水平 居中对齐。left是左对齐。right是右对齐

    vertical-align:middle;   垂直 居中对齐,top是顶部对齐,bottom是底部对齐。一般设置行高后使用,div垂直居中 要把行高拉开能表现出来

    text-indent:28px;   首行缩进量

    line-height:24px;   行高,一般为1.5到2倍字体大小

    2、边界和边框

      border margin padding
    top      
    right      
    bottom      
    left      

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

    border:5px solid blue;/*四边框;5像素宽,实线,蓝色相当于以下3行*/

    border-5px;

    border-style:solid;

    border-color:blue;

    注意 4个边框的顺序是顺时针方向  上  右  下 左

    3、列表与方块

    width height(top right bottom left)  只有在绝对坐标情况下才有用

    list-style:none;  取消序号

    list-style-image:url   图片做序号

    list-stylel :circle  序号变圆圈,样式相当于无序

    list-style-position:outside  序号在内容外  显示不出来

    list-style-position:inside 序号跟内容在一起 会挤着往右走

  • 相关阅读:
    input file 上传图片并显示
    关于npm ---- npm 命令行运行多个命令
    webpack4.x 配置
    React的生命周期
    HTML5 meta 属性整理
    css 命名规范
    html5 标签 meter 和 progress
    .NET Linq TO XML 操作XML
    .NET 字符串指定规则添加换行
    Linux Centos上部署ASP.NET网站
  • 原文地址:https://www.cnblogs.com/691331894w/p/4234907.html
Copyright © 2020-2023  润新知