div+css入门知识

使用css的必要性

  • css的基础语法:
选择器{
	属性1:属性值;
	属性2:属性值;
	......
}
  • 必要性一:容易变换风格。(对class属性的值改变可以很容易变换不同的风格)
<!--div_css_demo1.html-->
<html>
<head>
</head>
<!--css部分可以单写一个文件,然后引入,也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="div_css_demo1.css">
<body>
<!--span元素通常用于存放小块内容-->
<span class="s1">栏目一<br/></span>
<span class="s2">栏目二<br/></span>
<span class="s3">栏目三<br/></span>
<span class="s4">栏目四<br/></span>
<span class="s5">栏目五<br/></span>
</body>
</html>
/*css的注释*/
/*div_css_demo.css*/
/*类选择器*/
.s1{
	color:green;
	font-size:30px;
	text-decoration:underline;
}
.s2{
	color:red;
	font-size:12px;
}
.s3{
	color:blue;
	font-style:italic;
}
.s4{
	color:green;
	font-weight:bold;
}
.s5{
	color:#9c3131;
}

在这里插入图片描述

  • 使用css可以很容易实现滤镜效果。
<html>
<head>
</head>
<style type="text/css">
	a:link img{
		filter:gray;
		width:100px;
	}
	a:hover img{
		filter:blank;
		width:100px;
	}
</style>
<body>
<a href="#"><img src="1.jpg"/></a>
<a href="#"><img src="1.jpg"/></a>
<a href="#"><img src="1.jpg"/></a>
</body>
</html>
  • css在各个文件(html,jsp,php,asp.net)中使用。

四种选择器

  • css中常用的选择器:

    • 类选择器(class选择器)
    • id选择器
    • html元素选择器
    • 通配符选择器
  • 类选择器基本语法

.类选择器名{
	属性1:属性值;
	属性2:属性值;
	......
}
  • id选择器基本语法
#id选择器名{
   属性1:属性值;
   属性2:属性值;
   ......
}
  • 案例
<!--div_css_demo1.html-->
<html>
<head>
</head>
<!--css部分可以单写一个文件,然后引入,也可以直接嵌入到该html文件-->
<link rel="stylesheet" type="text/css" href="div_css_demo1.css">
<body>
<!--span元素通常用于存放小块内容-->
<span id="id1">这是一个栏目表<br/></span>
</body>
</html>
/*css的注释*/
/*id选择器的使用*/
#id1{
	background-color:gray;
	font-size:30px;
	font-weight:bold;
}

  • html元素选择器基本语法
某个html元素{
   属性1:属性值;
   属性2:属性值;
   ......
}
  • 案例。所有的超链接满足以下条件:

    • 默认样式是黑色,24px,没有下划线。
    • 当鼠标移动到超链接时,30px,自动出现下划线。
    • 点击后,超链接变成红色,没有下划线。
<!--html-->
<html>
<head>
<title>html选择器案例</title>
</head>
<link rel="stylesheet" type="text/css" href="div_css_html.css">
<body>
<a href="http://www.baidu.com">链接到百度</a>
<a href="http://www.taobao.com">链接到淘宝</a>
<a href="http://www.hao123.com">链接到浏览器</a>
</body>
</html>
/*css*/
/*默认*/
a:link{
	color:black;
	font-size:24px;
	text-decoration:none;
}
/*悬停*/
a:hover{
	color:green;
	font-size:30px;
	text-decoration:underline;
}
/*访问过*/
a:visited{
	color:red;
	font-size:24px;
}
  • 通配符选择器基本语法
*{
	属性1:属性值;
	属性2:属性值;
	......
}
  • 案例:页面一般存在页边距,当我们想要消除页边距时,通常使用通配符选择器。
/*通配符选择器*/
*{
	/*margin四个值一般是:上,右,下,左*/
	/*margin:0px 0px 0px 0px;*/
	/*margin一个值(上右下左),两个值(上下,左右),三个值(上,左右,下)*/
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
}
  • 四种选择器的优先级:id选择器 → class选择器 → html选择器 → 通配符选择器。

父子选择器

  • 父子选择器可以有多级(实际开发过程中不要超过三级)。
  • 父子选择器有严格的层级关系。
  • 类选择器和id选择器都可以有父子选择器。
  • 对某行个别文字使用嵌套风格时,使用父子选择器非常方便。
  • 案例
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="div_css_demo1.css">
<body>
<span id="id1">这是<span>一个<span>栏目</span></span>表<br/></span>
</body>
</html>
#id1{
	background-color:gray;
	font-size:30px;
	font-weight:bold;
}

#id1 span{
	background-color:pink;
	font-size:40px;
	font-weight:bold;
}
#id1 span span{
	background-color:blue;
	font-size:50px;
	font-weight:bold;
}

在这里插入图片描述

深入探讨

  • 一个元素可以有同时有id选择器和类选择器(id选择器的优先级高)。
  • 一个元素只能有一个id选择器,但可以有多个类选择器。
  • 当两个类选择器发生冲突了,则以写在css文件中的后面的那个类选择器为准。(另一种说法:当两个类选择器发生冲突了,则以写在html文件中的前面的那个类选择器为准。请大家亲自试验得出结论。
  • id选择器复用性比较低,优先级比较高,唯一使用。如果某个样式只是给某一个html元素使用,则选择id选择器;如果某个样式可能给多个html元素使用,则应当选择class选择器。
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="div_css_demo3.css">
<body>
<span id="id1" class="s1">菜谱<br/></span>
<span class="s1">红烧茄子<br/></span>
<span class="s2" class="s1">椒盐蘑菇<br/></span>
<span class="s1">剁椒鱼头<br/></span>
<span class="s1">麻辣小龙虾<br/></span>
</body>
</html>
#id1{
	font-size:50px;
	color:yellow;
	background-color:green;
}

