CSS基础知识总结之css样式引用的三种方式

在html中增加css样式有三种:

1.在标签中增加style属性:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <!--tag标签的图标-->
    <link rel="shortcut icon" href="timg.jpg">
</head>
<body>
<div style="background-color: blue ;width: 80px;height: 80px "></div>
</body>
</html>

2.

第二种可以在head中增加style标签 style中通过选择器定位标签增加style样式

css选择器:

  id选择器:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
        /*id选择器*/
        /*#代表id,#i1代表定位到class为i1的元素*/
       #i1{
           background-color: #000000;
           width: 80px;
           height: 80px;
       }
    </style>
</head>
<body>
<!--id在html只允许出现一个同名id-->
<div id="i1"></div>
</body>
</html>

  class选择器:最常用

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
        /*class选择器*/
        /*.代表class,.c1代表定位到class为c1的元素*/
       .c1{
           background-color: #000000;
           width: 80px;
           height: 80px;
       }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

  标签选择器:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
         /*标签选择器*/
        /*所有的div的标签都带有下面属性*/
       div{
           background-color: pink;
           width: 80px;
           height: 80px;
       }
    </style>
</head>
<body>
<div class="c1"></div>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
       div{
           background-color: pink;
           width: 80px;
           height: 80px;
       }
        .c1{
            background-color: blue;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div></div>
</body>
</html>

  层级选择器:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
       /*层级选择器*/
        div span{
            background-color: red;
            width: 80px;
            height: 80px;
        }
         #i1 span{
             background-color: blue;
             width: 80px;
             height: 80px;
         }
        .c1 span{
            background-color: pink;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1">
    <span>这是span标签</span>
</div>
<div id="i1">
    <span>这是span标签</span>
</div>
<div>
    <span>层级选择器</span>
</div>

</body>
</html>

  多个标签引用同一个标签:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
        /*多个标签引用同一个标签*/
         #i1,#i2,#i3{
             background-color: blue;
             width: 80px;
             height: 80px;
         }
        .c1{
            background-color: pink;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div id="i1"></div><br>
<div id="i2"></div><br>
<div id="i3"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>

3. 在head里面使用link引入css样式表:

css表:c1.css

.c1{
    background-color:red;
    width: 80px;
    height: 80px;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <link rel="stylesheet" href="c1.css">
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>

样式表的引用顺序联系:

css表:c2.css

.c1{
    background-color: pink;
    width: 100px;
    height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="c2.css">-->
    <style>
        /*样式表的引用关系,以标签为起的位置,由下而上的开始应用*/
     .c1{
        background-color: red;
        width: 100px;
        height: 100px;
        }
    </style>
    <link rel="stylesheet" href="c2.css">
</head>
<body>
<div class=‘c1‘ style="background-color: #0000CC;width: 100px;height: 100px"></div>
</body>
</html>

原文地址:https://www.cnblogs.com/wxcx/p/8684809.html

时间: 2024-10-08 07:49:35

CSS基础知识总结之css样式引用的三种方式的相关文章

【SSH三大框架】Spring基础第二篇:Spring依赖注入的三种方式

控制反转(Inversion of Control)和依赖注入(Dependency Injection): 应用控制反转,对象在被创建的时候,由一个调控系统内所有对象的外界实体将其所依赖的对象的引用传递给它.也可以说,依赖被注入到对象中.所以,控制反转是,关于一个对象如何获取他所依赖的对象的引用,这个责任的反转. 对于依赖注入,有三种方式: 1.使用属性的setter方法注入 2.使用构造器注入 3.使用注解注入 下面我们介绍下这三种方式: 一.使用属性的setter方法注入 首先,我们写一个

CSS基础知识之背景图片样式属性、雪碧图、列表导航栏、超链接的伪类样式、盒子模型、overflow、圆角弧度

目录: 背景图片样式属性 雪碧图 列表导航栏 超链接的伪类样式 盒子模型. overflow. 圆角弧度 背景图片样式属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #imgContainer { border: 20px dotted yellow; padding: 50px; height: 400p

CSS基础知识梳理

CSS基础知识: 1.CSS层叠样式表(Cascading Style Sheets):解决内容与表现分离的问题. 2. 层叠次序: (1)浏览器缺省设置: (2)外部样式表: (3)内部样式表(位于 <head> 标签内部): (4)内联样式(在 HTML 元素内部): 即,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值). 3.CSS语法:CSS 规则由

html和css基础知识

一,html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等.2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现.3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

[HTML &amp; CSS] HTML和CSS基础知识

最近将博客简单地修饰了下,需要用到HTML和CSS代码,花了一天时间学习了一下这两方面的知识.虽然内容很简单,但是足够用来修改自己的博客了. 1. HTML 1.1. HTML介绍 HTML与CSS的关系 HTML 网页内容的载体,内容包含文字.图片.视频等. CSS 网页的样式,即表现,包含标题字体.颜色.边框等. JavaScript 实现网页上的特效效果. HTML文件的基本结构 <html> <head>…</head> <body>…</bo

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

(转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教