css符号详解
一、类型选择符
什么是类型选择符?指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型,div,p,span都是。
如下:
body {}
div {}
p {}
span {}
二、群组选择符
对于XHMTL对象,可以对一组同时进行了相同的样式指派。
使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构。
使用时应该注意"逗号"是在半角模式下,并非中文全角模式。
如下:
h1,h2,h6,p,span
{
font-size:12px;
color:#FF0000;
font-family: arial;
}
三、包含选择符
对某对象中的子对象进行样式指点定,这样选择方式就发挥了作用。
需要注意的是,仅对此对象的子对象标签有效,对于其它单独存在或位于此对象以外的子对象,不应用此样式设置。
这样做的优点在于,帮我们避免过多的id、class设置,直接对所需的元素进行定义。
如下:
h2 span
{
color:red;
}
如下:
body h1 span strong
{
font-weight:bold;
}
四、id选择符
根据DOM文档对象模型原理所出现的选择符,对于一个XHTML文件,其中的每一个标签都可以使用一个id=""的形式进行一个名称指派,但需要注意,在一个XHTML文件中id是具有唯一性而不可以重复的。
在div css布局的网页中,可以针对不同的用途进行命名,如头部为header、底部为footer。
XHTML如下:
< div id="content">< /div>
CSS如下:
#content
{
font-size:14px;
line-height:120%;
}
五、class选择符
其实id是对于XHTML标签的扩展,而class是对SHTML多个标签的一种组合,class直译的意思是类或类别。
对于XHTML标签使用class=""进行名称指派。与id不同,class可以重复使用,对于多个样式相同的元素,可以直接定义为一个 class。
使用class的优点已不言自明,它对CSS代码重用性有良好的体现,众多的标签均可以使用一个样式来定义而不需要每一个编写一个样式代码。
XHTML如下:
< p class="he">< /p>
< span class="he">< /span>
< h5 class="he">< /h5>
CSS如下:
.he
{
margin:10px;
background-color:red;
}
六、标签指定式的选择符
如果想同时使用id和class,也想同时使用标签选择符,可以使用如下的方式:
h1#content {}
/*表示所有id为content的h1标签*/
例如:
<h1 id="content">
</h1>
其中所有h1标签内的都执行h1#content {}
h1.p1 {}
/*表示所有class为p1的h1标签*/
例如:
< h1 class="p1">
</h1>
其中所有h1标签内的都执行h1.p1 {}
标签指定式选择符的精度介于标签选择符及id/class选择符之间,是常用的选择符之一。
七、组合选择符
对于上面的所有选择符而言,进行组合使用。如下:
h1 .p1 {}
/*表示h1下的所有class为p1的标签*/
例如:
< h1>
<div class="p1"></div>
</h1>
其中所有p1标签内都执行h1 .p1 {}
#content h1 {}
/*表示id为content的标签下的所有h1标签*/
例如:
<div id="content">
<h1></h1>
<h1></h1>
</div>
其中所有h1标签内的都执行#content h1 {}
h1 .p1,#content h1 {}
/*表示h1下的所有class为p1的标签以及id为content的标签下的所有h1标签*/
例如:
< h1>
<div class="p1">
<div id="content">
<h1></h1>
<h1></h1>
</div>
</div>
</h1>
h1#content h2{}
/*id为content的h1标签下的h2标签*/
例如:
<h1 id="content">
<h2></h2>
<h2></h2>
</h1>
CSS选择符是非常自由与灵活的,可以根据页面的需要,使用各种选择符,尽量结构化与优化CSS文件.
分享到:
相关推荐
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处并不是一个直线,...
3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流(Document Flow) 3.11.2 浮动定位 3.11.3 浮动的...
主要介绍了详解CSS样式中的!important、*、_符号的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
CSS的好处是:HTML元素可以在不依赖class属性的情况下实现各种风格的样式化,文章试图证明class属性是过时的,不适合于布局,不用class可以训练我们创建更多可用,可重用的内容
包含字体属性、背景属性、区块属性、方框属性、列表属性、定位属性、符号属性、连接属性、框线一览、表单运用、边界样式及IE兼容
学习经典的CSS盒模型、布局模型、定位技术,各个属性讲解及代码实例;HTML超文本标记语言用法详解……手册界面友好,设计精美,打包下载超值享受,欲下从速。
这样对 CSS 解释的差异就导致了在不同浏览器中会产生不同的效果。 在实际应用中,我们会先把样式重置-css reset(如上图3)。把 margin:0;padding:0; 后会发现项目符号不见了。添加 list-style-position:inside; 后...
zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题,...number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值 用白话讲解就是zoom:后面的数字即放大的倍
01大前端开发和全栈开发的定义.avi 02前端开发基础视频-视频内容介绍.avi 03前端开发基础视频-操作系统常用设置.avi 04前端开发基础视频-操作系统通用快捷键操作... 95前端开发基础视频-CSS外边距margin的详解.avi
除了使用标签来进行相同标签CSS选择外,还可以使用类选择器来选择。 类选择器前面使用符号. (1)基本使用 为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。例如: This heading is very ...
(技巧提示:空行仅包括空格符、制表符、回车符,且必须以这三个符号之一作为一行的开头,并且以回车符结尾,查找空行的关键是构造代表空行的正则表达式)。 直接在"查找"中输入正则表达式“^[ \t]*\n”,注意\t前有...
子代选择符使用一个额外的符号(尖括号> )表明两个元素之间的关系。 例如:body>h1 选取的是<body>标签里的所有第一代标签。 HTML标签的关系图 HTML代码 <h1>body里面的h1标题 <h2>div里面的h2 div...
Sass(语法上很棒的样式表的缩写)是一种预处理器脚本语言,可以解释或编译为层叠样式表(CSS)。 Sass允许定义变量。 变量以美元符号($)开头。 变量分配使用冒号(:)完成。 什么是CSS预处理器? CSS预处理器是一...
有时项目需要禁止用户输入中文、符号等,减少用户输入出错误的可能性,css属性有这样的功能。 ime-mode的语法解释如下: ime-mode : auto | active | inactive | disabled 取值: auto : 默认值。不影响IME(Input ...
第3章 基本框架、框架解释、model解释 第4章 cookie讲解、session讲解、作业讲解和调试技巧 第5章 todo程序、todo的更新和删除、带用户功能的todo程序 第6章 jinja模板套路、类和其他、作业讲解 第7章 摘要算法、加...
还好,微软提供了这样一个代码: 复制代码代码如下: <... 把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的...解释一下吧: firefox能解析第一段,后面的两个因为前面加了特殊符号“*”和
17.4.3 元符号 17.4.4 重复模式匹配元字符 17.4.5 锚元字符 17.4.6 或模式 17.5 用正则表达式验证表单 17.5.1 检查空字段 17.5.2 检查邮政编码 17.5.3 检查字母数据 17.5...