CSS
一、html代码中引入CSS代码
<!-- 1css的需求.html -->
<head>
<!-- 方法一： -->
<style type="text/css">
a{
color: #F0F;
text-decoration: none;
}
</style>
<!-- 方法二 -->
<link href="1.css" rel="stylesheet"/>
<!-- 方法三 -->
<style type="text/css">
@import url("1.css");
</style>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>CSS</title>
</head>
<body>
<!-- 方法四 -->
<a style="color:#F0F;text-decoration: none" href="#">新闻标题1 </a>
<a href="#">新闻标题2 </a>
<a href="#">新闻标题3 </a>
<a href="#">新闻标题4 </a>
</body>
其中方法二、三为引入外部CSS文件:
/*1.css*/
a{
color: #F0F;
text-decoration: none;
}
二、选择器
1、标签选择器
上述代码中：a{…}为标签为a的所有内容应用该CSS代码。
2、类选择器
.class{…}。
相当于可以自定义应用CSS代码的范围，在需要应用的内容的标签增加class属性（不能以数字开头）。且类选择器样式优先于标签选择器。
<head>
<style type="text/css">
/*div{
color: #F00;
font-size: 24px;
}*/
.two{
background-color: #0F0;
color: #F00;
font-size: 24px;
}
</style>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>CSS</title>
</head>
<body>
<div>这个是第一个div标签</div>
<div class="two">这个是第二个div标签</div>
<a href="#">新闻标题</a>
</body>
3、id选择器
- 优先级优于类选择器
- id属性值也不能以数字开头
- id属性值在一个html页面只有一个
#one{
background-color: #FF9;
color: #999;
font-weight: 500;
}
<div id="one">这个是第二个div标签</div>
4、交集选择器
对选择器1中的选择器2里面的数据进行样式化。
div span{
background-color: #999;
font-size: 24px;
}
<div id="one" class="test">这个是<span>第一个div标签</span>...</div>
<div id="one" class="two">这个是<span>第二个div标签</span>...</div>
<a href="#">新闻标题</a>
结果如下：
5、并集选择器
span,a{
border-style:solid;
border-color:#F00;
}
6、伪类选择器
对元素处于某种状态下进行的样式。
<!-- 3.伪类选择器.html -->
<head>
<style type="text/css">
a:link{color:#F00} /*没有被点击过*/
a:visited{color:#0F0} /*已经被访问（点击）过*/
a:hover{color: #00f;font-size: 24px} /*鼠标经过*/
a:active{color: #FF0} /*选中：鼠标点击未松开*/
</style>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>无</title>
</head>
<body>
<a href="#">百度</a>
</body>
注意：hover必须置于link和visited之后才有效；
active必须置于hover后才有效。
三、定位
1、相对定位
以当前标签左上角为基准移动。
2、绝对定位
以页面左上角为基准移动。
3、固定定位
以浏览器左上角为基础，移动之后不会根据页面的滚动而发生变化。
三种定位情形代码如下：
<!-- 10.定位.html -->
<head>
<style type="text/css">
div{
border-style: solid;
width: 100px;
height: 100px;
}
.one{
background-color: #F00;
}
.two{
background-color: #0F0;
position: relative;
top: 10px;
left: 10px;
}
.three{
background-color: #00F;
}
#ad{
width: 400px;
height: 200px;
border-style: solid;
font-size: 24px;
color: #F00;
position: absolute;
top: 280px;
left: 380px;
}
#ad2{
position: fixed;
top: 350px;
left: 1000px;
}
</style>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>22</title>
</head>
<body>
<div class="one"> one</div>
<div class="two"> two</div>
<div class="three"> three</div>
<div id="ad">
<marquee scrollamount="30"> 广告</marquee>
</div>
<div id="ad2">
<img src="/Users/jc/Desktop/15110529867346495.jpg" />
</div>
</body>
网页综合结果如下:
