样式表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(课程设计之记事本界面部分代码公布)

    代码:涉及记事本的一些界面......!! /* *java课程设计之记事本(coder @Gxjun) * 编写一个记事本程序 * 要求: * 用图形用户界面实现. * 能实现编辑.保存.另存为.查 ...

  2. 修改Window的hosts文件提示“该文件被其他程序占用”解决方案

    1.打开C:\Windows\System32\drivers\etc中的hosts 2.右键——>属性——>安全 3.在修改保存就可以了

  3. Android MotionEvent事件响应机制

    在android中,事件主要包括点击.长按.拖曳.滑动等操作,这些构成了Android的事件响应,总体来说,所有的事件都由如下三个部分作为基础构成: 按下(action_down),移动(action ...

  4. C语言实现统计字符个数

    #include<stdio.h> int main() {     int sz[10]={0},zm[26]={0},z[26]={0},i,space=0,e=0,t=0;      ...

  5. Understanding Virtual Memory

    Understanding Virtual Memory by Norm Murray and Neil Horman Introduction Definitions The Life of a P ...

  6. java反射之Constructor简单应用

    Constructor类是java反射中重要的类,它是对类中构造器的描述的类.类似于Method(对类中方法的描述的类),Field(对类中属性的描述的类). 通过创建Constructor的对象实例 ...

  7. 闭包 （循环事件获取不到i） 和 各种解决循环获取不到i的解决方法

    for(var i in fav){ (function(){                var p=i;                var obj=$S.getId(fav[i]);     ...

  8. bzoj 2242: [SDOI2011]计算器

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

  9. 虚拟机的apache服务器不能被主机访问的问题

    我在centos虚拟机上安装了elasticsearch服务,虚拟机里测试正常,但主机却无法访问elasticsearch.要说的是,虚拟机采用桥接模式,与主机相互ping得通. 后来查了资料发现,这 ...

  10. wp8.1 Study8：页面过渡和主题动画（Page transition and Theme animations）

    一.在WP8.1中是有动画(Animation)的: 页面导航(默认为旋转式Turnstile).PointerDown/up(默认是倾斜).页面旋转.MenuFlyout出现等等 二.页面过渡(Pa ...