CSS介绍及三种应用方式[内联,内嵌,外链]元素及实例讲解

   日期:2024-12-26    作者:yunaigongsi 移动:http://mip.riyuangf.com/mobile/quote/38049.html

CSS(Cascading Style Sheets)是一种用于描述HTML文档外观和格式的样式表语言。CSS允许开发者和设计师将网页的呈现(布局、颜色、字体等)与内容(HTML)分离开来,从而使得网页的设计更加灵活和可维护。

 
 
 
 

内联样式

内联样式是直接在HTML元素的style属性中定义的CSS规则。适用于单个元素的样式定义。

<p style="background-color: pink;">使用[内联]方式</p>

<p>标签使用了内联样式来设置背景颜色为粉红色。

内嵌样式

内嵌样式在HTML文档的<head>部分的<style>标签内定义的CSS规则。用于整个页面的样式定义。

<style>
  #css1{ background-color: aqua; }
  .css2{ color: red; }
  p{ font-size: 30px; }
</style>

在这个例子中,定义了三种样式规则
#css1:ID选择器,用于选择ID为css1的元素,并设置其背景颜色为浅蓝色(aqua)。
.css2:类选择器,用于选择所有具有css2类的元素,并设置其文本颜色为红色。
p:标签选择器,用于选择所有的<p>标签,并设置其字体大小为30像素。

外链样式

外链样式是在一个单独的CSS文件中定义的样式规则,然后通过<link>标签引入到HTML文档中。这种方法的优点是样式和内容分离,便于维护和重用样式。

<link rel="stylesheet" href="css2.css">

在这个例子中,我们引入了一个名为css2.css的外部CSS文件。用于设置p标签的边框的样式。

应用示例

在<body>中,有四个<p>标签,每个标签都以不同的方式应用了css样式

<p style="background-color: pink;">使用[内联]方式</p>
<p id="css1">使用id选择器的[内嵌]方式</p>
<p class="css2">使用类选择器的[内嵌]方式</p>
<p>使用标签选择器的[内嵌]方式</p>

第一个<p>标签使用了内联样式,背景颜色被设置为粉红色。
第二个<p>标签通过ID选择器`#css1`应用了内嵌样式,背景颜色为浅蓝色。
第三个<p>标签通过类选择器`.css2`应用了内嵌样式,文本颜色为红色。
第四个<p>标签没有显式地应用任何样式,但会继承内嵌样式中为所有<p>标签设置的字体大小(30像素)。

 

css外链文件分析

p:这是一个标签选择器,选择了页面上的所有 <p> 标签。任何直接应用到 <p> 标签的样式都会影响页面中所有段落的外观。

border:这是一个属性,用于设置元素的边框。

1px:这是 border 属性的第一个值,定义了边框的宽度为1像素。

solid:这是 border 属性的第二个值,定义了边框的样式。solid 表示边框是实线。其他可能的值包括 dashed(虚线)、dotted(点线)。

 

 


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号