博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML3层叠样式表
阅读量:7282 次
发布时间:2019-06-30

本文共 1190 字,大约阅读时间需要 3 分钟。

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

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/981971554nb/p/4308589.html

你可能感兴趣的文章
对Delphi 7/Delphi 2007的Windows服务类库的一个小改进
查看>>
了解你所不知道的SMON功能(二):合并空闲区间
查看>>
mysqldump备份数据库,并删除7天前的备份文件脚本
查看>>
webbench 网站压力测试工具
查看>>
Alter index coalesce VS shrink space
查看>>
samba共享
查看>>
XenServer 6.5实战系列:Install Update For XenServer 6.5
查看>>
LAMP报PDO的错怎么办?
查看>>
shell脚本介绍、shell脚本结构和执行、date命令用法、shell脚本中的变量
查看>>
Network Based Application Recognition (NBAR) 网络应用程序识别
查看>>
Linux服务器性能评估与优化、监控利器---dstat应用
查看>>
linux添加新硬盘、格式化以及自动挂载
查看>>
SQLSERVER备份脚本
查看>>
zabbix 自动发现 tomcat日志异常文件数量
查看>>
javascript的正则表达式
查看>>
windows服务器远程桌面(rdpclip.exe)的妙用
查看>>
使用inotify监视Linux文件变化
查看>>
SQLite第八课 auth.c授权文件解析
查看>>
nginx日志切割
查看>>
配置Samba服务器
查看>>