CSS入门之什么是css
在互联网时代,我们经常会听到css,有时候还会见到css文件,那css文件是干什么的呢,又有什么作用呢,接下来我们就了解css。
中文翻译为样式表!它的作用简略的说:即是能够使你在同一页面里运用不同的超连接样式。更奇特的是,用CSS,只是改动一个文件就能够改动数百个网页的外观......个性化的表现而不丢失访问者,一起关于网站优化有着非常好的作用....一切这些都由于网页样式表的强大和灵敏特性。
1. CSS的语法:
CSS的界说是由三个部分构成:
选择符(selector),特点(properties)和特点的取值(value)。
语法: selector {property: value} (选择符 {特点:值})
阐明:·选择符是可所以多种形式,一般是你要界说样式的HTML符号,例如BODY、P、TABLE……,你能够经过此办法界说它的特点和值,特点和值要用冒号离隔:
比如:body {color: black},此例的作用是使页面中的文字为黑色。
·若是特点的值是多个单词组成,必须在值上加引号,比如字体的称号经常是几个单词的组合:
比如:p {font-family: "sans serif"} (界说阶段字体为sans serif)
· 若是需要对一个选择符指定多个特点时,咱们运用分号将一切的特点和值分隔:
比如:p {text-align: center; color: red} (阶段居中摆放;而且阶段中的文字为赤色)
2. 选择符组
你能够把相同特点和值的选择符组合起来书写,用逗号将选择符分隔,这样能够削减样式重复界说::h1, h2, h3, h4, h5, h6 { color: green } (这个组里包括一切的标题元素,每个标题元素的文字都为绿色)
p, table{ font-size: 9pt } (阶段和表格里的文字尺寸为9号字)
作用完全等效于:
p { font-size: 9pt }
table { font-size: 9pt }
3. 类选择符
用类选择符你能够把相同的元素分类界说不同的样式,界说类选择符时,在自定类的称号前面加一个点号。假如你想要两个不同的阶段,一个阶段向右对齐,一个阶段居中,你能够先界说两个类:
p.right {text-align: right}
p.center {text-align: center}
然后用不在不同的阶段里,只要在HTML符号里加入你界说的class参数:
这个阶段向右对齐的,这个阶段是居中摆放的,类选择符还有一种用法,在选择符中省略HTML符号名,这样能够把几个不同的元素界说成相同的样式:
.center {text-align: center} (界说.center的类选择符为文字居中摆放)
这样的类能够被使用到任何元素上。下面咱们使h1元素(标题1)和p元素(阶段)都归为“center”类,这使两个元素的样式都跟从“.center”这个类选择符:
这个标题是居中摆放的
这个阶段也是居中摆放的
注意:这种省略HTML符号的类选择符是咱们经后最常用的CSS办法,运用这种办法,咱们能够很方便的在恣意元素上套用预先界说好的类样式。
4. ID选择符
在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素界说独自的样式。
ID选择符的使用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:
这个阶段向右对齐
界说ID选择符要在ID称号前加上一个“#”号。和类选择符相同,界说ID选择符的特点也有两种办法。下面这个比如,ID特点将匹配一切id="intro"的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
} (字体尺寸为默许尺寸的110%;粗体;蓝色;布景色彩通明)
下面这个比如,ID特点只匹配id="intro"的阶段元素:
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意:ID选择符局限性很大,只能独自界说某个元素的样式,一般只在特殊情况下运用。
5. 包括选择符
能够独自对某种元素包括联系界说的样式表,元素1里包括元素2,这种方式只对在元素1里的元素2界说,对独自的元素1或元素2无界说,例如:
table a
{
font-size: 12px
}
在表格内的连接改动了样式,文字大小为12象素,而表格外的连接的文字仍为默许大小。
6. 样式表的层叠性
层叠性即是承继性,样式表的承继规则是外部的元素样式会保存下来承继给这个元素所包括的其他元素。事实上,一切在元素中嵌套的元素都会承继外层元素指定的特点值,有时会把很多层嵌套的样式叠加在一起,除非别的更改。例如在DIV符号中嵌套P符号:
div { color: red; font-size:9pt}
……
这个阶段的文字为赤色9号字
(P元素里的内容会承继DIV界说的特点)
注意:有些情况下内部选择符不承继周围选择符的值,但理论上这些都是特殊的。例如,上鸿沟特点值是不会承继的,直觉上,一个阶段不会同文档BODY一样的上鸿沟值。
别的,当样式表承继遇到抵触时,总是以最终界说的样式为准。若是上例中界说了P的色彩:
div { color: red; font-size:9pt}
p {color: blue}
……
这个阶段的文字为蓝色9号字
咱们能够看到阶段里的文字大小为9号字是承继div特点的,而color特点则按照最终界说的。
不同的选择符界说相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML符号选择符,由于ID选择符是最终加上元素上的,所以优先级最高,其次是类选择符。若是想逾越这三者之间的联系,能够用!important晋升样式表的优先权,例如:
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
咱们一起对页面中的一个阶段加上这三种样式,它最终会按照被!important声明的HTML符号选择符样式为赤色文字。若是去掉!important,则按照优先权最高的ID选择符为黄色文字。
7. 注释:/* ... */
你能够在CSS中刺进注释来阐明你代码的意思,注释有利于你或他人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以"/*" 最初,以"*/" 结尾,如下:
/* 界说阶段样式表 */
p
{
text-align: center; /* 文本居中摆放 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}
我们知道css是什么了,那CSS+DIV又是什么呢,CSS+DIV是什么意思?
CSS+DIV是网站标准(或称web标准)中常用的术语之一,为了说明与HTML网页设计言语中的表格(table)定位方式的区别,由于在XHTML网站设计标准中,不再运用表格定位技术,而是选用css+div的方式实现各种定位。
CSS+DIV 是根据XHTML网站设计言语的国际WEB标准中的典型应用,CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件样式的计算机言语。DIV元素是用来为HTML文档内大块(block-level)的内容提供布局和背景的元素。
DIV的起始标签和完毕标签之间的一切内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是经过运用样式表格式化这个块来进行控制。
CSS+DIV通常是为了说明与HTML网页设计言语中的表格(table)定位方式的区别,由于XHTML网站设计标准中,不再运用表格定位技术,而是选用css+div的方式实现各种定位。也有一些网站开发设计人员用CSS+DIV表示网站标准。