div+css小案例
demo.html
<html> <head> <title>这是个css体验例子</title> <!--引入CSS--> <link rel = "stylesheet" type = "text/css" href = "my.css"/> </head> <div class = "style"> <img src = "2.png"> </div> </html>
my.css
.style{
/*宽度*/
width:400px;/*一定要有分号*/
height:300px;
background-color: silver;
border:1px solid red;
margin-left:400px;
margin-top:250px;
padding-top:20px;
padding-left:40px;
}
为了让栏目一到栏目五格式统一，只需要修改class对应的名字。
demo2.html
<html> <!--css部分可以单写一个文件，然后引用，也可以直接嵌入到html文件中--> <link rel = "stylesheet" type = "text/css" href = "demo2.css"/> <body> <!--通常用于存放小块内容--> <span class = "s1">栏目一</span> <span class = "s1">栏目二</span> <span class = "s1">栏目三</span> <span class = "s1">栏目四</span> <span class = "s1">栏目五</span> </body> </html>
demo2.css
/*s1 类选择器*/
.s1{
color:blue;
font-size:30px;
font-style:italic;
text-decoration:underline;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
.s5{
color:#F89582;
}
如何在html中直接嵌入css，图片使用滤镜效果。
<html>
<head>
<!--如何把css直接嵌入到html文件内-->
<style type = "text/css">
a:link img{
filter:gray;
}
a:hover img{
filter:"";
}
</style>
</head>
<body>
<a href = "3"><img src = "跑车.jpg" width = "200px"/></a>
<a href = "3"><img src = "2.png"/></a>
<a href = "3"><img src = "3.png"/></a>
</body>
</html>
类选择器格式：
.类选择器名{
属性名：属性值；
……
}
id选择器
#id{
属性名：属性值；
……
}
html选择器
html元素{
属性名：属性值；
……
}
通配符选择器（用星号表示），作用于所有的html元素，但是优先级别最低
*{
属性名：属性值;
……
}
四个选择器优先级别：
id选择器 > class选择器 > html选择器 > 通配符选择器
select.css
.s1{
background-color:pink;
font-weight:bold;
font-size:30px;
color:black;
}
/*id*/
#id1{
background-color:silver;
font-size:40px;
color:black;
}
/*html选择器*/
body{
color:orange;
}
<html> <link rel = "stylesheet" type = "text/css" href = "select.css"> <body> 北京您好。 <span class = "s1">新闻一</span> <span class = "s1">新闻二</span> <span class = "s1">新闻三</span> <span class = "s1">新闻四</span><br/><br/> <span id = "id1">这是一则非常重要的新闻</span> </body> </html>
html选择器的优先级低于类选择器和id选择器
假如对于两个不同段落需要不同的格式，但是都用同样的元素<p></p>
在CSS里面用p.类名 来区分，在html里面用class = “类名” 来引用格式
p.cls1{
color:blue;
font-size:30px;
}
p.cls2{
color:red;
font-size:20px;
}
<p class = "cls1">hellow world</p> <p class = "cls2">hello world</p>
父子选择器：
1 可以有多级（实际中最多不超过三级）
2 父子选择器有严格的层级关系
css
/*父子选择器*/
#id1 span{
color:red;
font-style:italic;
}
#id1 span span{
color:green;
}
#id1 span span a{
color:blue;
}
html
<span id = "id1">这是一则<span>非常<span>重<a href = "http://www.baidu.com">链接到百度</a></span>要</span>的新闻</span><br/>