.s1{
	font-size:30px;
	color:blue;
	background-color:gray;
}

.s2{
	font-size:10px;
	color:red;
	background-color:pink;
}

在这里插入图片描述

  • 我们可以把某个css文件中的选择器的共有部分独立出来。
/*用逗号分离*/
.s1,.s2,.s3,.s4,.s5{
	font-weight:bold;
	text-decoration:underline;
}
  • css文件本身也会被浏览器从服务器下载到本地,才能显示效果。

行内元素和块元素

  • 行内元素只占据本身内容的宽度,不占据整行。

  • 块元素不管本身内容,占据整行,换行显示。

  • 行内元素只能容纳文本和其他行内元素,块元素可以容纳文本,行内元素和块元素(与浏览器类版本和类型有关)。

  • 一些css属性对行内元素不生效,比如margin,left,right,width,height,建议尽可能使用块元素定位(与浏览器类版本和类型有关)。

  • 常见的行内元素有<a> <span> <input type=“XXX”>

  • 常见的块元素有<div> <p>

  • 行内元素和块元素可以转换

    • display:inline 表示使用行内元素方式显示
    • display:block 表示使用块元素方式显示
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="div_css_demo3.css">
<body>
<span id="id1" class="s1">菜谱</span>
<a class="s2" href="#">远程菜谱</a>
<input class="s1" type="text" value="输入框"/>
<div class="s1">红烧茄子</div>
<p class="s1">椒盐蘑菇</p>
</body>
</html>
#id1{
	font-size:50px;
	color:yellow;
	background-color:green;
}

.s1{
	font-size:30px;
	color:blue;
	background-color:gray;
}

.s2{
	font-size:70px;
	color:red;
	background-color:pink;
	display:block;
}

在这里插入图片描述

标准流和非标准流

  • 流:html元素在网页中显示的顺序。
  • 标准流:在html文件中,写在前面的元素在前面显示,写在后面的元素在后面显示。
  • 非标准流:在html文件中,当某个元素脱离标准流,那么它就处于非标准流。

盒子模型

  • 盒子模型
    在这里插入图片描述
  • 盒子模型示意图
    在这里插入图片描述
  • 案例
<!--特别注意-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>盒子案例</title>
</head>
<link rel="stylesheet" type="text/css" href="div_css_box1.css">
<body>
<div class="div1">
<img src="1.jpg"/>
</div>
</body>
</html>
body{
	/*1px:边框的宽度  solid:实线  red:红色*/
	border:1px solid red; 
	width:200px;
	height:200px;
	/*让body自动居中(第一个用于上下,第二个用于左右,auto表示自动居中)*/
	/*特别注意*/
	margin:0 auto;
}

.div1{
	width:100px;
	height:100px;
	border:1px solid blue;
	margin:10px 0px 0px 10px; 
}

.div1 img{
	width:40px;
	height:40px;
	border:1px solid pink;
	margin:10px 0px 0px 10px; 
}

在这里插入图片描述

  • 另一种写法
<!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" />
<title>盒子案例</title>
</head>
<link rel="stylesheet" type="text/css" href="div_css_box1.css">
<body>
<div class="div1">
<ul class="ul1">
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
<li class="li1"><img src="1.jpg"/></li>
</ul>
</div>
</body>
</html>
body{
	/*1px:边框的宽度  solid:实线  red:红色*/
	border:1px solid red; 
	width:400px;
	height:300px;
	/*让body自动居中(第一个用于上下,第二个用于左右,auto表示自动居中)*/
	margin:0 auto;
}

.div1{
	margin:10px 0px 0px 10px;
	border:1px solid blue;
	width:300px;
	height:200px;
}

.ul1{
	/*background-color:gray;*/ /*可以加背景色去查看盒子的位置*/
	list-style-type:none;/*去除小点*/
	margin:0px;
	padding:10px 0px 0px 10px;
}

.li1{
	float:left;/*浮动,重要的知识点*/
	width:40px;
	height:40px;
	border:1px solid pink;
	margin-right:10px;
	margin-bottom:10px;
	/*background-color:gray;*/
}

.li1 img{
	width:40px;
	height:40px;
}

  • 案例2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--特别注意:我们常用的<!DOCTYPE>有两种:HTML Transitional DTD和XHTML Transitional DTD-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="div_css_box2.css">
<title>盒子案例</title>
</head>
<body>
<div class="div1">

<div class="div2">
<span><font>优酷牛人</font><a href="#">更多牛人</a></span>
<ul>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
</ul>
</div>

<div class="div2">
<span><font>明星空间</font><a href="#">更多空间</a></span>
<ul>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
</ul>
</div>

<div class="div2">
<span><font>优酷工艺</font><a href="#">更多工艺官网</a></span>
<ul>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
<li><img src="1.jpg"/><a href="#">描述</a></li>
</ul>
</div>

</div>
</body>
</html>
.div1{
	width:460px;
	height:610px;
	margin:10px 0px 0px 10px;
	border:1px solid red;
}

.div2{
	width:420px;
	height:170px;
	margin:10px 10px 10px 10px;
	/*background-color:gray;*/
	padding:10px 10px 10px 10px;
}

span{
	/*background-color:pink;*/
	display:block;  /*以块元素显示*/
}

span font{
	font-weight:bold;
	font-size:20px;
}

span a{
	color:blue;
	float:right;
}

ul{
	padding:0px;
}

li{
	list-style-type:none;
	float:left;
	margin-right:20px;
	margin-left:20px;
	text-align:center;  /*使文字居中*/
}

li img{
	width:100px;
	height:100px;
	padding-bottom:10px;
}

li a{
	display:block;
}

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页