CSS--使用方式
创建CSS有三种方式: 外部样式表, 内部样式表和内联样式。
- 外部样式表
先建立外部样式表文件(.css)，然后在网页文件的<head>内使用<link>链接。这种方式将样式文件彻底与html文档分离，一批样式可以控制多份文档。
以下是一份简单的css文件和一个html：
h1 {font-size: 15px; font-weight: bold; color: red;}
<head>
<title>title of article</title>
<!-- 这里的link元素可以使用绝对路径，也可以使用相对路径-->
<link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
</body>
- 内部样式表
直接在<head>标签内插入<style>...</style>块，注意是写在html的head里面，这种方式每批样式只能控制一份文档。
<html>
<head>
<style type="text/css">
h2 {font-size: 15px; font-weight: bold; color: blue}
</style>
</head>
<body>
</body>
- 内联样式
在标签的style属性中定义样式。这种方式将样式内联定义到具体的html元素，这种方式通常用于精确控制一个html元素的表现。在这种方式下，没份CSS样式只控制单个的html元素。注意：不推荐使用该方式！将结构与表现混杂在一起，丧失样式表原有的优势！
<h3 style="font-size:14px;color:green;">
h3标签内的内容!
</h3>
- 各种样式设置方式的优先级，按从高到低的顺序依次为：
内联样式-->内部样式表-->外部样式表-->浏览器缺省样式。
如果不同样式的作用范围出现重叠，则高优先级样式将覆盖低优先级的设置。
其实关于CSS，我们需要牢记的是：在定义一个css样式的时候，我们需要指定2个部分，一个是选择器（selector），一个是属性（property：value）。选择器决定我们写的css对于那些html元素起作用，属性决定这些css对这些html起什么样子的作用。如果要使用内联样式，将属性直接定义在html元素的style属性里面了，所以不用指定选择器了。
p {color:#aa66cc}
h2 {text-align:center; color:red}
p.mystyle1 {font-size:20px; color:blue}
p.mystyle2 {font-sytle:italic; font-size:40px; color:#00ffff; text-align:center}
h1,h3,h4,h5,h6,p.mystyle3 {text-align:center; color:green}
.mystyle {text-align:right; color:ff00ff}
- 注意事项
1、多个属性值用分号隔开,最后一个可加也可不加;
2、如下写法可读性更好些；
p {
text-align:center;
color:black;
font-size:20px;
}
3、CSS对大小写不敏感，但在选择器中对class和id名称也不敏感；
4、注释符号 /* 注释内容 */
- CSS注释
/*设置段落显示样式*/
p {text-align:center; /*文本居中*/
color:red /*字体为红色*/
}
CSS--使用方式的更多相关文章
- css引入方式
1.<style> body{} </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...
- CSS hack方式一览【转】
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- [转]史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 细谈CSS布局方式
一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...
- CSS引入方式的区别详解
在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- CSS hack方式
史上最全的CSS hack方式一览 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现 ...
- 更便捷的css处理方式-postcss
更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲.我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下 ...
- CSS引用方式及样式层叠机制
CSS引用方式有3种,三种分别为:外部引入.内部引入.行内样式,下面一 一进行介绍. 1.外部引入:CSS代码在一个独立的文件中,HTML通过Link标签引入到页面. 代码格式:<link re ...
随机推荐
- F# 之旅（下）
写在前面的话 学习 F# 一定要去体会函数式编程的特点,推荐一下阮一峰的日志<函数式编程入门教程>. 在这篇文章中 递归函数 记录和可区分联合类型 模式匹配 可选类型 度量单位 类和接口 ...
- 微信小程序<web-view>嵌入网页后，小程序如何和网页交互传值？
最近开发一个项目由于小程序某些组件的限制,然后想到嵌入网页,但是遇到一个问题:网页端调取数据的时候需要 小程序传递多个参数值才能用,如何传值呢? 最初我想到是<web-view src=&quo ...
- 自己写的驱动用CreateFile打开时错误码返回1的问题
就像题目上说的,今天在写一个例子代码时遇到了这个问题,下面是当时驱动层和应用层的代码: #include <ntddk.h> #define BASE_CODE 0x800 #define ...
- Excel生成guid、uuid
1.Excel生成guid,uuid 格式:600d65bc-948a-1260-2217-fd8dfeebb1cd =LOWER(CONCATENATE(DEC2HEX(RANDBETWEEN(, ...
- 分享html5的一个拖拽手法
就是这样的效果:拖拽之前 之后: 上代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 微信app支付(android端+java后台)
本文讲解使用微信支付接口完成在android开发的原生态app中完成微信支付功能, 文章具体讲解了前端android如何集成微信支付功能以及后台如何组装前端需要支付信息, 话不多话, 具体看文章内容吧 ...
- CSS3使用content属性来插入项目编号
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...
- Gym101522A Gym101522C Gym101522D
Gym101522A A There are two popular formats for representing a date: day/month/year or month/day/year ...
- dfs学习总结
今天做到了dfs的训练,感觉和bfs有相似之处,接下来用一道题来总结一下方法,可类比bfs. 上题: Description There is a rectangular room, covered ...
- Python系列之入门篇——HDFS
Python系列之入门篇--HDFS 简介 HDFS (Hadoop Distributed File System) Hadoop分布式文件系统,具有高容错性,适合部署在廉价的机器上.Python ...