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. 在asp.net一般应用程序中使用session

    通常我们经常,通过session判定用户是否登录.还有一些临时的.重要的数据也尝尝存放在Session中. 在页面我们很容易的得到Session的值,但在类中就会遇到一些问题.也知道通过下面的方法得到 ...

  2. 在table中选中某条数据,让其显示对应详细信息

    在第一个页面中使用 ccms.dialog.open({url:url+$(this).attr("code"),id:"dialogPic",width:10 ...

  3. Shell: extract more from listener.log (分析oracle监听日志)

    最近遇到了两起数据库连接数不足的问题, 通常都会预留一些会话增加的情况, 但在一些特殊情况下如连接风暴(logon storm), 如果在监听中没有做rate限流,对数据库来说巨大的冲击可能会导致数据 ...

  4. 转:Window_Open详解

       引:Window_Open详解一.window.open()支持环境:JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法:window.op ...

  5. 如何快速的给你的项目添加icon图标

    如何快速的给你的项目添加icon图标 下载软件 如何制作图片 将制作的图标拖到项目当中 设置启动页 注意: 如果手动添加了启动页的话,记得将Launch Screen中的东西清除掉

  6. swift如何打印对象的地址

    swift如何打印对象的地址 打印对象的地址还是有着很多实用价值的,在swift中,你可以用以下的方式打印一个对象的地址: 打印结果: 有时候,if let a = b 这种操作会给人一种错觉,认为 ...

  7. Python入门-模块2(sys模块、shutil 模块)

    sys模块: sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取Python解释程序的版本信息 s ...

  8. Linux setfacl/getfacl命令详解

    setfacl,命令名,设置文件访问控制列表,即ACL规则.而Acl(Access Control List)就是访问控制列表 setfacl常见命令参数 setfacl 2.2.51 -- 设定文件 ...

  9. 一、Vim编辑器 二、用户和组管理 三、软件的安装(jdk,mysql) 四、Shell编程

    一.Vim编辑器的使用 1. vim编辑器的运行模式 编辑模式:等待用户编辑命令的输入 插入模式:编辑文本内容 命令模式:执行命令 2. 使用 :vim 文件名 3. 查看当前vim编辑器介绍:vim ...

  10. mysql 索引分类以及用途分析

    MySQL索引分为普通索引.唯一性索引.全文索引.单列索引.多列索引等等.这里将为大家介绍着几种索引各自的用途. 一. MySQL: 索引以B树格式保存 Memory存储引擎可以选择Hash或BTre ...