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 ...
随机推荐
- python3之模块collections
1.计数器(counter) counter是对字典的方法,用来追踪值的出现次数:具备字典的所有功能和自己的功能. >>> from collections import Count ...
- 【树状数组】BZOJ3132 上帝造题的七分钟
3132: 上帝造题的七分钟 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1004 Solved: 445[Submit][Status][Dis ...
- 使用js对form表单base64加密
利用js可以对前台数据加密,以防止被恶意获取,以下代码,用base64对数据进行加密,可以在后台进行解密. 引入的js <script type="text/javascript&qu ...
- 激活IDEA
1 先跳过提示 2 点击regist 3 输入注册码 : 我的注册码在这里找的 - >> http://hw1287789687.iteye.com/blog/2153894
- Vijos-P1057题解
题目如下: https://www.vijos.org/p/1057 思路分析: 输入文件第一行为两个整数n,m(1<=n,m<=1000),接下来n行,每行m个数字,用空格隔开.0表示该 ...
- SSIS 延迟验证（DelayValidation）
验证是一个事件,该事件在Package执行时,第一个被触发,验证能够避免SSIS引擎执行一个有异常的Package或Task.延迟验证(DelayValidation)是把验证操作延迟到Package ...
- python 序列话模块 常用
什么是序列化? 我们把对象(变量)从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serialization,marshalling,flatte ...
- Oil Deposits(dfs水)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1241 Oil Deposits Time Limit: 2000/1000 MS (Java/Othe ...
- flume1.8 开发指南学习感悟
概述: Apache Flume是一个分布式.可用的系统,用于从许多不同的sources有效的收集并移动大量日志数据用于集中存储数据. 架构及数据流动模型: flume实际上就是一个Agent.Age ...
- js根据出生年月日换算年龄
function age_Conversion(date) { debugger var age = ''; var str = date.replace(/年|月/g, "-") ...