WEB前端之网页设计⑤—-最新最全详解/CSS层叠样式表
简介:CSS层叠样式表可以简化网页的格式代码,外部样式表还会被浏览器保存在缓存里加速了下载显示的速度,也减少了需要上传的代码数量,总而言是非常的实用。
一、代码块:
<!doctype html>
<html>
<head>
<title>CSS层叠样式表</title>
<style type="text/css">
<!--这里填样式属性-->
</style>
</head>
<body>
</body>
</html>
注释:层叠样式表的样式属性是在title标签下head标签内用style标签包裹起来的一种代码格式。其中样式表分为外部样式表和内部样式表,详情我会在下面的内容里一一和大家介绍。
二、定义样式之选择器的使用:
①选择器的分类:
1. class选择器
2. id选择器
3. HTML选择器
4. 包含选择器
1.class选择器:
<h1 class="one">1.class选择器又叫类选择器,以"."这个符号开始</h1>
解释:class选择器在标签内直接用class=”名字”命名,当在style标签中要为所选内容定义样式时以”.”+名字花括号开始,可以在花括号中学样式属性及属性值一个属性的结束用分号来隔开。
如:<style type="text/css">.one{属性:属性值; }</style>
2.id选择器:
<h2 id="two">
2.id选择器以#这个符号开始,id名称必须以字母或下划线开始,不能以字母开头
</h2>
解释:id选择器在标签内直接用id=”名字”命名,当在style标签中要为所选内容定义样式时以”.”+名字花括号开始,可以在花括号中学样式属性及属性值一个属性的结束用分号来隔开。
如:<style type="text/css">#one{属性:属性值; }</style>
3.HTML选择器:
<h3>
3.html选择器就是元选择器,就是把HTML标签作为HTML选择器出现。
</h3>
**解释:**HTML选择器就是直接使用HTML标签的标签名字进行属性设置,一旦设置所有这个标签包裹的内容都会具有这个属性。
如:<style type="text/css">h3{属性:属性值; }</style>
4.包含选择器:
<style type="text/css">.h1 #h2 h3{属性:属性值; }</style>
解释:包含选择器就是左边的选择器一端包含两个或多个用空格分隔的选择器。
结语:上述所说的都是在网页内定义的样式属性,又叫内部样式表,当然HTML样式表还有外部样式表和内部样式表,这些我在后面的写作中也还会继续跟新的。
上一篇:WEB前端之网页设计④—-最新最全详解/网页中的表单
版权声明:非商用自由转载-保持署名-注明出处
署名(TM): TopGradeModel