HTML_04_css_的引入方式_基本选择器

css要样式 cascading style sheet 层叠样式

css的目的

给html 加上各种各样样式 便于维护与更新

css语法

选择器{属性：属性值；属性名：属性值；}

说明

属性 不要双引号

单位 要px

引入css样式

1，行内样式表

<标签 style =“属性名:属性值”>内容</标签>

只能给当前的对应的标签

2,内嵌式

<style type="text/css">

选择器{属性名：属性值；}

</style>

3.外部样式表

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

">

可以引入多个样式表

4,导入样式表：

管理css

格式： @import url（xx.css）另一个css样式

必须放到css样式的最上端

选择器的分类

标签选择器

格式：标签{ 属性名：属性值；}

会把样式套用到所有的对应的标签

类选择器

给一类html标签加样式

用 . 表示

.myclass{

属性名：属性值；

font-weight：bold；//文本加错；

}

<标签 class="myclass"></标签>

id选择器

是给特定的选择器

只能引用一次主要给javascript用的

#myid{

属性名：属性值；

font-size：12px；//字体大小

line-height：24px；//行高129%；百分比；

text-indent：2em;//首行缩进两个汉字

font-weight：bold；//文本加错；normal；

}

<标签 class="myid"></标签>

通用选择器

（*所有）给所有的标签加样式

并不是所有的浏览器都支持 ie6

语法：

*{

属性名：属性值；

}

复合选择器

多元素选择器

语法：

选择器，选择器，{ 属性名：属性值；

text-decoration：underline；//下划线

}

后代元素选择器

语法：

选择器1 选择器2 选择器3{

}

子元素选择器

格式：

选择器>选择器{

}

ul>li{

}

伪类：<a>

a:link{//默认

color:black;

text-decoration:none;

}

a:visited{//访问后

color:red;

text-decoration:none;

}

a:hover{//鼠标经过

color:red;

text-decoration:none;

}

a:active{//鼠标点击瞬间

color:red;

text-decoration:none;

font-size:18px;

}

文本属性

font-size

font-weight：bold//normal

font-style：italic斜了//normal

font-family：楷书；

text-decoration：underline；overline；line-through;none;

text-indent:2em;缩进汉字

color

letter-spacing：字母之间的距离；px

word-spacing：单词与单词之间的距离；

text-align：left center right；