Web从小白到大神Day06 2020.10.10

最新推荐文章于 2024-10-09 11:42:00 发布

独饮敌敌畏丶

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量125

点赞数

分类专栏： Web前端学习文章标签： html css

本文链接：https://blog.csdn.net/afdafvdaa/article/details/108995035

版权

Web前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一.CSS的简单介绍

1.什么是CSS？

CSS(Cascading Style Sheet)：层叠样式表语言。

2.CSS的作用？

修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是HTML的化妆品一样。

HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件

3.在HTML页面中嵌套使用CSS的三种方式？

①在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：

<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>

②在head标签中使用style块，这种方式被称为样式块方式。
语法格式：

<head>
	<style type="text/css">
	选择器{
		样式名：样式值;
		样式名: 样式值;
		.....
	}
	选择器{
		样式名：样式值;
		样式名: 样式值;
		.....
	}
	 
	</style>
</head>

③链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）
语法格式：

<link type="text/css" res="stylesheet" href="css文件的路径"/>

这种方式易维护，维护成本较低

二.使用方式一：内联定义方式

<!DOCTYPE html>
<html>
<head>
 <title>HTML中引入css样式的第一种方式：内联定义方式</title>
</head>
<body>
 <div style="width: 300px;height: 300px;background-color: #CCFFFF;
 display:block;border-width: 1px;border-style: solid;border-color: black;"></div>
 <div style="width:300px;height: 300px;background-color: #CCFFFF;
 border:1px solid black"></div>
</body>
</html>

三.使用方式二之id选择器

<!DOCTYPE html>
<html>
<head>
 <title>HTML中引入css样式的第二种方式</title>
 <style type="text/css">
  /*这是CSS的注释*/
  /*id选择器：
   语法格式：
   #id{
    样式名：样式值;
    样式名：样式值;
    样式名：样式值;
    ......
   }
  */
  #username{
   color:red;
   font-size: 30px;
  }
 </style>
</head>
<body>
 <span id="username">我是最帅的</span>
</body>
</html>

三.使用方式二之标签选择器和类选择器

<!DOCTYPE html>
<html>
<head>
 <title>HTML中引入css样式的第二种方式/title>
 <style type="text/css">
  /*这是CSS的注释*/
  /*标签选择器：
   语法格式：
   标签名{
    样式名：样式值;
    样式名：样式值;
    样式名：样式值;
    ......
   }
   标签选择器作用的范围比id选择器广
  */
  span{
   background-color: black;
   border:1px solid red;
   width: 100px;
   height: 100px;
  }
  /*类选择器
    语法格式：
       .类名{
    样式名：样式值;
    样式名：样式值;
    样式名：样式值;
    ......
        } 
     这种可以实现跨标签的改变
  */
  .myClass{
   border: 1px solid red;
  }
 </style>
</head>
<body>
 <span id="username">我是最帅的</span>
 <br>
 <br>
 <br>
 <!--class相同的标签可以认为是同一类标签-->
 <input type="text" class="myClass"/>
 <br>
 <br>
 <br>
 <select class="myClass">
  <option>专科</option>
  <option>本科</option>
 </select>
</body>
</html>

四.使用方式三：外部样式表文件

HTML

<!DOCTYPE html>
<html>
<head>
 <title>HTML中引入css样式的第三种方式</title>
 <!--引入-->
 <link rel="stylesheet" type="text/css" href="css/1.css"/>
</head>
<body>
 <a href="www.baidu.com">百度</a>
 <span id="baiduSpan">我是最帅的</span>
</body>
</html>

CSS

a{
 text-decoration: none;/*把超链接的下划线去掉*/
}
#baiduSpan{
 text-decoration: underline;/*给字体加上下划线*/
 cursor: pointer;/*cursor是鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容性问题
 所以建议使用pointer*/
}

五.列表样式

<!DOCTYPE html>
<html>
<head>
 <title>列表样式</title>
 <style type="text/css">
  ul{
   list-style-type: none;/*把左边的圆圈去掉*/
   /*list-style-type: circle;左边的全变成圆圈*/
   /*list-style-type: square;全变成正方形*/
  }
 </style>
</head>
<body>
 <ul>
  <li>中国
   <ul>
    <li>北京</li>
    <li>天津</li>
    <li>上海</li>
   </ul></li>
  <li>美国</li>
  <li>日本</li>
 </ul>
</body>
</html>

六.绝对定位

<!DOCTYPE html>
<html>
<head>
 <title>绝对定位</title>
 <style type="text/css">
  #div1{
   background-color: red;
   border: 1px solid black;
   width: 300px;
   height: 300px;
   position: absolute;/*绝对定位*/
   left: 100px;
   top: 100px;
  }
 </style>
</head>
<body>
 <div id="div1"></div>
</body>
</html>