样式表style

制作一个风格统一的网页，需要样式表对颜色、字体等属性的规范，同时也省去在body中多次定义的麻烦，所以一个样式表是必不可少的。

样式表有两种引用的方法：一种是直接写在html的<head>中，另一种是引用外部的.css文件。

第一种方法的使用（样式表选择器）

首先在head中用style标签声明

<style type="text/css">样式表内容</style>

1、用标签定位元素，设置属性

body

{

     background-color:#CC0;

     background-image:url(../../xxx.jpg);<!--"(../../)"表示在html文件所在的文件夹的上两级-->

     background-repeat:no-repeat;

}

table

{

     background-image:url(../../xxx.jpg);

     background-repeat:repeat;

}

2、自定义名：（1）给样式组设置一个自定义名字，然后在<body>的标签中运用

.ming

{

     background-image:url(../../xxx.jpg);

     background-repeat:no-repeat;

     background-size:contain

}
<body class="ming">

<table class = "ming"></table>

</body>

（2）"标签名 .自定义名"（只能在标签内使用，标签名和“.自定义名”之间有一个空格）

table .ming

{

     color:#3F0;

}
<body>

    <table class = "ming"></table>

    <font class = "ming"></font><!--此处是不能调用的-->

</body>

（3）、".自定义名 标签"（自动寻找在“.自定义名”后存在标签的部分并赋给它样式）

.ming font

{

     font:"华文彩云";

}
<body>

  <table class = "ming">

    <tr>

    <td>

         <font>我会变色</font>

    </tr>

    </td>

    <tr>

    <td>

         <button>我不会变色</button>

    </tr>

    </td>

  </table>

</body>

3、通过id值查找适合的元素：#id（在#后加上ID值，可以对此ID所在的元素单独设置）[#id也同样可以用自定义名的几种方法]

#id1

{

     color:#3F0;

}
<body>

         <table>

              <tr>

              <td>

                    <input type="text"  id="id1" />

               </td>

               </tr>

         </table>

</body>

选择器优先级：

   ID>class名>标签

第二种方法的使用（CSS）

导入：

在html文件的<head>中：<link rel=”stylesheet” href=”xxx.css”>

链接的style：

a:link 超链接被点前状态

a:visited 超链接点击后状态

a:hover 悬停在超链接时

a:active 点击超链接时

在定义这些状态时，有一个顺序l v h a

4、网页制作Dreamweaver（样式表CSS）的更多相关文章

  1. 3、网页制作Dreamweaver（表单form）

    表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" ac ...

  2. 7、网页制作Dreamweaver（悬浮动态分层导航）

    悬浮动态分层导航的制作: 1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) <script language="javas ...

  3. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  4. 【WordPress】外网访问WordPress时无法加载样式表CSS

    情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...

  5. CSS级联样式表-css选择器

    CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...

  6. 论样式表css的重要性

    如下图所示两个网页代码基本相同,但左边网页加入样式表后就形成了右边的视觉效果,由此可见 在网页中html用于标记,css用于显示,而JavaScript则用于增强与用户的交互性. 加入的代码是 < ...

  7. 引入样式表(css)的四种方式

    一.使用style属性: 将style属性直接加在html标签里. <标签 style="属性1: 设定值1; 属性2: 设定值2; "> 例如: <td sty ...

  8. 9、网页制作Dreamweaver（jQuery基础:事件）

    事件 定义 即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 触发 事件的触发有两种方法: 1.直接将事件click写在<javascrip ...

  9. 1、网页制作Dreamweaver（界面、基本操作、锚点、表格）

    界面 网页的界面html由两部分组成:<head>和<body>,<title>放在<head>中 1.以下是<head>部分的解释: &l ...

随机推荐

  1. 关于C语言和汇编语言相互嵌套调用

    1.C嵌套汇编 首先说一下关于GCC编译嵌有汇编语言的c语言吧,GCC编译的汇编语言不是我们上课时学的Intel x86汇编,而是AT&T汇编,两者的区别可以查看<Gcc使用的内嵌汇编语 ...

  2. IO流 总结二

    流只能操作数据. File 类 用来将文件或者文件夹封装成对象. 方便文件与文件夹进行操作 File对象可以作为参数传递给流的构造函数. 可以将已有的和已出现的文件或者文件夹封装成对象 File a ...

  3. 重载Array类的contains方法

    var allFilters = self.filtersContainer?.filters ?? [OpalFilter]() if let sorter = filtersContainer?. ...

  4. iOS开发UIScrollView的底层实现

    起始 做开发也有一段时间了,经历了第一次完成项目的激动,也经历了天天调用系统的API的枯燥,于是就有了探索底层实现的想法. 关于scrollView的思考 在iOS开发中我们会大量用到scrollVi ...

  5. js-分享107个js中的非常实用的小技巧（借鉴保存）

    转载原文:http://***/Show.aspx?id=285 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:doc ...

  6. long型转日期型

    //时分秒格式//不知为何,出来的时间有点差别 public class Test { public static void main(String[] args) throws Exception ...

  7. [转]Linux下用gcc/g++生成静态库和动态库(Z)

    Linux下用gcc/g++生成静态库和动态库(Z) 2012-07-24 16:45:10|  分类: linux |  标签:链接库  linux  g++  gcc  |举报|字号 订阅     ...

  8. 个人收集的一些网页上一键云DDOS攻击的网站、IP地址测试，服务器压力测试

    http://bbs.itzmx.com/thread-9018-1-1.html #1 - Network Stresser - http://networkstresser.com#2 - Lif ...

  9. UVALive 6948 Jokewithpermutation dfs

    题目链接:UVALive 6948  Jokewithpermutation 题意:给一串数字序列,没有空格,拆成从1到N的连续数列. dfs. 可以计算出N的值,也可以直接检验当前数组是否合法. # ...

  10. Ubuntu里面的安装命令总结

    本人是新手中的新手,才开始用ubuntu.下面,总结一下安装软件的方法...... 0. 利用apt-get 其实,在ubuntu下安装软件的方法其实灰常简单.就是在终端里面输入: sudo apt- ...