WEB前端之网页设计⑤----最新最全详解/CSS层叠样式表

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

  • 4
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值