1, css和html结合方式
之一
html标签都有个style属性,用来写css
《div style = “color : red; border-left: 25px solid blue;”> hello world 《/div>
之二
在head标签中使用style标签专门封装css样式
《head>
《style type=”text/css”>
div,span{
color : red;
font-size : 24px;
}
《/style>
《/head>
之三
如果css样式过多,可以将css代码导入到一个单独.css文件中,在要引用的html文件中引用即可。
《style type=”text/css”>
@import url(“1.css”);
《/style>
之四
用link标签引入css文件
《link rel=”stylesheet” type=”text/css” href=”all.css”/>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2.CSS选择器
选择器:即表示哪些标签将受这些css样式控制
2.1 标签名选择器
《style type=”text/css”>
div{
border: 1px solid blue;
width: 200px;
}
《/style>
2.2 id选择器
《style type = “text/css”>
#id属性:{
css代码
}
《/style>
2.3 class选择器 (类选择器)
《style type=”text/css”>
.class属性{
css代码
}
《/style>
2.4 组合选择器
可以将你想要实现相同style的标签,id,class以逗号分割 表示他们共用同一样式
《style type=”text/css”>
标签,# id, .class{}
2.5关联选择器
父标签 子标签{
css代码
}
.cl1 span{
color: red;
background-color: green;
}
2.6伪元素选择器
:link 表示某个标签未被访问时的样式
:hover 鼠标悬停在上面的样式
:active 鼠标点击瞬间的样式
:visited 被访问后的样式
a : link { font-size : 9px;
text-decoration : underline;
}