关闭

学习笔记——CSS

标签: cssstylesheetclass脚本htmljavascript
540人阅读 评论(0) 收藏 举报
分类:

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。

   
1
0
猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:75351次
    • 积分:1261
    • 等级:
    • 排名:千里之外
    • 原创:54篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档