css的引入方式
在HTML中引入css有三种方式:
1.行内样式
<div> <p style="color: green">我是一个段落</p> </div>
2.内接样式
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style>
3.外接样式
1.连接式
<link rel="stylesheet" href="./index.css">
2.导入式
<style type="text/css"> @import url('./index.css'); </style>
CSS:层叠样式表,CSS就是给HTML的标签页中添加各种样式,定义网页的显示效果。
HTML的缺陷
1、不能适应多种设备
2、要求浏览器必须智能化足够庞大
3、数据和显示没有分开
4、功能不够强大
CSS的优点:
1、使数据和显示分开
2、降低网络流量
3、使整个网站视觉效一致
4、使网站的开发效率变高了(耦合性降低)
CSS的选择器
CSS的选择器包括
1、标签选择器
2、id选择器
3、类选择器
标签选择器:可以选中标签元素,比如div p ul li a.....等等,不管标签隐藏的多深,都能选中,选中的是所有的,而不是某一个,所以说“共性”而不说“特性”。
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
id选择器:#id 这样可以选中一个Id,,在同一个页面中,id不能重复,任何标签都可以设置id。
id命名规范,字母数字下划线,大小写严格区分。
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
类选择器:类就是class,class与id非常相似,任何的标签都可以加类,但是类是可以重复的,属于类的概念。
同一个标签可以携带多个类名,用空格隔开。
.lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; } <!-- 公共类 共有的属性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div>