网页诞生初期,没有描述样式的语言,创建了很多用于描述样式的标签。但这些标签破坏了html作为一门结构语言的表现。

于是,W3C在1995年开始起草CSS,提出将结构和样式分离的解决方案。

元素

元素是文档结构的基础,在CSS中,每个元素都会生成一个框(或者说盒)

表现形式

替换元素:替换元素的内容并非有浏览器直接生成,典型的莫
过于img元素了;
非替换元素:大部分html元素都是非替换元素,如div元素、p元素等 块级元素:填充父元素的内容区
行内元素:在文本行内生成元素框

声明CSS

[1] 外部样式表

永久样式表(persistent style sheet)
如果指定rel属性为stylesheet,没有指定title属性,那么它
将成为一个永久样式表
<link rel="stylesheet" href="/style.css"> 候选样式表(alternate style sheet)
如果为link标签指定一个title属性,那么它将成为一个
候选样式表
<link href="/style1.css" title="mystyle1"> 首选样式表(preferred style sheet)
在link标签已经指定rel为stylesheet的情况下,再指定
title属性,那么它将成为一个首选样式表
<link href="stylesheet" href="/style1.css" title="mystyle1"> ```
其他属性:
media:
all //所有媒体
screen //屏幕媒体
handheld //手持设备
aural //语音合成器
tv //电视
tty //固定间距环境
print //打印设备
embossed //Braille打印设备
braille //Braille设备
projection //投影设备
```

[2] 文档样式表

在文档中使用style标签包含样式表,成为文档样式表
(document style sheet)或内嵌样式表(embedded style sheet)
<style>
div {
color: #f60;
}
</style> 在style标签内可以使用@import加载外部样式表
@import url(style2.css) screen; @import与link标签相比较:
声明必须放在所有样式前面
无法指定候选样式表,所有声明的样式都会被加载

[3] 内联样式

使用style属性为单个元素设置属性,inline在这里翻译为内联
,而不是行内,意为内部自带
<p style="color:#f60">天若有情</p> 注意:不推荐使用,一个内联样式只能放一个声明快,不能放整个样式表
,因此不能使用诸如@import之类的规则,style属性的值只能是出现
在大括号之间的部分。

CSS基础之简单介绍的更多相关文章

  1. 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍

    一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...

  2. iOS开发基础-KVC简单介绍

    一.KVC介绍 键值编码(Key Value Coding,KVC):使开发者不必进行任何操作就可以进行属性的动态读写. KVC操作方法由 NSKeyValueCoding 协议提供,而 NSObje ...

  3. ActiveMQ基础教程----简单介绍与基础使用

    概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...

  4. [01]HTML基础之简单介绍

    1.前言 现如今科技进步,足不出户尽晓天下事,一转身便仿若隔世茫然.科技绽放时代,网络技术对人们的触变无疑是深远而重大的,隐于缤纷绚丽的网页背后,是前端的蜕变更新. 如今,随意点开页面,绚丽华彩的特效 ...

  5. css基础学习---简单理解

    1:在css中定义图片相对路径 #primary-nav { //相对路径 background: url(../images/alert-overlay.png) repeat-x; height: ...

  6. CSS基本样式简单介绍

    具体详情内容请查阅<css参考手册> 一.基本结构样式 width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距 ...

  7. JSON基础,简单介绍

    JSON(JavaScript Object Notation(记号.标记)) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...

  8. SpringMVC总结二:Controller的请求映射方式(RequestMapping)简单介绍

    在SpringMVC总结一:快速入门的基础上简单介绍一下请求映射的方式: 1,标准映射规则 1. @RequestMapping可以设置在类上,也可以设置在方法上 2. 请求的映射规则是:类上的Req ...

  9. HTML&CSS基础-前端免费开发工具Hbuilder介绍

    HTML&CSS基础-前端免费开发工具Hbuilder介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 工欲善其事必先利其器,想要干好活得有一个好的工具. 一.文本编辑工 ...

随机推荐

  1. python脚本实现接口自动化轻松搞定上千条接口用例

    接口自动化目前是测试圈主流的一个话题,我也在网上搜索了很多关于自动化的关键词,大多数博主分享的python做接口自动化都是以开源的框架,比如:pytest.unittest+ddt(数据驱动) 最常见 ...

  2. python 生成随机字符串

    1.生成随机字符串 #数字+字母+符号 def getRandChar(n): l = [] #sample = '0123456789abcdefghijklmnopqrstuvwxyz!@#$%^ ...

  3. PHP非常用函数汇总

    1) ARRAY_FILTER — 用回调函数过滤数组中的单元 function  odd ( $var ) {      // returns whether the input integer i ...

  4. 计划任务工具-windows

    计划任务工具根据自己设定的具体时间,频率,命令等属性来规定所要执行的计划. 代码 # -*- coding: utf-8 -*- """ Module implement ...

  5. spring boot 入口源码分析

    public ConfigurableApplicationContext run(String... args) { StopWatch stopWatch = new StopWatch(); / ...

  6. 01Java核心-冷门知识001-包

    1)导入静态方法和静态域 import 可以加上static关键字,导入静态的方法和静态域. 例如: package com.gail.test; import static java.lang.Sy ...

  7. 泛微 e-cology OA 前台SQL注入

    poc https://github.com/AdministratorGithub/e-cology-OA-SQL 用法:python elog_sql.py http://target 不存在返回 ...

  8. 01 . HAProxy原理使用和配置

    HaProxy简介 HaProxy是什么? HAProxy是一个免费的负载均衡软件,可以运行于大部分主流的Linux操作系统上. HAProxy提供了L4(TCP)和L7(HTTP)两种负载均衡能力, ...

  9. 七个生产案例告诉你BATJ为何选择ElasticSearch!应用场景和优势!

    本文来源于公众号[胖滚猪学编程],转载请注明出处. 从今天开始,想和你一起死磕ElasticSearch,学习分布式搜索引擎,跟着胖滚猪就对了! 既然是ES的第一课,那么最重要的是让你爱上它!不想说那 ...

  10. win10下安装scrapy出现错误的处理

    一.背景: 在win10的dos窗口下使用命令pip install scrapy安装scrapy时,出现“ error: Microsoft Visual C++ 14.0 is required. ...