样式的组成

1、选择器：将样式与页面中的某一个或某些标签建立联系，就要使用选择器，在head标签下写一个style标签，将需控制参数的标签名写在这个style标签下，设置属性即可通过css来控制html的样式，这就是选择器

2、作用域：作用域就是style标签下需要控制的标签名后面的{}，这个{}内的参数就是作用域参数

3、样式块：作用域里面的参数语句就是样式语句，这个作用域就是样式块

css的引入方式

1、行间式样式导入，直接将css样式写在标签的style属性中

优点：对样式操作简单粗暴

缺点：可读性差，如果区域标签有很多条，那么也要写很多条，随着页面增大标签越来越多越来越复杂，复用性差

PS：只想修改单独的标签，使用这个比较方便

2、内联式，将css样式书写在style标签中,style标签写在head标签中

优点：可读性强，复用性强

缺点：延展性差（不适合团队开发，只有写的人看得懂）

PS:单文件使用，比较方便

3、外联式，在head里面写一个链接标签做导入即可

优点：延展性强（适合团队开发），复用性强，可读性强

缺点：必须要多文件

PS:团队开发时候使用外联式，因为很多文件都要引用

样式实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>样式引入</title>
    <!--这个是外联式需要导入的写法，用link标签在href里面用相对路径导入外联css样式文件-->
    <link rel="stylesheet" href="./css/index.css">

    <style>
        /*这属于css语言，采用css语法，所以备注的方式和html不一样，采用这条的格式*/
        /*将样式与页面中的某一个或某些标签建立联系，只要使用选择器，将需要的标签写在这个style标签下，设置属性即可，这就是选择器*/
        /*作用域就是h1后面的{}，这个{}内的参数就是作用域参数*/
        /*作用域里面的参数语句就是样式语句，这个作用域就是样式块*/
        h1{
            width: 150px;
            height: 150px;
            background-color: hotpink;
        }
    </style>

</head>
<!--行间式样式导入，直接将css样式写在标签的style属性中-->
<!--优点：对样式操作简单粗暴，缺点：可读性差，如果区域标签有很多条，那么也要写很多条，随着页面增大标签越来越多越来越复杂，复用性差-->
<body style="background-color:black">
    <!--上面的style是设置整个页面的背景色，下面的div里面的style是设置区域的背景色包括区域的大小-->
    <div style="background-color: white; width:200px; height:200px;" >这是一个区域</div>
    <div style="background-color: darkslategrey; width: 200px; height: 200px;">这是一个区域</div>

    <!--内联式，将css样式书写在style标签中,style标签写在head标签中-->
    <!--优点：可读性强，复用性强，缺点：延展性差（不适合团队开发，只有写的人看得懂）-->
    <h1>这里是内联式区域</h1>
    <h1>这里是内联式区域</h1>

    <!--外联式，在head里面写一个链接标签做导入即可-->
    <!--优点：延展性强（适合团队开发），复用性强，可读性强 缺点：必须要多文件-->
    <p>这里是外联式区域</p>
    <p>这里是外联式区域</p>
</body>
</html>

（5）css样式导入的更多相关文章

  1. IOS UIWebView引用外部CSS样式（转载）

    首先,将要引用的CSS样式导入到工程文件,然后我们可以自己拼装一个网页并引用这个样式,具体代码实现如下: -(void)viewDidLoad { [super viewDidLoad]; NSStr ...

  2. HTML CSS样式基础

    一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用cs ...

  3. 20190422-外部导入CSS样式之link、CSS@import、Sass分音

    写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻 ...

  4. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  5. nuxt导入css样式

    全局导入,适用于所有组件 在nuxt.config.js文件引 css:["~样式path"], 如:css:["~assets/css/main.css"], ...

  6. html导入css样式的方法

    在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p style="width:100px;height:40px;color:red;"></ ...

  7. CSS样式应用

    CSS样式应用的方法: (1)行内样式,将css样式直接放到标签当中,一般都是放入标签的style属性中,它是最方便的一种样式,也是最不方便修改的样式.如下: (2)内嵌式,通过将css写在网页源文件 ...

  8. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  9. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

随机推荐

  1. Zabbix3.4.7监控windows进程

    1.首先,找到要监控进程的主机 创建新的监控项 然后应用集选择processes,点击添加,此处是以zabbix_agentd.exe为例添加 2. 为此监控项添加触发器 注意触发器表达式的编写,上面 ...

  2. 20 KMP匹配的Next值和Nextval值

     i       0    1    2    3    4    5    6    7    8 s     a    b    a    b    a    a    b    a    b n ...

  3. JavaScrip(一)JavaScrip的写法

    一:如何写JavaScript 1.直接写入 <scricp type="text/javascricp >*********</scricp> 直接写到标签里面. ...

  4. ６.５C++查找字符串

    参考:http://www.weixueyuan.net/view/6394.html 总结: find函数可以在字符串中查找子字符串中出现的位置.该函数有两个参数,第一个参数是待查找的子字符串,第二 ...

  5. HTML 表单中的验证

    凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非 ...

  6. nginx 更改用户组

    为什么要更改 Nginx 服务的默认用户:就像更改 ssh 的默认 22 端口一样,增加安全性,Nginx 服务的默认用户是 nobody ,我们更改为 nginx 1) 添加 nginx 用户 us ...

  7. ajax参考增删改查

    AJAX做增删改查详细!   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  8. Maven Speed Up

    收录架构 proxy代理仓库 不支持仓库搜索功能 收录版本 所有版本 更新时间 每24小时更新一次 使用说明 一.在maven软件中使用 以Maven 3.5.2为例: 打开maven配置文件 ./a ...

  9. Python实现简单的udp打洞（P2P）

    UDP穿越NAT的具体设计 首先,Client A登录服务器,NAT 1为这次的Session分配了一个端口60000,那么Server S收到的Client A的地址是200.0.0.132:600 ...

  10. 校验总结:校验是否是中英文等等(1.正则校验 2.hibernate volidator)

    1.正则校验 import java.util.regex.Matcher;import java.util.regex.Pattern; public class Validation { //-- ...