Css（Cascading Style Sheets,层叠样式表）是一种页面美化方法，通过编辑Css的对象属性达到美化页面的效果。Css的操作基本单元为对象，使用CSS的感觉就像是使用C++/C中的函数，CSS对象就像是函数，通过定义，声明，调用来使用。

CSS有三种选择器（对象定义和使用方式）：标签选择器，类别选择器，ID选择器

CSS有四种包含方法：行内式，内嵌式，链接式，导入式

标签选择器：

定义：引用的样式对象名{标签属性：属性值；标签属性：属性值；…….}

eg: h1,h2{text-align: center; color: red;}

使用：<h1>……..</h1>

<h2>……..</h2>

类别选择器：

定义：标签名.类名{标签属性：属性值；标签属性：属性值；…….}或者

.类名{标签属性：属性值；标签属性：属性值；…….}

eg: p.center{ text-align: center; }

.right{ text-align: right; }

使用：<p class=”center”>……..</p>

<h1 class=”right”>……..</h1>

(*区别：后一种格式表示 所有class属性值为该类名的标签都遵守该类所定义的样式)

　　　 (eg: 定义了.right{text-align: right;}，调用的时候，只要是通过class调用right的属性的标签，都可以表现出right的属性。<h2 class=”right”>…..</h2>; <p class=”right”>……  　　　 </p>;<span class=”right”>……</span>;等等标签都表现出右对齐的属性。 )

ID选择器：

定义：#id名称{标签属性：属性值；标签属性：属性值；…….}

eg: #sample{font-family:宋体; don’t-size:60pt;}

使用：<p id=sample>……</p>

行内式：

不需要定义选择器，利用style属性直接为元素设计样式

eg: <p style=”color:#FF0000”>……</P>

内嵌式：

先定义选择器，将样式表定义在<head></head>之间。

eg:

<html>

        <head>

           <title>xxxxxx</title>

            <style type=”text/css”>

                p{color: #000FF;}

                .info{font-size: 12px;}

             </syle>

        </head>

 </html>

链接式：

定义的对象单独放在一个以.css为扩展名的文件里，在使用<link>标签链接到所需要的网页中，在<head></head>之间。

eg: <link href=”xxx.css” type=”text/css” rel=”stylesheet”>

导入式：

与链接式方法类似，只是通过import的方法导入。

eg: <style type=”text/css”>@import url(xxx.css);</style>

CSS样式表的优先级：

嵌入式样式表 > 内联式 > 外联式 > 浏览器默认

16:28:52 2016-10-07

css的用法的更多相关文章

  1. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

  2. Css相关用法个人总结

    Css相关用法个人总结

  3. 牢记 31 种 CSS 选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2011 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  4. 网页重构应该避免的10大 CSS 糟糕用法

    对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始 ...

  5. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  6. 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

    PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...

  7. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  8. 网页重构应该避免的10大CSS糟糕用法

    对于网页重构来说,CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 .这些年来,随着我们的网站越来越复杂:html5,css3,新的技术.新的属性,越来越多的开发者开始 ...

  9. 简单html以及css的用法

    我将利用三天的时间来完成制作京东首页的静态页面效果,其中包含的内容有html以及css. 1.在开发进行之前,首先要配置开发环境:我们需要安装sublime  webstorm  vscode  Hb ...

随机推荐

  1. IO（六）--- 编码和解码

    编码: 把看得懂的字符变成看不懂码值这个过程我们称作为编码. 解码: 把码值查找对应的字符,我们把这个过程称作为解码. 注意: 以后编码与解码一般我们都使用统一的码表.否则非常容易出乱码. 常用码表: ...

  2. Java 8新特性终极指南

    目录结构 介绍 Java语言的新特性 2.1 Lambdas表达式与Functional接口 2.2 接口的默认与静态方法 2.3 方法引用 2.4 重复注解 2.5 更好的类型推测机制 2.6 扩展 ...

  3. 让游戏以高性能GPU（独立显卡）运行

    在EXE中导出全局变量: N卡: extern "C" { __declspec(dllexport) DWORD NvOptimusEnablement = 0x00000001 ...

  4. Windows phone应用开发[22]-再谈下拉刷新

    几周之前在博客更新一篇Windows phone应用开发[18]-下拉刷新 博文,有很多人在微博和博客评论中提到了很多问题.其实在实际项目中我基于这篇博文提出解决问题思路优化了这个解决方案.为了能够详 ...

  5. CSS编写技巧

    1.尽量少的使用全局的重置代码 全局重置代码:*{margin:0; padding:0;}对于熟悉CSS的人来说并不陌生,并且有很多人的第一句CSS代码就是这句.它可以避免不同浏览器的默认间距不同而 ...

  6. html与htm区别

    1.index.html与index.htm同时有,先访问.html 2.htm是为了兼容以前的DOS系统.

  7. logging 模块误用导致的内存泄露

    首先介绍下怎么发现的吧, 线上的项目日志是通过 logging 模块打到 syslog 里, 跑了一段时间后发现 syslog 的 UDP 连接超过了 8W, 没错是 8 W. 主要是 logging ...

  8. Jsoup 使用教程：数据抽取

    1.使用DOM方法来遍历一个文档 问题 你有一个HTML文档要从中提取数据,并了解这个HTML文档的结构. 方法 将HTML解析成一个Document之后,就可以使用类似于DOM的方法进行操作.示例代 ...

  9. Mac 下面 apache 不解析PHP（or PHP 版本不对）的解决办法

    Mac 升级到 EI Caption 之后发现 apache 的配置被重置了,记录下解决的步骤: 在 apache2 配置文件中修改 PHP 的扩展路径即可: vi /etc/apache2/http ...

  10. 教你一招：解决安装或卸载office时 提示错误2503 2502 发生了内部错误

    问题重现: 解决办法:使用软件卸载工具 Uninstall Tool 3.5.1 中文破解版强制删除文件,非常暴力,完美解决. 解决过程一览: 工具下载地址: 软件卸载工具 Uninstall Too ...