css

1、html文档中怎么加入css

(1).外部样式表

<link rel=”stylesheet“ type="text/css" herf="mystyles.css"/>

注意:虽然外部样式表可以使用任何有效的文件名,但是推荐使用.css作为外部样式表文件的扩展名,以方便识别文件内容。

(2).内嵌式样式表

<style type="text/css">

.....样式定义...

</style>

嵌入式样式表的主要优点是样式规则和标记元素在一个页面里,可以快速将两者拧在一起,方便测试。

(3).内链样式表

<h1 style="color"; red;"> 红色标题列</h1>

内联样式表仅某一部分网页元素,其作用范围仅限于应用它的网页元素。

2、样式规则语法

一个样式规则由一个选择器后一个声明块组成。

body(选择器){(声明)color(属性):black(值)}

(1).选择器

标签选择器:直接用标签名。

类选择器:在标签上必须有Class属性,Class属性值前面必须加.

ID选择器:在标签上必须有ID属性,ID属性值前面必须加#

后代选择器:两种或多种选择器写在一起并用空格隔开第一个选择器的所有后代选择器都会被作用的样式(div.class)

复合选择器:

交集选择器:两种或以上选择器紧挨着一起(div.class)(类似于且的关系)

并集选择器:两种或以上选择器写在一起并用”,“隔开,所有的标签都能被作用。

*通配符选择器:用于选择所有的元素。

伪类选择器:

a:link 是用已访问过的链接的选择器。

a:visited 是用鼠标光标放在其上的链接的选择器。

a:hover 是用在获得焦点(比如:被点击)的链接上的选择器。

伪元素选择器:

p:first-line 用于一个元素的第一行的选择器

p:first-letter 是用于一个元素的第一个字母的选择器

3、设置元素内容的字体

(1).设置字体倾斜程度

font-style 可选属性值:normal、italic、oblique

(2).设置文本首行缩进

text-indent 

p(text-indent:3em)

(3).设置文本对齐方式

text-align 可选属性值:left、right、ceter

(4).设置文本修饰的方式

text-decoration 可选属性值:none、underline、overline、 line-throuth、blink(闪烁)

(5).设置问题阴影特效

text-shadow  可选属性值:none 

p{text-shadow:black;}

(6).设置行高

line-height 可选属性值: 数字(字体大小的倍数)、长度、百分比、normal

(7).设置字间距

letter-spancing 可选属性值:normal、长度、auto

(8).设置词间距

word-spacing 可选属性值:normol length

(9).text-transform 可选属性值:capitalize(把元素内容的每一句句首字母变成大写)

                 uppercase(把元素内容中所有字母 变成大写)

                lowercase(把元素内容中所有的字母变成小写)

(10).设置空白显示形式

white-space  可选属性:normal、 pre、nowrap

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。