样式表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集合涉及的类（代码）

    Customer: public class Customer implements Comparable{        private Integer customerId;        pri ...

  2. 经验分享：使用 Restyle.js 简化 CSS 预处理

    Andrea Giammarchi的restyle.js是一个新的,基于JavaScript的CSS预处理器,能够运行在服务端(通过Node.js)或者浏览器中.它宣称自己是“一种简化的CSS方法”, ...

  3. Axis2 webservice入门--写个简单的webservice

    上一篇介绍了webservice开发前的准备.下面开始写webservice.如果不了解axis2请看上一篇,如果是新手:建议一边看一边写代码,自己动手完成这个过程. 一.新建一个web项目 二.新建 ...

  4. VBA读取可选择文件夹下可选择txt文件内容

    Sub OneTxt() '打开一个txt文件 Dim Filename As Variant, extLine&, mArr() As String Dim i%, j% ChDir Thi ...

  5. Net开发环境配置

    Web开发插件: 1.JSEnhancements js和css折叠插件 可以参见dudu的介绍不错的VS2010扩展——JSEnhancements,让js和css也折叠 下载地址:http://v ...

  6. ASCII字符集

    十进制 八进制 十六进制 二进制 字符 ASCII名称 0 0 0 0000 0000 ^@ NUL 1 1 1 0000 0001 ^A SOH 2 2 2 0000 0010 ^B STX 3 3 ...

  7. spark 学习

    三种编译方式 1. 编译文档:more—>buiding spark 2. 三种编译方式:SBT,Maven,打包编译 make-distribution.sh 运行方式 local,stand ...

  8. 使用AlarmManager设置闹钟----之一

    import java.util.Calendar; import android.os.Bundle;import android.app.Activity;import android.app.A ...

  9. js基础之数组

    数组方法 添加: push arr.push();//尾部添加 unshift arr.unshift();//头部添加 删除: pop arr.pop();//尾部删除 shift arr.shif ...

  10. POJ 1573 Robot Motion 模拟 难度:0

    #define ONLINE_JUDGE #include<cstdio> #include <cstring> #include <algorithm> usin ...