精华内容
下载资源
问答
  • border 样式属性用于设置元素的边框属于综合属性,可以单独设置边框的某一类样式也可以进行综合设置 边框的样式组成: border-width 设置边框粗细;常用的属性值为像素(px) border-style 设置边框线型 ...

    border 样式属性用于设置元素的边框,属于综合属性,可以单独设置边框的某一类样式也可以进行综合设置

    边框的样式组成:

    • border-width 设置边框粗细;常用的属性值为像素(px)

    • border-style 设置边框线型

      属性值 描述
      solid 实线
      dashed 虚线
      dotted 点状线
    • border-color 设置边框颜色;属性值可以是 颜色单词(red、purple等)、十六进制颜色值(#fff、#ff0000 等)、rgb(255,255,255);默认值为 transparent(透明),如果不设置边框颜色的在浏览器中默认显示为黑色边框,是因为继承了 html 默认的 color 属性值为:rgb(0, 0, 0)

    通过 border-widthborder-styleborder-color 都是统一设置元素的四条边框的样式,无法单独设置某一条边框

    边框简写:

    上述边框样式可以进行简写(综合设置)

    语法:

    border: border-width border-style border-color;
    

    示例:

    border: 1px solid #f00;
    

    单独设置某一条边框:

    样式属性:

    • border-top 上边框
    • border-right 右侧边框
    • border-bottom 底部边框
    • border-left 左侧边框

    这些属性都是综合属性,需要设置 border-widht、border-style 和 border-color

    示例:

    border-right: 2px dashed red;
    

    如果想要单独设置某条边框的粗细、样式或颜色,还可以进行细分;不过实际开发中用的不多

    以上边框为例,样式属性有:

    • border-top-width 上边框的边框粗细
    • border-top-style 上边框的边框样式
    • border-top-color 上边框的边框颜色
    展开全文
  • 概述 Cascading(级联) Style(样式) Sheets(工作表) 层叠样式表;CSS 负责页面样式属于网页...所谓 “格式语句” 就是CSS的属性,CSS的属性有很多类别,例如:尺寸、文本、背景、边框等;目前 CSS 最新版本是 c...

    概述

    Cascading(级联) Style(样式) Sheets(工作表) 层叠样式表;CSS 负责页面样式,属于网页中的表示层;CSS 规则是由“选择器” 和 “格式语句” 组成,通过 “选择器” 查找页面中指定的 HTML 元素,结合 “格式语句” 来控制元素的样式;所谓的 “格式语句” 就是CSS的属性,CSS的属性有很多类别,例如:尺寸、文本、背景、边框等;目前 CSS 的最新版本是 css3

    CSS 的语法组成

    在这里插入图片描述

    CSS 的书写位置、引入方式

    内联式

    通过 style 直接将 CSS 样式写在 HTML 标签中(开始标签中),样式只作用于当前元素内部;优点是十分高效、便捷;但是同时也造成了不能够重用样式的缺点,不利于后期代码的维护

    <div style="color: red; font-size: 16px;">内联式</div>
    

    在这里插入图片描述

    嵌入式

    所谓嵌入式,就是将 CSS 样式写在 <style></style> 标签之间;style 标签一般放在 head 标签中;作用范围是当前页面;代码可维护性比较差

    • HTML5 之前需要设置 type=“text/css”,用于告诉浏览器该标签包含的内容为什么类型
    <head>
      <style type="text/css">
        div {
    	  /* 文本颜色 */
          color: #fff;
          /* div 元素的宽 */
          width: 200px;
          /* 高 */
          height: 100px;
          /* 背景色 */
          background: skyblue;
        }
      </style>
    </head>
    
    <div>嵌入式</div>
    

    在这里插入图片描述

    外联式
    通过 <link /> 标签链接外部样式文件(后缀名为 .css 的文件)
    • 使用时需要在 HTML 文件中设置 rel="stylesheet",指定当前文档与被链接文档之间的关系(外部样式表);
    • href 属性指定链接的地址,link 标签同样要放在 style 标签中;
    • 在实际开发中通常使用外联样式文件的方式,优点是可维护性好;
    • 外联 CSS 是一个单独的文件,可以复用于多个页面,在修改的时候可以针对性地修改某一块区域;
    • 相较于内联式和嵌入式,省去了到每个页面中修改样式的步骤,提高了开发效率,同时在一定程度提高了性能
    • css 文件中只需要写 CSS 样式代码和 CSS 注释即可,不需要写别的内容

    示例:

    目录结构
    在这里插入图片描述
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <!-- 通过相对地址链接外部样式文件 -->
      <link rel="stylesheet" href="./css/index.css" />
    </head>
    <body>
      <div>外联 css 样式</div>
    </body>
    </html>
    

    index.css

    div {
      color: red;
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
    

    在这里插入图片描述

    通过 @import 导入部样式文件

    语法:@import url("这里写文件路径")

    在 HTML 文件中使用 @import 时,必须要将其放在 style 标签中

    <style>
    @import url("./css/index.css");
    </style>
    
    展开全文
  • CSS3轮廓属性

    2018-10-06 07:50:52
    外轮廓outline在页面中呈现效果和边框border呈现效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式, 只有元素获取到焦点或者被激活时呈现。...

    CSS3 外轮廓属性
    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式, 只有元素获取到焦点或者被激活时呈现。
    -outline- color: 定义轮廓线的颜色,属性值为CSS中定义的颜色值。在实际应用中,省略时此参数的默认值为黑色。
    -outline- style: 定义轮廓线的样式,属性为CSS中定义线的样式。在实际应用中,省略时此参数的默认值为 none,省略后不对该轮廓线进行任何绘制。
    -outline- width: 定义轮廓线的宽度,属性值可以为一个宽度值。在实际应用中,省略时此参数的默认值为 medium,表示绘制中等宽度的轮廓线。
    -outline- offset: 定义轮廓边框的偏移位置的数值,此值可以取负数值。当此参数的值为正数值,表示轮廓边框向外偏离多少个像素; 当此参数的值为负数值, 表示轮廓边框向内偏移多少个像素。
    -inherit: 元素继承父元素的 outline效果。
    轮廓和边框的对比
    http:/ /www.iis7.com/b/wzjk/
    outline和border的对比outline属性创建的外轮廓线外表上和border极其相似,但实际上有明显的不同。
    -border属于盒模型的一部分,直接影响元素盒子的大小,而outline创建的外轮廓线是画在一个框的“上面”,不会影响该框或任何其他框大小,因此outline 创建的轮廓线不会影响文档流, 也不会破坏网页布局。
    -outline创建的轮廓线表面上和border一样, 可以创建轮廓线的颜色、线型样式、线型粗细大小,但和border有一点完全不一样。outline创建的外轮廓线在 元素各边都一样, 这和border不一样,不能像border边框一样,设置outline-top或outline-left之类。
    -border创建的元素边框可以单边设置,而outline创建的外轮廓线始终是闭合的。
    -outline创建的外轮廓线可能是非矩形的,如果元素是多行, 外轮廓线就至少是能够包含该元素所有框的外轮廓。可border不一样, 他将使用一个边框包括整个 元素。
    -border仅可以设置元素的边框,只能向外扩展,而outline创建的外轮廓线,可以通过outline-offset的值,向元素外部(outline-offset值为正值)或向元素内部(outline- offset)值为负值创建封闭的轮廓。

    展开全文
  • CSS3外轮廓属性

    2015-05-02 17:34:45
    外轮廓outline在页面中呈现效果和边框border呈现效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。...
    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。


    outline属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持,在CSS3中对outline作了一定的扩展,在以前的基础上增加新特性。outline属性的基本语法如下:

    outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit


    从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style,而outline-width相当于border-width,只不过CSS3给outline属性增加了一个outline-offset属性,其取值说明如下。


     


    属性值


    属性值说明


    outline-color


    定义轮廓线的颜色,属性值为CSS中定义的颜色值。在实际应用中,可以将此参数省略,省略时此参数的默认值为黑色。


    outline-style


    定义轮廓线的样式,属性为CSS中定义线的样式。在实际应用中,可以将此参数省略,省略时此参数的默认值为none,省略后不对该轮廓线进行任何绘制。


    outline-width


    定义轮廓线的宽度,属性值可以为一个宽度值。在实际应用中,可以将此参数省略,省略时此参数的默认值为medium,表示绘制中等宽度的轮廓线。


    outline-offset


    定义轮廓边框的偏移位置的数值,此值可以取负数值。当此参数的值为正数值,表示轮廓边框向外偏离多少个像素;当此参数的值为负数值,表示轮廓边框向内偏移多少个像素。


    inherit


    元素继承父元素的outline效果。

    展开全文
  • border-images可以说也是CSS3中重量级属性,如同圆角、边框颜色属性border-color、块阴影属性一样,也是属于边框属性一员。 从其字面意思上看,我们可以理解为“边框-图片”,通俗说也就是使用图片作为...
  • CSS3 outline(轮廓属性)

    2018-10-05 09:55:13
    CSS3 外轮廓属性 ...外轮廓outline在页面中呈现效果和边框border呈现效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式, 只有元素获取...
  • 盒子模型(box model) 盒子组成部分 组成部分 ...边框 ...内容区大小有 width 和...边框属于盒子边缘,里面属于盒子内部,外面是盒子外部。边框的大小会影响整个盒子大小 设置边框至少要三个样式 边框的宽度 bor
  • 外轮廓outline在页面中呈现效果和边框border呈现效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。...
  • 几个元素属性用来表示元素高度和宽度: 1.offsetHeight:元素在垂直方向上所占用...同理还有offsetWidth和clientWidth,这几个属性都是属于元素本身属性,不属于CSS样式,并且都是只读,无法修改,每次访问都
  • CSS3中outline

    2018-10-05 10:01:13
    CSS3 外轮廓属性外轮廓outline在页面中呈现效果和边框border呈现效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式, 只有元素获取到焦点或者被...
  • css学习22:应用轮廓

    2021-02-11 10:43:30
    边框和轮廓最大区别是:轮廓不属于页面,因此应用轮廓不需要调整页面布局。 轮廓属性属性 说明 值 outline-color 设置外围轮廓颜色 颜色 outline-offset 设置轮廓距离元素边框边缘偏移量 长度 ...
  • JS之onFocus / onBlur / onChange 事件

    千次阅读 2015-05-21 14:42:35
    这三个不算是JS方法,属于HTML元素的属性吧,在做表单时候比较有用,最常见是嵌在input;里面对元素直接使用 onFocus 获得焦点 时候 触发事件,eg:改变点击时候的边框样式 onBlur 是 失去焦点时候 ...
  •  一个css与css3都有效code,如果浏览器不支持css3,那么只会以css的样式显示。最常见就是圆弧角。一个只在css3中有效code,如果浏览器不支持css3,那么其显示效果就不会出现。 css3和css,在编写code时候,...
  • CSS3权威指南读书笔记

    2016-08-18 23:03:33
    CSS3权威指南笔记12 CSS3简介12.1CSS3中,放弃采用总体结构,采用模块和模块...13 选择器13.1 选择器概述使用元素class属性有两个缺点:第一,class属性本身没有语义,是纯粹为CSS样式服务属于多余属性;第二,使
  • css入门笔记

    2018-05-15 14:58:57
    轮廓指的是边框边框,绘制于边框外的线条。 属性:outline:width style color; width:宽度 style:线条样式 color:线条颜色 outline:none/0; 取消轮廓 5、框模型 保持设置的宽高 box-sizing:border-box; 1...
  • 首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元素在页面中的位置 要获取元素的偏移量和下方五个属性有关: ...
  • html表格及表单

    2020-05-24 16:55:43
    th是表头中内容,也属于td,不过有一些样式 tr为行标签,td为列标签 colspan表示跨行 rowspan表示跨列 样式: table和td之间有一个默认距离,通过border-spacing属性可以设置这个距离 border-spacing:0px; 就...
  • CSS 语言基础

    2011-08-03 23:39:47
    最近用HTML&CSS做了几个网页,对CSS有了较深入...CSS是一门用来修改元素属性的语言,包括元素文本大小、颜色、粗细、背景色、边框样式及颜色,甚至是在页面上位置。 在HTML&CSS中,颜色经常以16进制数格式来表示
  • 下列选项中,不属于属性的是( )。 A: capitalize B: line-through C: lowercase D: uppercase 5.关于CSS的描述,下列说法正确的是( )。 A: 当CSS作为独立的文件时,必须以.html为后缀名 B: CSS用于设置HTML...
  • jQuery详细教程

    2013-04-25 14:16:42
    jQuery详细教程,讲解很透彻, ...事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中: 实例 ...
  • 指向的是window对象。而所谓的对象也就是引用类型,实际上在后台执行环境中,它就是一个指针。 回到Js当代码在执行的时候,会创建变量对象并且构建一个作用域链,而这个对象保存着当前函数...
  • flash shiti

    2014-03-14 10:32:41
    39.以下操作哪几项属于恢复上次操作? A. 打开Edit菜单下Redo命令 B. 按Crrl+z键 C. 按Crrl+y键 D. 打开Edit菜单下Undo命令 40.Number将参数转换成数值其返回值有哪几种情况? A. 如果X为一数字,则返回值...
  • 实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入移动选择 219 实例183 通过下拉列表选择头像 ...
  • 实例178 去掉下拉选项的边框 215 实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入移动选择 219 实例183 通过下拉列表选择头像 ...
  • 罗刚君Word精灵 v3.0.rar

    2019-07-13 05:22:16
    10.新增“拆分跨页表格”功能,当表格跨页时(Excel中复制到Word中表格),第二页表格会缺少上边框线,打印后太难看。本工具可以将跨页表格拆分成两个表格,分别显示在两页中,从而解决问题。 11.新增“选中...
  • asp.net知识库

    2015-06-18 08:45:45
    动态调用对象的属性和方法——性能和灵活性兼备方法 消除由try/catch语句带来warning 微软应试题完整版(附答案) 一个时间转换问题,顺便谈谈搜索技巧 .net中正则表达式使用高级技巧 (一) C#静态成员和...

空空如也

空空如也

1 2
收藏数 36
精华内容 14
关键字:

属于边框属性样式的是