1.什么是CSS?
Cascading Style Sheet
层叠样式表语言(不是编程语言,属于样式表语言,没有变量,数据类型,控制语句....等)
CSS其实就是专门用来修饰HTML的,让HTML更好看。
CSS是为HTML服务的,所以HTML还是主体,CSS是依附在HTML上的。
2.在HTML中怎样嵌入CSS样式呢?
三种方式:
第一种方式:内联定义
第二种方式:定义内部样式块对象
第三种方式:链入外部样式表文件
3.内联定义
内联定义语法格式:
<标签 style="样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;"></标签>
任何一个HTML标签都可以指定style属性。
4.定义内部样式块对象
注意:·在head标签中使用style标签,定义样式块对象
·在CSS中,注释用/* */,和Java的注释相同。
语法格式:
<style>
选择器{
样式名 :样式值;
样式名 :样式值;
样式名 :样式值;
样式名 :样式值;
样式名 :样式值;
}
</style>
5.CSS中常见的选择器包括:
标签选择器
id选择器
class选择器
(1).标签选择器:
语法:标签名 {}
案例:
div{
样式名:样式值;
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
以上作用于所有div标签的元素。
(2).id选择器:
语法:#id {}
案例:
#username{
样式名:样式值;
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
只作用于username这个id名字的标签。
(3).class选择器:
语法:.class {}
案例:
.student{
样式名:样式值;
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
以上可以作用于一类标签,只要标签属于class这一类即可。
6.关于选择器的优先级:
标签选择器优先级最低
其次是类选择器
最高优先级是id选择器
7.链入外部样式表文件(最常用)
引入外部独立开发的CSS样式表文件。
在web前端开发中,这种方式是最常用的!
链入语法:<link rel="stylesheet" type="text/css" href="样式表路径"/>
8.隐藏样式
display : none;
9.文本装饰样式
text-decoration : 属性值;
属性值:
overline:表示上划线
line-through:删除线
blink:闪烁
none:没有样式
10.设置鼠标的悬停效果
语法:
<style>
标签名:hover{
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
</style>
注意:
1.hover 是专门用来设置鼠标悬停效果的。
2.hover 在使用的时候,这个冒号两边是不允许有空格的。
11.绝对定位
<style>
position:absolute;
top:100px;
left:100px;
</style>
12.其他属性
鼠标移到文本上面变成"小手"图标.
<style>
cursor:pointer;
</style>
注意:尽量不要使用hand,有浏览器兼容性问题。