学习笔记——CSS

原创 2012年03月27日 22:11:48

Cascading Style Sheet(CSS,级联样式单)也被称为层叠样式单。

 

作用:主要用于网页风格设计,控制HTML页面中的元素大小、位置、背景、颜色等外观,其提供了一种机制让程序员开发时可以暂不考虑显示和界面,显示问题由美工或程序员在后期解决,也可以用于控制XML文档的显示。

 

样式菜单的优势:

1:表达效果丰富;

2:文档小;

3:便于信息检索;

4:可读性好。

 

W3C给出了两种样式单语言的标准:

1:CSS;

2:XSL(eXtensible Stylesheet Language,可扩展样式单语言):主要用于控制XML文档。

 

定义一个CSS样式需要指定两个部分:

1:Selector:指定对哪些HTML元素起作用;

2:属性:其怎样的作用效果。

 

在HTML中导入CSS的三种方式:

1:导入外部样式文件

2:使用内部样式定义

3:使用内联样式

 

外部导入的方法:

在<head.../>中使用<link.../>元素。

<link type="text/css" rel="stylesheet" href="xxx.css" />


使用内部样式定义:

内部样式只是把外部定义方式的文件内容拿到html文件中,其在<head.../>元素中是<style.../>元素来定义。

格式:

<style type="text/css">
	...
</style>
 
使用内联样式:
几乎所有HTML元素都有一个style属性,其属性值就是N个CSS样式,多个样式用;隔开。
格式:
style="property1:value1;property2:value2..."
 

在XML中导入CSS样式:

 

在XML只能使用外部导入的方法;

格式:

<?xml-stylesheet type="text/css" href="xxx.css" ?>



CSS属性分类:

背景、文本、字体、列表、表格、轮廓、定位、框模型。
 
选择器定义:
一般格式:
Selector,Selector...{property : value; ... }
属性选择器格式:
Tag { ... }:对所有Tag元素起作用;
Tag[ attr ] { ... }:对具有attr属性的Tag元素起作用;
Tag[ attr = value ]  { ... }:对具有attr属性的Tag元素起作用,且attr=value;
Tag[attr ~= value ] { ... }:对具有attr属性的Tag元素起作用,且attr属性值为以空格为分隔符系列值,其中某个值为value。
Tag[attr |= value ] { ... }:对具有attr属性的Tag元素起作用,且attr属性值为以连字符为分隔符系列值,其中第一个值为value。
 
这5种选择器的优先基本一次升高,建议只使用第一种,因为只有第一种在游览器中得到了广泛的支持。
 
div[id] {
...
}
 
ID选择器:
这是一种非常准确的选择器,其作用于具有指定ID的元素。
格式:
#idValue { ... }:指定对id为idValue的元素起作用。
 
class选择器:
其作用于具有指定class的属性的元素。
格式:
Tag.classValue { ... }:指定对class为classValue的Tag元素起作用,若省略Tag,则对所有class为classValue的元素起作用。
 
后代选择器:
作用于指定元素位于指定父元素之内的元素,两元素之间可多层次间隔。
格式:
ancestorTag posterityTag{ ... }:只要posterityTag位于ancestorTag之内即可。
 
子元素选择器:
作用于指定元素必须直接在特定父元素之内。
格式:
fatherTag>SonTag{ .. }
 
相邻兄弟选择器:
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
格式:
Tag1 + Tag2 { ... }:指定Tag2必须与Tag1在相同的父元素内。
 
超级链接选择器:
超级链接默认样式都是蓝色,通过CSS可改变这种效果,下面是关于超级连接的4个选择器:
a:link{ ... }:超级链接未被访问时的CSS样式;
a:visited{ ... }:被访问过的超级链接CSS样式;
a:hover{ .. }:鼠标悬浮在超级链接上时的CSS样式;
a:active{ ... }:超级链接被激活时的CSS样式。
 
在脚本中修改CSS样式:
步骤:
1:获取需要更改CSS样式的目标元素,可使用document对象的getElementById()方法。
2:更改目标元素的CSS样式,其常用方式:
  修改内联CSS属性值:使用如“obj.style.attributeName=value”的JavaScript脚本。
  修改HTML元素的class属性值:使用方法“obj.className=class选择器”的JavaScript脚本。
 
注意事项:脚本中的CSS属性名与页面中的静态CSS属性名并不完全相同,例如:脚本中属性名background-color,脚本中该属性名为backgroudColor。

                    

相关文章推荐

HTML+CSS学习笔记(一)——网页布局

HTML+CSS基础的标签和属性都掌握后,开始进行网站开发时,往往会遇到布局上的困难。所以本学习笔记从布局开始讲起,相关的基础知识可以参见W3C网站:http://www.w3school.com.c...

css学习笔记——绘制属于你的缤纷世界

以下为本人做项目中所遇到的常用css样式
  • aqzwss
  • aqzwss
  • 2014年08月12日 16:30
  • 603

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面。自从因为工作需要转前端之后,自己的主要注意力几乎都放在JavaScript上面了,对CSS和HTML这方面其...

学习笔记_web——CSS

CSS 1、div标签 容器标签 2、语法 选择器{属性 属性值;} 3、选择器 标签选择器 p 类选择器 .class id选择器 #id 多个同时选择(且),各个标签用,...

canvas学习笔记(一)——关于css设置canvas画布大小的问题

canvas的绘制会是画布大小为准的。canvas的默认画布大小为300×150。通常,我们可能想要改变画布的大小,以下是大家最容易想到的方法://方法一:内联样式 //方法二:内部样式 ...
  • csm0912
  • csm0912
  • 2016年10月29日 11:48
  • 4703

基于《Selenium 2自动化测试实战》的学习笔记(6)—— CSS 定位

CSS 定位CSS(Cascading Style Sheets)是一种语言,它被用来描述HTML 和XML 文档的表现。CSS 使用选择器来为页面元素绑定属性。这些选择器可以被selenium 用作...

CSS层叠样式表——学习笔记

1:css是什么?   层叠样式表是一种用来表现HTML文件样式的计算机语言。 2:如何使用?放在那里?(一联,二内,三外)   a:内联样式         b:内部(嵌入式)...

jQuery学习笔记:DOM操作(二)——属性、类、HTML、CSS

属性操作获取属性和设置属性attr() 如果要获取属性,那么给attr()方法传递一个参数,即属性名称。 $("img").attr("src"); 如果要设置属性,那么就传递两个参数,即属性名和对应...

编写高质量代码、学习笔记——CSS篇

编写高质量代码、学习笔记——CSS篇
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习笔记——CSS
举报原因:
原因补充:

(最多只允许输入30个字)