版权声明：版权归作者所有，转发请标明 https://blog.csdn.net/weixin_40087851/article/details/83514389
使用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;
}
