HTML样式表的使用

层叠样式表: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的不同。

例题1:内嵌样式表

 

例题2:外部样式表

 

例题3:选择器

例题3复合选择器

时间: 2024-10-04 18:35:16

HTML样式表的使用的相关文章

css样式表

样式表主要分为三类:内联式.内嵌式和外部样式表. 内联式样式表是跟html联合显示,写在body标签里边,属于控制精确,但是可用性差.在三种样式中会优先显示作用. 内嵌式是作为独立区域写在head标签里边.body标签中有对应的标签:<div id/name/class="  "></div>. 外部样式表是新建一个css文件,用来放样式表,在html中用link链接. <link type="text/css" rel="s

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

css002 创建样式和样式表

创建样式和样式表 一个样式表包含多个样式 样式表的种类 1.内部样式表,存放在<head></head>之间.如: <head> <style>   (该标签是html的标签,不是css的) h1{color: red} </style> </head> 2.外部样式表 Html5 <link rel=”stylesheet” href=”style.css”> Html4.01 <link rel=”stylesh

通过Qt4.2样式表定制程序外观

通过Qt4.2样式表定制程序外观 1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位    8.2. 绝对定位 摘要 由于Qt样式表的引入,定制Qt部件的外观样式变得非常简单. 无论你是想仅仅修改一个现有部件的外观,还是想从零开始设计一套全新的界面风格, 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类. 1. 何为Qt样式表 Qt 样式表的思想很大程度上是来自于

WebService错误:使用 XSL 样式表无法查看 XML 输入

在浏览器中输入URL: 'http://localhost/test.aspx'  出现下面错误提示信息: 无法显示 XML 页. 使用 XSL 样式表无法查看 XML 输入.请更正错误然后单击 刷新按钮,或以后重试. -------------------------------------------------------------------------------- 名称以无效字符开头.处理资源 'http://localhost/test.aspx' 时出错.第 1 行,位置: 2

css概述、css样式表分类、选择器分类、css基础样式

1 . 样式表  Cascading Style Sheet css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省网络带宽 使用独立于网页的CSS,有利于网页被搜索引擎收录 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签     1.1  引入方式 四种 style=""  行内样式表 <style>   内部样式表 <link rel=&

样式表(选择器))(样式)

一.选择器(样式表用来选取元素的) .标签:根据标签名选取元素 .class(.点)(根据class名来选取元素) .id(#井号)(根据id名来筛选出唯一元素) .复合:(逗号并列div,span)(空格后代#list li)(点筛选div·s) 二.样式 1.大小(width宽度)(height高度) 2.背景(background-color:背景颜色)(background-image:背景图片)(background-repeat:背景图的平铺方式)(background-positi

样式表 格式布局

一.样式表 1.分类 (1)内联样式表 即在body里面设置style. (2)内嵌样式表 即在head里面设置style. (3)外部样式表 即在CSS里面设置style. 2.选择器 (1)标签选择器.用标签名做选择器. (2)class选择器.都是以“.”开头. (3)ID选择器.以“#”开头. (4)复合选择器   用“,”隔开,表示并列. 用空格隔开,表示后代.相当于共有的. 筛选“.”. 二.样式属性 (一)背景与前景 2.前景字体: (二)边界和边框 (三) 链接的style:  

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

样式表与格式布局

样式表 内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style > p   //格式对p标签起作用 { 样式: } </style> 外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表.一般用link连接方式. 把编剧都设为0像素: 第一种,class引出: 第二种,id引出,独一无二的 第三种:class引出 第四种main 的子标签是p标签 1.外层没有positio