1.CSS介绍:层叠样式表(Cascading Style Sheets)

我们为什么需要CSS?

使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力。是时候做出改变了,所以CSS就出现了。

CSS的出现解决了下面两个问题:

  1. 将HTML页面的内容与样式分离。
  2. 提高web开发的工作效率。

什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优势

1.内容与表现分离 2.网页的表现统一,容易修改 3.丰富的样式,使页面布局更加灵活 4.减少网页的代码量,增加网页浏览器速度,节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录

如何使用CSS?

我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。

2.CSS语法

CSS基础语法

CSS语法可以分为两部分:

  1. 选择器
  2. 声明

声明由属性和值组成,多个声明之间用分号分隔。

CSS注释

注释是代码之母。

/*这是注释*/

3.三种方式:引用CSS样式

  • 内联样式
  • 行内样式表
  • 外部样式表
    • 链接式
    • 导入式

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的

7-[CSS]-css介绍,引入方式的更多相关文章

  1. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  2. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  3. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

  4. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  5. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

  6. css js 的引入方式和书写位置

    css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...

  7. CSS优先级、引入方式、Hack

    优先级 important > 内联(1,0,0,0) > id(1,0,0) > class(1,0) > element(1) > *通配符 css引入方式 方式一: ...

  8. CSS三种引入方式:内联、页级、外联

    1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS ...

  9. css快速入门-引入方式

    一.概述 HTML是骨架.框架CSS是外表.衣服JS是动作.肌肉 css的主要作用是对元素进行渲染.1.找到要操作的标签(选择器)2.对定位的标签进行操作(属性) 二.CSS引入方式 1.行内式 &l ...

  10. 四种CSS样式的引入方式

    准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下 ...

随机推荐

  1. SQL Server ->> 存储过程sp_describe_first_result_set解析T-SQL语句的结果集结构信息

    返回 Transact-SQL 批处理的第一个可能结果集的元数据. 如果批处理没有返回结果,则返回一个空的结果集. 如果数据库引擎无法确定将通过执行静态分析来执行的第一个查询的元数据,则引发错误. E ...

  2. .net 下使用Quartz.Net

    Quartz.net是作业调度框架 1. 项目中添加quartz.net的引用(这里使用nuget管理) 新建一个类TimingJob,该类主要用于实现任务逻辑 using Quartz; using ...

  3. Docker 命令总结

    1 启动镜像 docker run -i -t centos /bin/bash

  4. Numpy 的常用操作

    1.创建数组array # 创建数组array import numpy as np a = np.array([1,2,3]) #创建数组 b = np.array([(1.5,2,3), (4,5 ...

  5. ZT 类模板的声明和实现是不能分离的

    http://bbs.csdn.net/topics/380250382 adlay adlay 等级: #9 得分:0 回复于: 2012-03-31 11:19:35 引用 6 楼  的回复: 引 ...

  6. 函数的调用 and 打印返回值 ret= mai() print(ret)

    def mai(): # mai 函数名 (yan) 形式参数 print("老板,给我一包中华") return"给你" # 返回值-- 给你ret = ma ...

  7. MySQL复制(二)Master-Slave复制实践

    1. 准备工作 首先要准备2台机器,分别安装mysql 我这里的版本是5.1.73,mysql数据库安装请参考:http://www.cnblogs.com/tangyanbo/p/4289753.h ...

  8. Hadoop HA on Yarn——集群启动

    这里分两部分,第一部分是NameNode HA,第二部分是ResourceManager HA (ResourceManager HA是hadoop-2.4.1之后加上的) NameNode HA 1 ...

  9. 洛谷 P2764 最小路径覆盖问题【最大流+拆点+路径输出】

    题目链接:https://www.luogu.org/problemnew/show/P2764 题目描述 «问题描述: 给定有向图G=(V,E).设P 是G 的一个简单路(顶点不相交)的集合.如果V ...

  10. Payment:微信支付配置文件设置说明

    项目GitHub地址:https://github.com/helei112g/payment 微信支付个人觉得在帐号设置上有些麻烦,帐号太多啦,支付宝目前就是一个应用基本涵盖了所有的接口开发. 可能 ...