CSS的三种样式表和优先级

1、外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS外部样式表</title>
    </head>  <!--引入CSS样式表 -->
    <link rel="stylesheet" type="text/css" href="../css/css1.1.css"/>
    </style>
    <body>

    <h1>我是大标题哦!</h1>

    </body>
</html>

css1.1样式表

h1{
    font-family: "agency fb";
    font-size: 18px;
    color: #0000FF;
}

2、内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS内部样式表</title>
    </head>
    <style type="text/css">
        div{
            widows: auto;
            height: 2em;
            background: red;
        }

    </style>
    <body>
    <div>
        <p>我是一个div</p>
    </div>

    </body>
</html>

3、内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

<p style="font-size:1cm;color:red;border:1ps solid blue">这是一个段落    </p>

样式的优先级

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

时间: 2024-10-01 10:43:47

CSS的三种样式表和优先级的相关文章

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&g

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

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css

css学习笔记——三种样式表的使用及区别

如何插入样式表 插入样式表的方法有三种: 外部样式表 内部样式表 内联样式 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. <link> 标签在(文档的)头部: <head> <link rel="stylesheet" type="text/css" href="mystyle.

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

三种样式表插入方法

外部样式表: <link rel="stylesheet " type="text/css" href="Mystyle.css"> 内部样式表: <style type="text/css"> P{ color:green; } </style> 内联样式表: <p> style="color:red"></p>

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

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

CSS层叠规则(即引入CSS的三种不同方式的优先级)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type"