对 CSS 的初步了解 —— 什么是CSS

什么是 CSS?

  1. CSS 指层叠样式表 (Cascading Style Sheets)
  2. 样式定义如何显示 HTML 元素
  3. 样式通常存储在样式表
  4. 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

  5. 外部样式表可以极大提高工作效率
  6. 外部样式表通常存储在 CSS 文件
  7. 多个样式定义可层叠为一

CSS与HTML结合的方式

  1. 内联样式
  2. 内部样式
  3. 外部样式

内联样式

在标签内使用style属性指定css代码。

举例如:

Google浏览器中查看:

内部样式

在head标签内,定义style标签,style标签的标签体内容就是css代码。

举例如:

Google浏览器中查看:

外部样式

步骤:

  1. 定义css资源文件。
  2. 在head标签内,定义link标签,引入外部的资源文件。

举例如:

1、定义css资源文件

2、在head标签内,定义link标签,引入外部的资源文件。

或者:

Google浏览器中打开,查看效果:

三种方式的作用范围:内联样式 < 内部样式 < 外部样式

原文地址:https://www.cnblogs.com/liyihua/p/12364797.html

时间: 2024-08-03 14:04:44

对 CSS 的初步了解 —— 什么是CSS的相关文章

关于对CSS的初步认识

HTML是在浏览器中显示的具体内容,而CSS是控制HTML显示内容排版.颜色.宽度.高度.居左.居右.居中等属性.简单来说就是CSS可以控制HTML显示内容的样式,要正确的使用CSS,需要对CSS基本知识有足够的了解,从下面几个方面来看: 一.CSS中的块模型 1.在CSS的定义中,有块元素,它一行只能显示一个,比如div.tabble.p.ul.hl等,有行内元素,它根据行宽度紧凑排列显示,如a.span.font.strong等. 2.块元素,有块框存在content.padding.bor

Html/CSS 初步介绍html和css部分重要标签

&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 html标签(仅有一个),内部可以写属性 自闭合标签      例:<meta /> 主动闭合标签          大多都需主动闭合 head标签: -<meta > 编码,跳转/刷新(提及但不推荐在此书写),关键字,描述,IE兼容(主要避免IE6的乱码问题,现今无需考虑) -title 标签 -Link    搞图标 -style     

CSS减肥的工具–Firefox插件 CSS Usage

首先,我们需要安装Firefox(猛击此处下载),或者确定你已经安装的版本已经高于3.1; 第二步,安装前端开发人员最普及的开发工具 Firebug: 第三步,安装CSS Usage 0.3.4.1: 第四步,在浏览器中打开我们要优化的页面(本地的页面也可以),点击右下角的firebug小图标,打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮. 首先我们来分析最上面的三个功能按钮的使用 Scan: 通过字面意思我们就能知道,这是一个扫描当前页面的工具,如

CSS命名规范(规则)常用的CSS命名规则

头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:co

CSS基础学习十八:CSS布局之浮动

CSS布局中说到定位就不得不提浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动 框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 一float属性的定义和用法 float属性:设置元素浮动 可能的值: none 不浮动,在文档流内,默认 left  左浮动,脱离文档流 right 右浮动,脱离文档流 inherit 规定应该从父元素继承 float属性的值. float属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文

HTML中放置CSS的三种方式和CSS选择器

(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style="font-size: 10px; color: #FFFFFF;"> 使用CSS内联引用表现段落. </p> 特点:内联的样式比其他方法更加灵活,但需要和展示的内容混淆在一起,内联样式会失去一些样式表的优点. 第二种:内部引用(也叫内嵌式) 使用style标签直接把CSS

CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: 1. 标准流   (最稳定) 2. 浮动流   (float 其次) 3. 定位流    ( 稳定性最后) 定位是完全脱离标准流的一种布局方式. 其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学

CSS自学笔记(3):CSS样式表的使用

当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同一个样式的时候,外部样式表是一个很理想的选择. 在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观,无需在调整html文件,尤其是多个页面使用同一个样式的时候. 每个html页面使用标签<link>来连接外部样式表: <head> <link rel="

css两个紧挨着的css选择器修饰同一个元素

#status, .commands{ height: 25px; line-height: 25px;}.upload .commands{ float: right;}.hidden{ display: none;}#status{ float: left; font-size: 12px;}#status.error{ color: Red; width: 100%;}#status.info{ color: #333; width: 100%;}#status.success{ colo