样式表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. 集合框架,ArrayList和Vector的区别,让arrayList线程安全的几种方案

    boolean add(E e) 将指定的元素添加到此列表的尾部. void add(int index, E element) 将指定的元素插入此列表中的指定位置. boolean addAll(C ...

  2. this和super关键字

    this关键字: 1.引用成员变量 2.通过this(参数列表)调用类的重载的构造方法 3.返回对象的值:使用return this,来返回某个类的引用. super关键字: 1.super是一个引用 ...

  3. Check the difficulty of problems（POJ 2151）

    Check the difficulty of problems Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5457   ...

  4. BZOJ1738 [Usaco2005 mar]Ombrophobic Bovines 发抖的牛

    先预处理出来每个点对之间的最短距离 然后二分答案,网络流判断是否可行就好了恩 /************************************************************ ...

  5. js判断手机系统和微信

    //判断手机浏览器 var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipa ...

  6. redhat enterprixe 5.0 samba 服务器 rpm 安装及配置

    Samba是著名的开源软件项目,在Linux/UNIX系统中实现了SMB/CIFS网络协议,因此使得跨平台的文件共享变得容易.在部署Windows.Linux/UNIX混合平台的企业环境时,使用Sam ...

  7. qml json 解析到 ListView

    https://github.com/kromain/qml-utils/tree/master/JSONListModel 非常棒!! 实现的原理如下文: http://goessner.net/a ...

  8. bzoj 2242: [SDOI2011]计算器

    #include<cstdio> #include<iostream> #include<map> #include<cmath> #define ll ...

  9. PhpStorm WebMatrix xDebug 配置开发环境

    1.首先下载WebMatrix安装程序,下载地址 http://www.microsoft.com/web/webmatrix/  安装步骤 参考:http://www.jb51.net/softjc ...

  10. HDOJ 1754 I Hate It 线段树 第二题

    I Hate It Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就 ...