CSS 概念 & 作用

http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html

式样定义如何显示 HTML内容

通常存储在式样表中

作用 : 解决内容与表现分离的问题 ( MVC 模型 , model : html , view : css , control : JavaScript )

外部式样表可以极大的提高效率 , 例如要修改网页中标题的表现形式 , 如果网页中有100个标题, 如果使用HTML进行修改, 则需要修改100次, 如果使用CSS进行修改, 则只需要修改1次就OK了, 因为内容与表现分离了, 所以可以将表现(式样表)保存起来, 未了以后使用

式样表可以层叠出现 , 后边的式样会将前边的式样覆盖 , 比如规定标题式样为 a , 而其中几个页面想改变这种式样, 就可以再加入式样表, 只是针对这些进行修改 .

层叠次序 : 1. 浏览器默认

2. 外部式样表

3. 内部式样表(位于 <head>标签内部 )

4. 内联式样(在 html元素内部)

基本格式

css规则是由两部分组成 : 选择器以及一条或多条声明. selector { declaration1 , declaration2 ......} 选择器通常是一个html元素, 每条属性是一个属性和一个值组成.属性和值用:号分开.例如 : h1{ color:red ; font-size:14px ; }

CSS 概念 & 作用

选择器可以分组: 组内设置同样的样式. 例如 : h1, h2, h3 {} 这样的作用是, h1, h2, h3 中的式样是相同的.

继承及问题: 子元素可以从父元素继承属性, 所以，父元素在定义属性时，要注意，不能太细节化，导致有的子元素不需要该细节，也被继承过来。例如 body { font-family : Verdana ;} 那么body内的子元素, 例如 p, td, ul 等等全部会使用 verdana 字体. (部分)

css派生选择器: 是指多个元素标签在一起作用的css样式 , 后代选择器 , 子元素选择器 , 相邻兄弟选择器 (全部都有,谁先谁后, 必须有顺序 )

后代选择器 : 例如 h1 em { color : red ;} <h1> This is a <em>heading</em></h1> 其中的heading式样不同, 因为是 h1 与em的共同作用.

子元素选择器 : h1 >strong { color : red ;} 注意此处的 > 号 , 表示在 h1内部的所有的 strong标签内部的式样, 请看如下例子

<h1> This is a <strong> very </strong> important</h1> --> 此时的 very满足式样规则 ( 中间再有别的标签也不要紧 )

<h1>This is a<em>really<strong>very</strong></em>important</h1> -->此时不满足如上规则 h1>strong, 因为在strong外层还有一个em标签. 即必须strong直接跟着h1. ( 有顺序的 )

后代选择器与子选择器的区别 : 后代选择器是指所有后代，即如上例子， <h1> 与 <em> 之间可以由其他标签都没关系，而子选择器仅指它的直接后代，标签之中不能再有其他标签，后代选择器使用空格，而子选择器使用 > 大于号。

相临兄弟选择器 : 如果选择紧接在另一个元素后的元素, 或者二者有相同的父元素, 例如 : h1 +p { margin-top : 50px ; } 这个选择器读作 : "紧接在h1元素后出现的段落元素p, h1和p拥有共同的父元素 " , 用一个结合符 + 只能针对两个兄弟中的第2个以后进行式样变更, 即+号后边的内容.

例如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。这也就是紧接在另一个元素后的含义。

id选择器: 可以为标有特定 id 的 HTML 元素指定特定的样式 . 以 # 号定义 . #red { color : red ; } #blue { color : blue ; } <p id = "red"> 这个段落是红的</p> <p id= "green">这个段落是绿的</p> , 可以组合使用 , #sidebar p { color : red ;} 此时在标记了 id = "sidebar" 元素内部的 p 就会有特殊的意义, 跟别的段落 p 就会不同 .

