css学习记录3-CSDN博客

本文链接：https://blog.csdn.net/y395423755/article/details/44274657

本代码用于测试各个知识点，没有实际用处。
HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta http-equiv="keywords" content="猫儿" /> 
  <title>猫神</title> 
  <link rel="stylesheet" type="text/css" href="1css.css" /> 
  <!-- 内部css --> 
  <style type="text/css">
/* 类选择器*/
.style1{
    font-size: 20px;
    color: red;
    font-weight: bold;
    font-style: italic;
}

/* HTML选择器 滤镜功能*/
a:link img{
filter:gray;
}
a:hover img{
filter:"" }
</style> 
 </head> 
 <body> 
  <!-- alt+/ 自动显示可用属性 --> 
  <span class="style1">栏目1</span>
  <br /> 
  <span class="style1">栏目2</span>
  <br /> 
  <span class="style1">栏目3</span>
  <br /> 
  <span class="style1">栏目4</span>
  <br /> 
  <span class="style1">栏目5</span>
  <br /> 
  <a href="#"><img src="images/hobbit.jpg" /></a>
  <br /> 你好上海 
  <!-- 选择器优先级 ID>类选择器>HTML选择器>通配符选择器; 一个元素最多只能有一个ID选择器，但是可以有多个类选择器--> 
  <span class="style2" id="special">新闻1</span> 
  <span class="style2">新闻2</span> 
  <span class="style2">新闻3</span> 
  <span class="style2 style4">新闻4</span> 
  <span class="style2">新闻5</span>
  <br /> 
  <span id="style3">这是一则<span>非常重要</span>的新闻<br /> <a href="#">goto 百度</a>  </span><<br />
***********行内元素span a *******************  <br />
<span style="display:block" class="s1">span</span><br />
***********块元素 div p*******************  <br />
<div style="display:inline" class="s2">dic</div>
***********标准流非标准流**********************/<br />
***********盒子模型**********************/<br />
 </body>
</html>

CSS代码如下：

@CHARSET "UTF-8";
/* 类选择器  谁放在后面，谁的优先级就高，我擦，牛逼*/
.style2 {
    font-weight: bold;
    font-size: 20px;
    background-color: green;
}

.style4 {
    text-decoration: underline;
    background-color: pink;
    font-weight: bold;
}

.style2,.style4 {
    font-style: italic;
}
/* ID选择器*/
#style3 {
    font-size: 30px;
    background-color: silver;
}
/*ID父子选择器,父子选择器使用于类选择器和ID选择器*/
#style3 span {
    font-style: italic;
    color: red;
}

#special {
    font-style: italic;
    color: red;
}
/* HTML 选择器*/
/*当一个元素同时被ID选择器和类选择权和HTML选择器修饰，则优先级是 ID>类选择器>HTML选择器 */

/*body{
color:blue;
}*/

a:link {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: red;
}

a:visited {
    color: red;
}
/*通配符选择器*/
* {
/*  margin-top: 10px;
margin-left: px;
*/
    margin: 0px;
    padding: 0px;
}

.s1{
    background-color: pink;
}
.s2{
    background-color: red;
}