样式表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. Java 集合系列 04 LinkedList详细介绍(源码解析)和使用示例

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  2. maven的安装与使用

    一.Maven是什么 Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义 ...

  3. [转]C#设置WinForm快捷键

    1.Alt+*(按钮快捷键)按钮快捷键也为最常用快捷键,其设置也故为简单.在大家给button.label.menuStrip等其他控件的Text属性指定名称时,在其后面加上‘&’然后在加上一 ...

  4. 浅谈C++源码的过国内杀软的免杀

    以下只是简单的思路和定位.也许有人秒过,但是不要笑话我写的笨方法.定位永远是过期不了的. 其实这里废话一下 , 本人并不是大牛 ,今天跟大家分享下 .所以写出这篇文章.(大牛飘过) 只是个人实战的经验 ...

  5. hdu 4610 Cards

    http://acm.hdu.edu.cn/showproblem.php?pid=4610 先求出每个数的得分情况,分数和得分状态,(1<<4)种状态 按分数从大到小排序 然后每种状态取 ...

  6. 二模 （1） day2

    第一题: 题目大意: N层楼,K个人,M个箱子在1楼,给出K个人的初始状态(在第几楼,正在向上走还是向下走,向上走的人手里已经有箱子),每次移动一层楼,求把所有箱子(手里拿着的不算在M里)全部搬到顶楼 ...

  7. matlab和C/C++混合编程--Mex （六）参数传递

    最近的项目需要matlab和C的混合编程,经过一番努力终于完成了项目要解决的问题.现在就将Mex的一些经验总结一下,当然只是刚刚开始,以后随着学习的深入继续添加.首先讲讲写Mex的一些常规规定,然后我 ...

  8. AFNetworking、MKNetworkKit和ASIHTTPRequest对比

    之前一直在使用ASIHTTPRequest作为网络库,但是由于其停止更新,iOS7上可能出现更多的问题,于是决定更换网络库. 目前比较流行的网络库主要有AFNetworking和MKNetworkKi ...

  9. Gmail新版截图曝光 你还能认得出来吗？

    Gmail即将迎来巨大的改变.据外媒消息,目前Google正在测试新的网页版Gmail.要知道从Gmail推出以来还从未进行过如此大的改动. 新版Gmail中,界面相比之前,采用了更加扁平话的设计,整 ...

  10. JVM-类文件结构

    无关性的基石 I> "平台无关性"实现在操作系统的应用层上:sun公司以及其他虚拟机提供商发布了许多可以运行在各种不同平台上的虚拟机,这些虚拟机都可以载入和执行同一种平台无关 ...