类选择器 : .center {text -align : center ; } <h1class="center"> this is a center </h1> 类选择器是以 . 点开头定义的, 同样可以组合使用, 例如 .center p { color : red ; }其意义就是class是center的元素内的所有的段落 p 都和别的段落 p 不一样 .

css属性选择器: 对带有指定属性的 HTML 元素设置式样, [title] { color : blue ;} 这样的话, 对于所有带 title 属性的 html 元素都会设置相应样式 , 还可以设置 : [title = W3C] { color : blue ; } 这样就是不是所有的带title属性的html元素都变更, 而只是 title = W3C 的那个些 html 元素式样会相应变更 . 再例如 input [type = "text"] 组合使用... 另外, 这种属性选择器例如 input[type = "text"] , 其中input与[type="text"]之间不能有空格, 因为它们在HTML中表示一个整体.

css伪类 : CSS 伪类用于向某些选择器添加特殊的效果。

1 a:link {color: #FF0000}    /* 未访问的链接 */

2 a:visited {color: #00FF00}    /* 已访问的链接 */

3 a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */

4 a:active {color: #0000FF}    /* 选定的链接 */

伪类可以与 CSS 类配合使用：

a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>
一般伪类只能作用于 <a> 这个标签使用。

如何插入式样表

外部式样表: 当式样需要应用于多个页面时, 这种办法很好 , 使用 <link>标签, 来链接到式样表, <link>标签应该在文档头部 : <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /></head> ( 属性值与其单位之间不要有空格 , 例如 20px )

内部式样表: 当单个文档需要特殊的样式时, 可以使用 <style>标签在文档头部定义内联式样表, 例如 : <head><style type= "text/css" > hr { color : blue ;} </style></head>, 慎用内联式样表.

多重式样 : 如果某些属性在不同的式样表中被同样的选择器定义, 那么属性值将从更具体的样式表中被继承过来. 其实就是重叠的功能, 例如 : 外部式样表 : h3 { color : blue ; text-align : left ; font-size : 8pt ;} 而内部式样表针对 h3的选择器 : h3{ text-aglin:right ; font-size:20pt;} 所以最后得到的结果为 { color : blue ; text-again:right ; font-size : 20pt ;} 即外部式样的内容会先使用, 然后再用内部式样表的进行覆盖, 相同属性覆盖掉了, 外部多余属性保留 .

颜色不同表示法 :

1) red -- 英文单词

2) #ff0000 -- 16进制

3) rgb(255,0,0) --3元色

4) rgb(100%, 0%, 0%) --百分比

CSS 例子

body {				/* 元素 */

	color:blue;

}

h1,h2,h3,h4,h5,h6 {

	color: blue;

	font-size: 20px;

}

p {

	color: green;

	font-size: 15px;

	font-family: "sans serif";

	text-align: center;

	background-color: gray; 	/*背景色*/

	padding: 10px;			/*向外延伸 , 宽了*/

}

#myid p {			/* id + 元素 */

	color: red;

}

.center {			/* class */

	text-align: center;

}

h1.center {			/*表示h1这个元素的class属性*/

	color: red;    /*按照优先级,所以没有变化*/

}

[dir] {				/* 属性*/

	color: yellow;

}

CSS 框模型概述

CSS 概念 & 作用

块级元素( 例如 div , p )

CSS 概念 & 作用

浮动和定位( 布局 )

CSS 概念 & 作用

实施

首先定义基本的CSS，例如统一的小标题，html标签，body标签，p标签，等等，还有比如统一的鼠标内容 a:hover，a:active 等等

然后定义 div 区域，和各个区域的细节属性

收尾，查看需要调整的情况。

CSS 概念 & 作用的更多相关文章

