CSS笔记-3:CSS样式种类

内联式CSS样式,直接可以写在现有的HTML标签中

CSS样式分为三种:内联式、嵌入式和外部式

内联式:
CSS样式表就是把CSS代码直接写在现有的HTML标签中,如下面代码:
<p style = "color:red">这里文字是红色的</p>

注意要写在元素开始标签里,下面这种写法是错误的;
<p>这里的文字是红色的</p style = "color:red">

并且CSS样式代码要写在 style = "" 双引号中,如果有多条CSS样式代码可以写在一起,中间用分号隔开,如下代码:
<p style = "color:red ; font-size:12px" >这里文字颜色是红色,大小为12px</p>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>索尼公司是源自日本的跨国综合企业,以<span style="color:blue">研制电子产品为主要事业</span>,经营领域横跨<span>消费电子产品、专业性电子产品、电子游戏、金融、娱乐及养老院</span>等,拥有全世界的品牌知名度。其最早前身为1946年5月创立的<span>“东京通信工业株式会社”</span>,由拥有技术研发背景的井深大与擅长公关、营销的盛田昭夫共同创办。总部位于东京都港区港南的索尼城</p>
</body>
</html>

嵌入式CSS样式:

嵌入式CSS样式,就是把CSS样式代码写在<style type = "text/css"></style> 标签之间,如下面代码实现吧三个<span>标签中的文字设置为红色;

<style type = "text/css">
span{
color:red;
}
</style>

嵌入式CSS样式必须写在<style>...</style>之间并且一般情况下嵌入式CSS样式写在<head>...<head>之间;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>索尼公司是源自日本的跨国综合企业,以<span style="color:blue">研制电子产品为主要事业</span>,经营领域横跨<span>消费电子产品、专业性电子产品、电子游戏、金融、娱乐及养老院</span>等,拥有全世界的品牌知名度。其最早前身为1946年5月创立的<span>“东京通信工业株式会社”</span>,由拥有技术研发背景的井深大与擅长公关、营销的盛田昭夫共同创办。总部位于东京都港区港南的索尼城</p>
</body>
</html>

外部CSS样式:

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

<link href="base.css" rel="stylesheet" type="text/css" />

注意:

  • 1、CSS样式文件名以有意义的英文字母命名,如:main.css
  • 2、rel = "stylesheet" type = "text/css" 是固定写法,不可以修改;
  • 3、<link>标签位置一般写在<head>标签内;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>索尼公司是源自日本的跨国综合企业,以<span style="color:blue">研制电子产品为主要事业</span>,经营领域横跨<span>消费电子产品、专业性电子产品、电子游戏、金融、娱乐及养老院</span>等,拥有全世界的品牌知名度。其最早前身为1946年5月创立的<span>“东京通信工业株式会社”</span>,由拥有技术研发背景的井深大与擅长公关、营销的盛田昭夫共同创办。总部位于东京都港区港南的索尼城</p>
</body>
</html>

外部CSS 样式:

style.css
span{
   color:red;
   font-size:20px;
}

总结:

三种CSS样式的优先级:

三种CSS样式的优先级排列为:

内联式 》嵌入式 》外部式

但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。

其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)

最后修改:2019 年 09 月 20 日 02 : 27 PM
您的支持就是我持续更新的动力!

发表评论

为了博客更好地生产内容,请将本站加入广告屏蔽插件的白名单,感谢您的支持。 具体方法
X