JS学习笔记-CSS篇（一）

来源：互联网发布：淘宝纳米碳溶胶编辑：程序博客网时间：2024/06/06 11:48

中文识别语句：<meta charset="utf-8">有中文显示的html都需要有这句话。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

常用的Html元素有：

<title></title>（标题）

<p></p>（段落）

<body></body>(主体部分)

<br/> 就是没有关闭标签的空元素（<br/> 标签定义换行）。

<a href="default.htm”></a>(链接元素)

当CSS乱入时要用到<style></style>

现在正式开始CSS的学习

1.id 和 class 选择器

id选择器使用标准：

<style>

#para1//定义一个名为para1的id类型

{

text-align:center;

color:red;

}

</style>

<p id="para1">Hello World!</p>

class选择器使用标准

（1）

<style>

.center //定义一个名为center的class

{

text-align:center;

}

</style>

（2）

<style>

p.center //定义一个名为center的专属于p元素的class

{

text-align:center;

}

</style>

<p class="center">This paragraph will be center-aligned.</p>

2.CSS的样式表插入

插入样式表的方法有三种:

（1）外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css”>//mystyle.css是外部样式
</head>
//先定义一个mystyle.css样式表存储，使用时如上方法调用。
（2）内部样式表
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
//内部插入<style></style>在里面进行CSS样式编辑,可以定义多种元素样式。

（3）内联样式
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
//在单独元素里面进行样式设置

（4）多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

3.CSS的背景

CSS 属性定义背景效果:

background-color //背景颜色
background-image //背景图片
background-repeat //背景样式（水平或垂直平铺、或不平铺）
background-attachment//背景附着：定义背景图片随滚动轴的移动方式
background-position//背景图片位置

（1）背景颜色

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

定义方式：background-color:#b0c4de;

background-color:rgb(255,0,0);

background-color:red;

（2）背景图片定义：

background-image:url('paper.gif');

（3）背景样式：

background-image:url('gradient2.png');

background-repeat:repeat-x; //一般使用background-repeat:repeat-x;使图片水平平铺；no-repeat不平铺

（4）背景附着

取值: scroll | fixed | inherit

scroll: 随着页面的滚动轴背景图片将移动

fixed: 随着页面的滚动轴背景图片不会移动

inherit: 继承

初始值: scroll

继承性: 否

适用于: 所有元素

background:背景.attachment:附着.

（5）背景位置

background-position:right top;//表示图片在右上部分

总结：

使用时可以进行简写：background:#ffffff url('img_tree.png') no-repeat right top;表示背景颜色是白色、背景图片为’img_tree.png’；不平铺；图片位置在右上。。。。

4.CSS的文本格式

属性描述color设置文本颜色direction设置文本方向。letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-shadow设置文本阴影text-transform控制元素中的字母unicode-bidi设置或返回文本是否被重写 vertical-align设置元素的垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距

（1）color：

定义方式：与背景颜色使用一致。

（2）direction：文本方向

ltr默认。文本方向从左到右。rtl文本方向从右到左。inherit规定应该从父元素继承 direction 属性的值。

（3）letter-spacing：文本字符间距

定义方式：letter-spacing:2px;

normal默认。规定字符间没有额外的空间。length定义字符间的固定空间（允许使用负值）。inherit规定应该从父元素继承 letter-spacing 属性的值。

（4）line-height：

定义方式：line-height:200%;（%）

line-height: 10px；（length）

line-height: 2；（数字）

normal默认。设置合理的行间距。number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length设置固定的行间距。%基于当前字体尺寸的百分比行间距。inherit规定应该从父元素继承 line-height 属性的值。

（5）text-align：

定义方式：text-align:right

left把文本排列到左边。默认值：由浏览器决定。right把文本排列到右边。center把文本排列到中间。justify实现两端对齐文本效果。inherit规定应该从父元素继承 text-align 属性的值。

（6）text-decoration

定义方式：text-decoration:overline;线的颜色定义：text-decoration-color: red（

but：几乎所有的主流浏览器都不支持 text-decoration-color 属性。

注意：Firefox 支持另一个可替代该属性的属性，即 -moz-text-decoration-color 属性。

）

none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪烁的文本。inherit规定应该从父元素继承 text-decoration 属性的值。

（7）text-indent

定义方式：xt-indent:50px;

length定义固定的缩进。默认值：0。%定义基于父元素宽度的百分比的缩进。inherit规定应该从父元素继承 text-indent 属性的值。

（8）text-shadow

定义方式：text-shadow:2px 2px 8px #FF0000;（文字阴影模糊、模糊颜色为#FF0000）调节像素效果也不同

h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色。

（9）text-transform

定义方式：text-transform:uppercase;

none默认。定义带有小写字母和大写字母的标准的文本。capitalize文本中的每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase定义无大写字母，仅有小写字母。inherit规定应该从父元素继承 text-transform 属性的值。

（10）unicode-bidi

定义方式：unicode-bidi: normal|embed|bidi-override|intitial|inherit;

normal默认。不使用附加的嵌入层面。
embed创建一个附加的嵌入层面。
bidi-override创建一个附加的嵌入层面。重新排序取决于 direction 属性。
initial设置该属性为它的默认值。请参阅 initial。
inherit

从父元素继承该属性。请参阅 inherit。

（11）vertical-align

定义方式：vertical-align:text-top;

baseline默认。元素放置在父元素的基线上。sub垂直对齐文本的下标。super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部。bottom把元素的顶端与行中最低的元素的顶端对齐。text-bottom把元素的底端与父元素字体的底端对齐。length %使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。inherit规定应该从父元素继承 vertical-align 属性的值。

（12）white-space

定义方式：white-space:nowrap

值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

（13）word-spacing

定义方式：word-spacing:30px

normal默认。定义单词间的标准空间。length定义单词间的固定空间。inherit规定应该从父元素继承 word-spacing 属性的值。

这篇博客是我的JS学习笔记-CSS篇先整理这些，以后会继续更新。

0 0