层叠样式表:CSS Cascading Style Sheet。V2.1 

控制页面样式外观。

 

一、样式表分三类:

1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。

<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />

 

2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。

<head>

...

<style type="text/css">

input

{

border:0px;

border-bottom:1px solid red;

}

</style>

</head>

 

3.外部样式表。——放在一个单独的.css样式表文件中。——可以对整个网站。

(1)外部样式表的定义

 

(2)外部样式表的调用

 

关掉样式表依然可以看到

 

 

二、样式表的选择器:

 

 

 

内嵌、外部样式表的一般语法:

选择器

   样式=值;

   样式=值;

   样式=值;

   ....

1.基本:

(1)标签选择器:用标记名称来当选择器。

input{.....}

div{...}

span{...}

td{...}

(2)类别选择器:在HTML元素中使用class对元素进行分类,然后使用这个class的值作为选择器。

.class的名{.....}

(3)ID选择器:针对HTLM中相应ID的元素起作用。

#ID的名{...}

#d1{font-size:48px;}

#dd{border:5px dotted red;}

 

 

2.复合:

(1)用逗号隔开。——并列关系,同时起作用。

input,#dd,.yellow,.uu

{

color:gray;

line-height:28px;

 

}

 

(2)用空格隔开。——后代关系。

div uu

{

background-color:blue;

}

 

    <input name="txt" type="text" class="uu"/>

    <div>

<input name="txt" type="text" />

        <input name="txt" type="text" class="uu" value="******"/>

        <span>

            <input name="txt" type="text" class="uu" value="******"/>

        </span>

    </div>

什么是后代???

 

(3)class二次筛选。

标签选择器.class选择器{....}

input.uu

{

border:5px double red;

}

 

例:

 

对比:div .uu与div.uu的不同。

 

 

 

 

 

 

 

 

HTML3层叠样式表的更多相关文章

  1. 了解HTML CSS布局(层叠样式表)

    CSS全称为"层叠样式表(Cascading Style Sheets)", 它主要是用于定义HTML内容在浏览器内显示的样式, 比如文字, 颜色, 视觉上的静态效果, 布局等等. ...

  2. 《CSS3实战》读书笔记 第2章 层叠样式表(CSS)

    ## 层叠样式表 本章将阐述CSS的基本规则. ### 解构CSS 所谓CSS,由选择器(selector)和声明块(declaration block)组成.再进一步细分,每个声明包括了属性和值. ...

  3. DOM--5 动态修改样式和层叠样式表

    W3C DOM2 样式规范 CSSStyleSheet对象 表示所有css样式表,包括外部link和嵌入style的;通过document.styleSheets属性可以获得文档中CSSStyleSh ...

  4. 层叠样式表(CSS)

    层叠样式表(CSS) CSS(Cascading Style Sheet)中文译为层叠样式表.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.CSS的引入就是为了使得HTML语言能够 ...

  5. 【HTML/XML 7】CSS层叠样式表

    导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...

  6. HTML与CSS入门——第四章 理解层叠样式表

    知识点: 1.创建基本样式表的方法 2.使用样式类的方法 3.使用样式ID的方法 4.构建内部样式表和嵌入样式的方法 4.1 CSS工作原理: CSS:层叠样式表的缩写,是一种定义样式结构如字体.颜色 ...

  7. 实验时css层叠样式表不更新的情况

    自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有视图的公共文件,如下: <!DOCTYPE html> <html& ...

  8. __x__(16)0906第三天__层叠样式表CSS简介

    层叠样式表CSS Cascading Style Sheets 用来为网页创建样式表,通过样式表对网页进行装饰. 所谓层叠,就是将网页想象成一层一层的结构,层次高的将覆盖层次低的. CSS可以为网页的 ...

  9. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

随机推荐

  1. 【gcd+数学证明】【HDU1722】 CAKE

    Cake Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  2. cacti出现snmp error

    一.在被监控机器中确认snmp是否启动 service snmpd status [root@test2 ~]# service snmpd status snmpd (pid  1247) 正在运行 ...

  3. iOS/iPhone 程序文件目录结构以及启动流程

    要想清晰的理解IOS应用程序的启动过程,毫无疑问需要深入了解一下ios应用程序的文件系统.一个ios应用程序都有一个属于自己沙盒(sandbox),应用沙盒就是文件系统目录,并且与文件系统的其他部分隔 ...

  4. 学习asp.net Identity 心得体会(连接oracle)

    asp.net Identity具体功能暂不在此细说,下面主要介绍几点连接oracle注意的事项, 1.首先下载连接oracle驱动Oracle.ManagedDataAccess.dll和Oracl ...

  5. yum添加源。

    本文以centos 7为准.其他版本的linux可能存在一些偏差. 第一:索引文件. 1)repo文件. 1.repo文件是指以repo为结尾的文件.是 仓库源的索引文件.将其添加到yum的repo仓 ...

  6. AngularJS 深入理解 $scope 转载▼

    AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50)     $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...

  7. Android Studio默认产生Fragment

    package com.edaixi.fragment; import android.content.Context;import android.net.Uri;import android.os ...

  8. Python之路第十一天,高级(3)-Python操作 Memcached、Redis

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...

  9. 阿里云 配置apache+python+django 环境 适合菜鸟

    云服务器环境:阿里云服务:20G+1M带宽+centos+512M 一.python安装: 刚开始没有好好利用centos 的yum方法.采用wget从python官网上下载的2.7.5版本.解压安装 ...

  10. 一道C语言面试题:判断字串是否可以通过重新排列字母使之对称

    题目:输入一个字符串,如“adcaeceeed”,判断是否可以通过重新排列使之可以输出对称字符串,如本例可以输出“adceeeecda”,返回True. 来源:某500强企业面试题目 思路:扫描字串, ...