CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级

从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式、嵌入式和外部式三种。

1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码:

<p style="color:red";font-size:12px>这里文字是红色。</p>

2:嵌入式,嵌入式css样式。就是能够把css样式代码写在<style type="text/css">XXX</style>标签之间。

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

</head>

3:外部式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>标签之内。

这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式。可是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。

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

但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的同样权值的情况下。

时间: 2024-12-26 08:42:53

CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级的相关文章

转载:CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

(仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选择符/选择器,指明网页中要应用样式规则的元素,如本例中是p是选择器,它的文字将变成蓝色,而其他的元素(如ol)不会受到影响 声明:当有多条声明时,中间可以英文分号";"分隔 --------------------------------------------------内联式CSS -

CSS的三种样式,有一种你肯定不知道

前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者LFuser 正文 新手注意:如果你学习遇到问题找不到人解答,可以点我进裙,里面大佬解答及web前端精讲教.程! CSS样式分为:内联式css样式.嵌入式css样式.外部式css样式 内联式css样式内联式css样式表就是把css代码直接写在现有的HTML标签中: <p style = "color:#000099">这是一个段落标记</p&g

CSS的三种样式

第一种,行内样式 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS的行内样式</title></head><body> <div style="color: blue; font-size: 28px; font-weight:bold;">ora

CSS的三种样式表和优先级

1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS外部样式表</title> </head> <!--引入CSS样式表 --&

CSS的3种样式

<html> <head> <title>CSS的3种写法</title> <!-- 关于3中CSS写法的优先级,本例子中,内联式 > 嵌入式 > 外部式; 总结:距离被设置元素越近的,优先级越高 --> <!-- 写法1"外部式CSS样式":href可修改,文件后缀.css,其他都是固定写法 --> <link href="style.css" rel="style

4-CSS的三种样式

CSS 什么是CSS CSS的全称是Cascading Style Sheets,层叠样式表它用来控制HTML标签的样式,在美化网页中起到非常重要的作用 CSS的编写格式是键值对形式的,比如 color: red;background-color: blue;font-size: 20px;冒号:左边的是属性名,冒号:右边的属性值(类似字典) CSS的三种样式 CSS有3种书写形式: 行内样式:(内联样式)直接在标签的style属性中书写 <body style="color: red;&

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

DAY44-前端入门-css的三种引用方式以及优先级、样式与长度颜色、常用样式、css选择器

目录 一.css的三种引用方式 行间式 内联式 外联式 二.三种引入的优先级 三.样式与长度颜色 基本样式 长度 颜色 四.常用样式 字体样式 文本样式 背景样式 五.css选择器 基础选择器 基础选择器优先级 组合选择器 组合选择器优先级 属性选择器 一.css的三种引用方式 行间式 1.在标签头部的style 2.属性值是css语法 3.属性值用Key:value形式赋值,value具有单位 4.属性值之间用;隔开 <div style='width:100px;height=100px;b

CSS三种样式

插入CSS的三种方法 有三种方式插入样式表: 外部样式表 内部样式表 行内式样 外部样式表 使用外部样式表,值改变一个文件,您可以改变整个网站的外观! 每个页面必须包含一个外部样式表文件的引用,在<link> 元素里面. <link> 元素包含在 <head> 里面: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"