HTML以及CSS的作用和理念
首先,在学习之前,这些是必要知道的东西.什么是HTML,什么是CSS 它们有什么用?又能做什么? 了解HTML和CSS的用途,能更有利我们快速,高效的学习它们. 那么,关于这两者,我就用我通俗的语言像 ...
css 框架——base&period;css，作用是重设浏览器默认样式和提供通用原子类。自己留存
今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能 ...
正确认识 DIV+CSS 概念
今天看到神采飞扬发表于前端观察的<DIV+CSS 请不要再忽悠人了>,讲的挺有深意的,尤其对于新手如何正确认识div,学习web标准,使用web标准建站应该有很大帮助.转载过来,共同分享. ...
CSS概念 - 可视化格式模型（一）盒模型与外边距叠加
可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型可视化格式模型要掌握的3个最重要的CSS概念是浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...
CSS概念 - 可视化格式模型（二）定位概述（普通流、绝对定位）
2.定位概念上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本 ...
CSS概念，引入，选择器
概念层叠样式表,定义如何显示HTML元素. 使用方式行内样式不推荐使用此方式结构和样式的杂糅会影响后期的维护 <p style="color: red"> ...
CSS概念【记录】
1.CSS语法 2.@规则 3.注释 4.层叠 5.优先级 6.继承 7.值 8.块格式化上下文 9.盒模型 10.层叠上下文 11.可替换元素 12.外边距合并 13.包含块 14.视觉格式化模型 ...
css&period;map作用
看一段sass代码: 嵌套书写的结构在sass中经常会被用到. 编译之后的样式是这样的: 在开发工具上我们看到的是编译后的文件,而非编译前的源文件. 这个时候就产生一个问题了.在生产环境中,我希望看到 ...
Java 之 Serializable 序列化和反序列化的概念,作用的通俗易懂的解释
遇到这个 Java Serializable 序列化这个接口,我们可能会有如下的问题a,什么叫序列化和反序列化b,作用.为啥要实现这个 Serializable 接口,也就是为啥要序列化c,seria ...

随机推荐

mapreduce (四) MapReduce实现Grep+sort
1.txt dong xi cheng xi dong cheng wo ai beijing tian an men qiche dong dong dong 2.txt dong xi cheng ...
php汉字截取
/** * 截取HTML,并自动补全闭合 * @param $html * @param $length * @param $end */ function subHtml($html,$length ...
用Qemu搭建aarch32学习环境
作者信息作者: 彭东林邮箱: pengdonglin137@163.com QQ: 405728433 软件平台主机: Ubuntu14.04 64位版本模拟器:Qemu-2.8.0 Linu ...
geotrellis使用（二十九）迁移geotrellis至1&period;1&period;1版
目录前言升级过程总结一.前言由于忙着安装OpenStack等等各种事情,有半年的时间没有再亲密的接触geotrellis,甚至有半年的时间没能畅快的写代码.近来OpenStac ...
【Tars】腾讯微服务框架Tars介绍
目录 1.介绍2.设计思路3.整体架构4.平台特性1. 介绍 Tars是[基于名字服务][使用Tars协议]的高性能[RPC]开发框架,同时配套一体化的[服务治理平台],帮助个人或者企业快速的以微服务 ...
BZOJ&period;4738&period;[清华集训2016]汽水(点分治分数规划)
BZOJ UOJ 记$val_i$是每条边的边权,$s$是边权和,$t$是经过边数,$k$是给定的$k$. 在点分治的时候二分答案$x$,设$|\frac st-k|=x$ ...
bat把npm换成淘宝源
@echo off echo 开始.. npm config set registry http://registry.npm.taobao.org/ && npm install 注 ...
List（JDK1&period;7）（3）
Vector 实现了一个存储对象的增长数组.如同一个数组,它可以使用一个整型下标来访问元素.但是,vector的大小是可以根据需要增长或收缩的. 每个vector通过维护capacity和capaci ...
点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计
效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据代码: <%@ Page Language="C#" AutoEventWireup=&qu ...
React学习笔记一
我是通过script src的方式引入的react的相关文件,本次学习顺序按照<React快速上手开发>一书的顺序学习的, 本篇博客笔记地址:http://note.youdao.com/ ...