精华内容
下载资源
问答
  • 主要介绍了使用JavaScript创建样式表和新样式规则的相关资料,需要的朋友可以参考下
  • js 动态创建元素设置样式

    千次阅读 2018-02-28 13:06:00
    <title>js动态创建元素设置样式 * { margin: 0; padding: 0; } #zmkt { width: 600px; height: 250px; margin: 50px auto; background-color: #EAE7FF; text-align: center; }   window....

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="微普科技 http://www.wiipu.com" />
            <title>js动态创建元素并设置样式</title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                #zmkt {
                    width: 600px;
                    height: 250px;
                    margin: 50px auto;
                    background-color: #EAE7FF;
                    text-align: center;
                }
            
            </style>
            <script>    
                window.onload = function (){
                    var oZmkt = document.getElementById("zmkt");
                    var input=document.createElement("input");
                input.setAttribute("type", "text");//设置属性type为text
                    input.style.width="400px";
                    input.style.height="50px";
                    input.style.marginTop="100px";
                    
                    input.value="请输入你的手机号";
                    oZmkt.appendChild(input);
                    
                    
                }
            </script>
        </head>
        <body>
            <!--提示:使用js动态创建元素input输入框,添加到form元素中,
                并为输入框设置样式,宽:400px;高:50px;margin-top: 100px;
                type类型为text;value值为:请输入你的手机号
            -->
            <form action="" id="zmkt">
                
            
                
            </form>

    转载于:https://my.oschina.net/kitty0107/blog/1626072

    展开全文
  • 创建外部样式

    千次阅读 2017-11-30 21:04:30
    由于这些样式并不是HTML文档的一部分,而是在HTML文档的外部独立存在,故称外部样式表。 样式表文件是纯文本文件,可以使用任何文本编辑器来编辑,这里使用Windows自带的记事本,来创建外部样式表。步骤如下:

    样式表的作用是控制网页样式,只有创建样式表,并把它应用到网页中,才能发挥样式表的作用。

    创建外部样式表

    外部样式表,是在网页外部的样式表文件中定义的样式。由于这些样式并不是HTML文档的一部分,而是在HTML文档的外部独立存在,故称外部样式表。

    样式表文件是纯文本文件,可以使用任何文本编辑器来编辑,这里使用Windows自带的记事本,来创建外部样式表。步骤如下:

    1)在Windows系统中,点击开始 → 所有程序 → 附件 → 记事本,打开记事本。并在记事本中编写CSS代码,可以根据需要在CSS代码添加注释。如图 1‑7 所示:

    使用记事本创建样式表图1-7 使用记事本创建样式表

    2)点击菜单栏中的 文件 → 保存 命令,或直接在键盘上按Ctrl + s,来保存文件。

    保存文件时,保存类型选择“所有文件”;编码,选UTF-8;文件名可以随意填写,但文件的后缀名必须是 .css,表明这一个层叠样式表。再选择保存位置,建议为网站创建 css 目录,来专门存放样式表文件。如图 1‑8 所示:

    保存样式表文件图1-8 保存样式表文件

    说明:

    可以使用你喜欢的任何名称为样式表文件命名,如果网站只有一个样式表文件,通常会命名为 style.css 或 styles.css。

    更大的网站通常会拥有多个样式表文件,reset.css、base.css、global.css 和main.css 是常见的样式表名称,它们通常包含应用于网站大多数页面的样式规则。

    网站制作者通常会为某些区块创建特有的 CSS 文件,来作为对基本样式的补充。如,对于一个商业网站,products.css可能是为产品相关页面准备的样式表。

    创建了样式表之后,需要将它加载到HTML页面中,从而为内容应用这些样式规则。可以使用链接或导入的方式,来为HTML页面加载外部样式表。

    链接外部样式表

    在HTML文档头部,使用 link 元素来链接外部的CSS文件。link 元素为空元素,它只有开始标签,没有结束标签,要在开始标签的结尾处加上 / 来结束该元素。

    在 link 元素中,通过rel 属性来定义本HTML文档与被链接文档之间的关系,rel = "stylesheet" 表明引入的文件是样式表;通过 href 属性定义样式表文件的URL,可以使用相对路径,也可以使用相对路径,相对路径是相对于本HTML文档而言的。如:

    
    
    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>链接样式
    6. <link rel="stylesheet" href="style.css" />
    7. </head>
    8. <body>
    9. </body>
    10. </html>

    上述代码表示,为本文档引入文件名称为 style.css 的外部样式表,该样式表文件与本HTML文档位于相同目录下。

    一个页面可以包含多个 link 元素,浏览器会加载多个样式表,合并它们的规则,将其全部应用于页面。但是,加载样式表会影响页面的加载速度。

    导入外部样式表

    也可以在HTML文档头部的 style 元素中,使用 @import 指令导入一个外部样式表文件。如:

    
    
    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>导入样式
    6. <style>
    7. @import url(style.css);
    8. </style>
    9. </head>
    10. <body>
    11. </body>
    12. </html>

    这种方式是通过 @import 指令,把外部样式导入到当前页面。一个文档中,也可以包含多个,来导入多个样式表。

    由于 @import 指令效率低下,不但会增加额外的请求次数,还会导致不可预料的问题,故不推荐使用。因此,对于大多数情况,还是推荐使用链接外部样式表的方式。

    外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式,并让网站上的每个页面都加载这个外部样式表,来确保每个页面都有相同的设置。

    对于有很多页面的网站,外部样式表能够做到CSS代码最大限度的重用。日后,如果要改变页面的外观,只需编辑CSS文件,而无需修改HTML文件,真正实现表现和内容的分离。

    使用外部样式表的另一个好处是,一旦浏览器在某个页面加载了它,在随后浏览引用它的页面时,通常无需再向Web 服务器请求该文件。浏览器会将它保存到缓存中,也就是保存到用户的计算机里,并使用这个版本的文件。这样做可以提供页面的加载速度。

    如果随后对样式表作了修改,再将它传到Web 服务器,浏览器就会下载更新后的文件,而不是使用缓存的文件。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • ** 样式创建(内部样式表 外部样式表 内联...注:使用style标记创建样式时,最好将该标记写在<head></head>; 2、外部样式 怎样导入外部样式表: *方法一:外部样式表的创建:link <link rel="style...

    **

    样式的创建(内部样式表 外部样式表 内联样式表)

    **
    1、内部样式表
    写在head里面
    语法:

    <style type="text/css">
    

    /css语句/

    注:使用style标记创建样式时,最好将该标记写在<head></head>;
    2、外部样式
    怎样导入外部样式表:
    *方法一:外部样式表的创建:link

    <link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
    

    说明:
    使用link元素导入外部样式表时,需将该元素写在文档头部,即<head>与</head>之间。
    rel=“stylesheet” 建立关联性 (赛尔是)
    href=”CSS样式表的路径”
    Type=“text/css” 定义文档类型(文档行的css样式)
    rel(relation英 [rɪˈleɪʃn] 关联的意思):用于定义文档关联,表示关联样式表;
    type:定义文档类型;
    方法二:外部样式表的导入 @import

    <style type="text/css">
    	@import url(目标文件的路径及文件名全称);
    	</style>
    

    注:@和import之间没有空格 url和小括号之间也没有空格;必须结尾以分号结束;
    3、内联样式 (行间样式,行内样式,嵌入式样式、内嵌样式)
    语法:<标签 style=“属性:属性值;属性:属性值;”></标签>

    例:<div style="width:500px; height:200px;"></div>
    
    展开全文
  • Popupwindow的创建样式的设计

    热门讨论 2016-05-17 13:27:07
    创建popupwindow,并且给其边框加上好看的效果。与当前流行app:qq、微信、钉钉的popupwindow效果基本一致。
  • 运用JavaScript创建html标签添加样式

    千次阅读 2017-10-18 16:10:53
    运用JavaScript创建html标签添加样式
    <html>
        <body>
            <article>
                <p>这是第一段。</p>
            </article>
    
        <script type="text/javascript">
            window.onload = function(){
                var p1 = document.createElement("p");
                var txt1 = document.createTextNode("2017");
                p1.appendChild(txt1);
                var parent = document.getElementsByTagName("article")[0];
                var p2 = document.getElementsByTagName("p")[0];
                parent.insertBefore(p1,p2);
                p1.setAttribute("style","background-color:blue;color:red;width:100px;height:200px")
            }
        </script>
    
        </body>
    </html>

    步骤:
    1.创建一个新的元素节点p;(使用document.createElement(element)方法。)
    2.创建一个新的文本节点;(使用document.createTxetNode(string)方法。)
    3.将新建的文本节点插入新建的元素节点;(使用element.appendChild(node)方法,可向元素节点的末尾添加子节点。)
    4.获取新建元素节点的父节点;(使用document.getElementsByTagName(element)方法。)
    5.获取新建元素插入位置的下一个兄弟节点;
    6.插入新建元素;(使用element.insertBefore(newnode,existingnode)方法。)
    7.为新建元素设置css属性。(使用element.setAttribute(attribute,attribute-value)方法。)
    8.绑定onload事件。(window.onload。)

    展开全文
  • 使用geoserver 创建样式简单图解
  • 使用geoserver创建样式图解,入门知识
  • 下面样例中,使用createElement方法,添加了一个iframe元素,设置了一些样式。 // 创建元素 var el = document.createElement("iframe"); // 设置元素ID el.id="_test_create_ele"; // 设置元素定位 el.style....
  •   通过建立正文、标题、表格等的段落样式可以方便的统一调整文章各部分样式类型。点击样式栏右下角的小三角可以弹出样式对话框,执行新建、管理、删除样式等操作。 首先建立“论文正文”样式: 根据格式要求设置中...
  • 创建CSS样式表的三种方式

    千次阅读 2018-08-20 21:46:57
    创建CSS样式表的三种方式 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择 创建一个以.css为扩展名的外部样式表,在里面写CSS语句 使用link标签引入到html页面中 base.css文件 *{ ...
  • Bootstrap使用样式引用步骤,以防掉坑

    千次阅读 2019-10-28 10:05:49
    Bootstrap使用样式引用步骤,以防掉坑 1.创建文件夹结构 先新建文件夹,创建结构下 在这里插入图片描述 再把你下载好的bootstrap文件里的文件夹css、fonts、js复制粘贴到你新建文件夹里的bootstrap文件,你引用的...
  • 今天继上篇Qt 之 样式表的使用之设置样式的方法 ,来简单谈一谈Qt中样式选择器的一些用法。二、样式选择器我们先看一下Qt文档中对于不同选择器的解释:可以在Qt助手中输入 The Style Sheet Syntax 然后查看 Selector...
  • Android中创建具有Dialog样式的Activity

    千次阅读 2018-12-26 16:49:18
    Android中创建具有Dialog样式的Activity 简单描述来说Dialog样式的Activity就是具有Dialog的外观和Activity的特性,我们可以把他当做一种特殊的Dialog来使用。 那么问题来了,既然有了一般的Dialog为什么还需要...
  • 创建CSS 样式表有三种方式

    千次阅读 2016-11-24 20:02:47
    创建CSS 样式表有三种方式:1.元素内嵌样式;2.文档内嵌样式;3.外部引入样式。 (1) 元素内嵌样式这是一段文本 ...在元素之间创建元素,通过选择器的方式调用指定的元素设置相关CSS。    p {color: blue;  
  • EasyPoi 的样式使用及其自定义

    千次阅读 2019-04-11 14:30:07
    1.使用系统样式 TemplateExportParams和ExportParams 两个参数类都有一个属性 /** * Excel 导出style */ private Class<?> style = ExcelExportStylerDefaultImpl.class; 默认就是默认的style类,只是做了一个...
  • 3) 易错:单独修改样式的属性使用“style.属性名”。注意在css属性名在javaScript中操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为JavaScript则是style.backgroundColor;元素样式名是class...
  • Vue中使用样式(class与内联样式)

    千次阅读 2021-03-09 17:25:12
    文章目录在Vue中使用样式使用class样式class样式案例:使用内联样式内联样式案例 在Vue中使用样式 使用class样式 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 数组中使用三元表达式 ...
  • 当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的。 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时,...
  • Qt样式表(6):使用样式表设置工具栏及菜单的外观 若对C++语法不熟悉,建议参阅《C++语法详解》一书,电子工业出版社出版,该书语法示例短小精悍,对查阅C++知识点相当方便,对语法原理进行了透彻、深入详细的讲解...
  • 使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部: &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;amp;...
  • 接上一篇,地图服务发布完成后,如果不进行样式调试,那么地图看上去杂乱无章,毫无美感可言。因此,我们通过样式文件的设置,来美化地图。 geoserver中标准的样式文件为.sld文件,该文件是文本文件,语法规则遵循...
  • 1 新建样式1.1 调出样式新建文件,打开样式窗格,默认只有标题1,标题2, 此时点击标题2,将出现标题3,点击标题3,将出现标题4。 图 1‑1 列出标题1-4的样式1.2 修改样式1.2.1 第一步点击样式中的标题1的小三角...
  • CSS样式表的使用

    万次阅读 多人点赞 2018-07-21 13:26:50
    由于只在做课程设计和实习的时候使用过,没有系统的学习过,使得自己对于CSS的使用一直处于能用,但是容易弄混的阶段。为了弄清楚CSS样式表的使用,特地看书系统学习,现总结如下: CSS是通过选择器对不同的HTML...
  • 原因: 新添加的dom,在实际意义上是一个子组件,vue中当我们...使用深度选择器 >>> 或 /deep/。注意:>>>只在css中生效,Less\Sass中不生效。语法: css : .parent >>> .child{ ...
  • //设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal。。。。     二、设置列表图片符号 为ul,ol设置图片符号 ul,ol{  list-style-image: url("li....
  • 使用JavaScript动态添加CSS样式规则

    万次阅读 2014-09-05 21:20:23
    动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。
  • Vue 2.0的学习笔记:在Vue中使用样式

    千次阅读 2018-05-27 21:58:42
    到目前为止,学习Vue的时候也写了相当的示例,但老实说,这些示例在视觉上没有什么吸引人的地方。今天我们将学习如何将样式运用到我们的元素中,让事情变得更加有趣。首先我们将通过将内联样式添加到HTML的元素中...
  • 改变dom节点样式另一种方式是利用js动态创建一个style标签,再填入css属性,再添加到页面  hello world function addStyleNode( str){ var styleNode=document.createElement("style"); styleNode....
  • React中使用外部样式的3种方式

    千次阅读 2019-05-27 05:30:44
    1、css-in-js是一种使用 js 编写 css 样式的 css 处理方案。它的实现方案有很多,比如styled-components、polished、glamorous(paypal 开源的,不再维护)、radium、emotion等等。 2、其中最成熟的便是styled-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 468,397
精华内容 187,358
关键字:

如何创建并使用样式