精华内容
下载资源
问答
  • 创建外部样式

    千次阅读 2017-11-30 21:04:30
    创建样式表 样式表的作用是控制网页样式,只有创建样式表,并把它应用到网页中,才能发挥样式表的作用。 创建外部样式表 外部样式表,是在网页外部的样式表文件中定义的样式。由于这些样式并不是HTML文档的一部分...

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

    创建外部样式表

    外部样式表,是在网页外部的样式表文件中定义的样式。由于这些样式并不是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 上开源。

    展开全文
  • Vue创建项目步骤

    万次阅读 多人点赞 2019-09-23 10:24:30
    Vue框架使用vue简介MVVM的介绍vue项目步骤vue项目目录详解运行vue可以自动打开浏览器如何使用less写样式 vue简介 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层...

    vue简介

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    MVVM的介绍

    MVVM,一种更好的UI模式解决方案;

    • MVC
      M: Model 数据模型(专门用来操作数据,数据的CRUD)
      V:View 视图(对于前端来说,就是页面)
      C:Controller 控制器(是视图和数据模型沟通的桥梁,用于处理业务逻辑)
    • MVVM组成
      MVVM ===> M / V / VM
      M:model数据模型
      V:view视图
      VM:ViewModel 视图模型

    vue项目步骤

    一、安装node环境

    • 下载地址:https://nodejs.org/en/

    • 检查是否安装成功;如果能够成功输出版本号,就说明我们安装node环境成功;
      在这里插入图片描述

    • 可以使用淘宝镜像提高效率:http://npm.taobao.org/

      输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
      在这里插入图片描述
      检查是否安装成功:
      在这里插入图片描述
      二、搭建vue项目环境

    1、全局安装vue-vli
    npm install --g vue-cli
    在这里插入图片描述

    2、进入项目目录,创建一个基于webpack模板的新项目: vue init webpack 项目名
    在这里插入图片描述

    3、切换到项目,进入项目 cd 项目名,然后在安装依赖 cnpm install
    在这里插入图片描述
    安装成功后,项目文件夹中回多出一个目录 node_modules
    在这里插入图片描述
    4、启动项目npm run dev
    项目启动成功:
    在这里插入图片描述

    vue项目目录详解

    在这里插入图片描述

    • build:构建脚本目录

    1)build.js ==> 生产环境构建脚本;

    2)check-versions.js ==> 检查npm,node.js版本;

    3)utils.js ==> 构建相关工具方法;

    4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;

    5)webpack.base.conf.js ==> webpack基本配置;

    6)webpack.dev.conf.js ==> webpack开发环境配置;

    7)webpack.prod.conf.js ==> webpack生产环境配置;

    -config:项目配置

    1)dev.env.js ==> 开发环境变量;

    2)index.js ==> 项目配置文件;

    3)prod.env.js ==> 生产环境变量;

    • node_modules:npm 加载的项目依赖模块

    • src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

    2)components:组件目录,我们写的组件就放在这个目录里面;

    3)router:前端路由,我们需要配置的路由路径写在index.js里面;

    4)App.vue:根组件;

    5)main.js:入口js文件;

    • static:静态资源目录,如图片、字体等。不会被webpack构建

    • index.html:首页入口文件,可以添加一些 meta 信息等;

    • package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息

    • README.md:项目的说明文档,markdown 格式

    • .xxxx文件:这些是一些配置文件,包括语法配置,git配置等;

    运行vue可以自动打开浏览器

    解决vue不能自动打开浏览器的问题:当我们启动项目npm run dev ,开始运行
    ,命令行提示我们运行成功,但是浏览器没有打开,只能自己手动输入
    解决:

    1. 打开config ==> index.js
      在这里插入图片描述
    2. module.exports配置中找到autoOpenBrowswe,默认设置的是false,然后改为true就可以了
      在这里插入图片描述
    3. Ctrl+C,然后我们重启一下,就能自动打开浏览器了
      在这里插入图片描述

    如何使用less写样式

    1、先安装less依赖: **npm install less less-loader --save **
    在这里插入图片描述
    2、安装成功后,可以在package.json里面看到,多增加了两个模块;
    在这里插入图片描述
    3、然后在vue文件里面编写样式:
    在这里插入图片描述
    写的不好或有错误的地方,接受请教~!

    展开全文
  • Bootstrap使用样式引用步骤,以防掉坑

    千次阅读 2019-10-28 10:05:49
    Bootstrap使用之样式引用步骤,以防掉坑 1.创建文件夹结构 先新建文件夹,创建结构下 在这里插入图片描述 再把你下载好的bootstrap文件里的文件夹css、fonts、js复制粘贴到你新建文件夹里的bootstrap文件,你引用的...

    Bootstrap使用样式引用步骤

    今天我引用Bootstrap框架一直出不来,并不是上面写好的效果,濒临崩溃。不过好在我终于发现了问题所在,分享给大家以防止掉坑

    bootstrap使用四步曲:

    1.创建文件夹结构
    先新建文件夹,创建结构下
    在这里插入图片描述
    再把你下载好的bootstrap文件里的文件夹css、fonts、js复制粘贴到你新建文件夹里的bootstrap文件,你引用的时候直接就是引用bootstrap里的css和js
    在这里插入图片描述
    效果展示:

    <head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
    		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    		
    		<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    

    2.创建html骨架结构

    bootstrap网址里有相关的内容,这里我是复制他们的

    基本模板
    使用以下给出的这份超级简单的 HTML 模版,或者修改这些实例。建议你对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴。

    bootstrap中文网址

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
            <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <!-- 视口的设置:视口的宽度和设备一致,默认的缩放比例和PC端一致,用户不能自行缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>你好,世界!</h1>
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
      </body>
    </html>
    

    注意:
    引用jquery和bootstrap.js顺序
    首先引用jquery,再引用bootstrap.js

    3.引入相关样式文件

    不要忘记引入bootstrap的相关的样式文件,例如
    效果展示:

    <head>
    		<meta charset="utf-8">
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
    		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    		
    		<script src="bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    

    4.书写内容

    • 直接拿bootstrap预先定义好的样式另外来使用
    • 修改bootstrap原来的样式时,要注意权重问题
    • 学好bootstrap的关键在于知道它定义了马偕样式,以及这些样式能实现什么效果
    展开全文
  • 动态创建style标签样式 操作步骤创建style标签 var stylee=document.createElement(‘style’); 给标签添加属性 stylee.type = ‘text/css’; 给标签添加id stylee.id = ‘styleId’; 设置要添加的字符串 var ...

    动态创建style标签样式

    操作步骤:

    1. 创建style标签 var stylee=document.createElement(‘style’);
    2. 给标签添加属性 stylee.type = ‘text/css’;
    3. 给标签添加id stylee.id = ‘styleId’;
    4. 设置要添加的字符串 var sHtml = ‘.un-points .un-point-bullet{background-color:#ffffff;}’;
    5. 给标签添加HTML stylee.innerHTML = sHtml;
    6. 最后在head标签里面添加style标签 document.getElementsByTagName(‘head’).item(0).appendChild(stylee);

    实例代码:

    	var stylee=document.createElement('style');
    	stylee.type = 'text/css';
    	stylee.id = that.config.styledot;
    	var sHtml = '.un-points .un-point-bullet{background-color:#ffffff;}';
    	stylee.innerHTML = sHtml;
    	document.getElementsByTagName('head').item(0).appendChild(stylee);
    
    展开全文
  • 这篇文章完全没有技术难度,但我为什么要写呢?因为我想把这么好的一款插件推荐给需要的小伙伴。因为在我遇到这款插件之前,一直没有找到合适的(step-by-step wizards)创建步骤向导的插件。
  • 创建Spinner的步骤

    千次阅读 2013-11-18 16:43:37
    //第三个参数:设置spinner样式,这里引用的是android系统自带的样式,可以自定义 ArrayAdapter<CharSequence> arrayAdapter=ArrayAdapter.createFromResource(SpinnerActivity.this, R.array.spinner, android....
  • Android中创建具有Dialog样式的Activity

    千次阅读 2018-12-26 16:49:18
    Android中创建具有Dialog样式的Activity 简单描述来说Dialog样式的Activity就是具有Dialog的外观和Activity的特性,我们可以把他当做一种特殊的Dialog来使用。 那么问题来了,既然有了一般的Dialog为什么还需要...
  • Capture One如何创建和应用样式和预设? 应用样式 在浏览器中选择图像。 在顶部工具栏中选择“样式”图标。注意:您可以添加/删除图标。请参阅自定义工具栏。 如果您有“快速”选项卡,则单击“样式和预设”工具。...
  • c#中创建MVC的步骤

    千次阅读 2017-12-28 16:08:38
     1 新建项目对话框中: 打开 Visual C# 模板选取模板 ASP.NET MVC 3 Web 应用程序把项目名称设置为 MvcDemo设置磁盘位置,比如 c:\w3school_demo点击确定 ...2 添加布局(样式:在 Views 文件
  • 运用JavaScript创建html标签并添加样式

    千次阅读 2017-10-18 16:10:53
    运用JavaScript创建html标签并添加样式
  • 1. 给应用程序编写CSS文件 ...本例在src下创建了5个样式文件 (2) Flex支持的CSS文件定义如下: a)  type selector(类选择器)构造如下 mx|TabNavigator  {  backgroundColor: #E9F2F4;
  • Ribbon界面就是微软从Office2007开始引入的一...利用MFC向导创建Ribbon样式的单文档应用程序框架的具体步骤: 1、打开VS,在菜单中选择File->New->Project,弹出标题为“New Project”的对话框。在此对话框左侧面板
  • 颜色,标注的字号,大小,符号的标准,所以要创建很多不同的图层,在图层选择下拉框的左边,有一个按钮,会调出图层窗口,我们还需要根据不同的需求进行编辑更改,那如何快速的进行CAD创建图层并给进行样式更改?...
  • 创建篆体字库的步骤

    千次阅读 2012-08-16 10:14:21
    创建篆体字库的步骤   创建字库总体分为两步   第一步:挑选字迹清晰的篆体,并使用抓屏工具将其保存成.BMP或 .JPG文件。          实例:比如某种篆体字       抓屏后,将保存为“天.bmp”...
  • 利用java创建Excel表格步骤

    万次阅读 2016-07-27 17:08:25
    第一步:创建一个web project工程,建一个包,在包下建一个java文件 第二步:将Excel的四个要用的夹包导入工程中,这四个夹包是97版的和07版的 poi-3.14-20160307.jar (97版夹包) poi-ooxml-3.14-20160307....
  • 使用vue创建项目的详细步骤

    万次阅读 多人点赞 2020-03-26 18:31:35
    由于vue的安装与创建依赖node.js(JavaScript的运行环境)里的npm(包管理和分发工具),因此需要先确保安装node.js。 检测方式:打开cmd命令窗口(Window + R,输入cmd然后回车),输入 node ...
  • 自定义Dialog的详细步骤(实现自定义样式一般原理)  现在很多App的提示对话框都非常有个性,然而你还用系统的对话框样式,是不是觉得很落后呢,今天我就给大家讲讲怎样自定义自己的Dialog,学会了之后,你就会根据...
  • shape的xml资源文件要放在drawable文件夹下如果放在layout下会报错**shape的创建和使用步骤** 1.创建shape.xml文件放在drawable文件夹下,这里定义shape图形样式 <?xml version="1.0" encoding="utf-8"?> ...
  • 创建漂亮的CSS样式

    千次阅读 2011-09-17 14:01:20
    作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位...
  • 一、使用vue创建项目的详细步骤

    千次阅读 2021-01-10 00:40:19
    注意:不要使用 Git Bash 执行项目创建操作,使用 cmd 或者 powershell 之类的工具。 如果你还没有安装 VueCLI,或者版本低于 4,请执行下面的命令安装或是升级: npm install --global @vue/cli 在命令行中输入...
  • 5分钟4个步骤快速完成快服务卡片样式: Step1,下载华为快应用IDE: https://developer.huawei.com/consumer/cn/doc/development/Tools-Guides/quickapp-obtain-ide Step2,新建工程(可参考GIF1) : 以管理员身份
  • 安装Visual Studio 2019欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式登录官网下载Visual Studio 2019如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格...
  •  2) 对话框的创建比普通窗口简单的多,可以直接在资源脚本.rc文件中通过脚本定义;  3) 模态对话框和无模态对话框:  i. 模态对话框其实是应用程序的一种表达,即“如果您不提供我需要的输入的话那你无法做其它...
  • Ribbon界面就是微软从... 鸡啄米将以图文结合的方式来说明利用MFC向导创建Ribbon样式的单文档应用程序框架的过程,其实Ribbon应用程序框架的创建有很多地方与普通单文档应用程序类似,所以如果有些步骤的选项不太
  • 选中行的颜色变化待研究(ilder里的尺寸是英式的,1英寸约等于2.4CM) 创建报表小技巧: 1.报表参数表格,域的参数值列表项如果选择select语句,其在sql语句中,取的是第一列的值(如下图的credit_type_code列)。 2....
  • WebView允许您为一个Web页面创建一个您自己的窗口。今天,我将创建一个简单的能够包含一个Web页面的Activity。 1. 新建一个项目:HelloWebView. 2. 打开res/layout/main.xml。编辑: ...
  •  eclipse项目中创建maven项目后,有时在执行命令maven update或maven clean或maven install后,src/main/resources目录下的文件夹样式会发生变化,以前一直很郁闷,以为是代码哪改错了造成的,通过网上查询(随笔第...
  • 总结出创建自定义dialog需要的步骤  1.继承dialog  2.一个主题样式文件  3.一个布局文件来加载  4.一个anim文件 代码:public class IphoneProgersssDialog extends Dialog {  private ...
  • android 修改系统的dialog样式

    千次阅读 2015-09-18 11:55:33
    android 修改系统的dialog样式 一、觉得自定义配置文件麻烦?那就来修改系统自定义XML文件来实现修改系统dialog的样式...在 Style.xml 文件(如果没有该文件就创建一个XML名为Style.xml)  @null true false
  • word 2016样式设置及样式集保存

    万次阅读 2018-07-07 00:45:31
    建立此模块,是为了记录自己学习到的一些word排版技巧,因为刚开始使用的一些技巧不容易记住,仅作为自己的学习笔记使用。...2、重命名样式名,在这里设置摘要部分样式,就将样式名字设置为“摘要”。后...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,063
精华内容 38,025
关键字:

创建样式的步骤