CSS详解

一、初识CSS

(一)什么是CSS

CSS概念:Cascading Style Sheet 层叠样式表

  • 表现HTML文件样式的语言
  • 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

(二)CSS的发展史

  • 1996年 CSS1.0诞生
  • 1998年 CSS2.0
    融入了DIV+CSS的概念,提出了HTML结构与CSS样式表的分离。
  • 2004年 CSS2.1
    融入了更多高级的用法,如浮动,定位等。
  • 2010年 CSS3.0
    它包括了CSS2.1下的所有功能,是目前最新的版本,它向着模块化的趋势发展, 又加了很多使用的新技术,如字体、多背景、圆角、阴影、动画等高级属性, 但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少,对市场企业进行调研发现使用CSS3的频率大幅增加,学习CSS3已经成为一种趋势。

(三)CSS的优势

  • 内容与表现分离
  • 网页的表现统一 , 容易修改
  • 丰富的样式 , 使得页面布局更加灵活
  • 减少网页的代码量 , 增加网页的浏览速度 , 节省网络带宽
  • 运用独立于页面的CSS , 有利于网页被搜索引擎收录

(四)CSS的基础语法

选择器{
    属性1:属性值;//声明1
    属性2:属性值;//声明2
    ...
}

注意:CSS的最后一条声明后的";“可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束都要写上”;"。

(五)Style标签

Style 标签在HTML文档中的位置 , 在<head></head> 之间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
 /*<style>标签用于为HTML文档定义样式信息。
 在style中,您可以规定在浏览器中如何呈现HTML文档。*/
        h1{
            color: blue;
        }
        h2{
            color: brown;
        }
    </style>
</head>
<body>
<h1>我的标题一</h1>
<h2>我的标题二</h2>
</body>
</html>

运行:
在这里插入图片描述

(六)引入CSS的方式

(1)行内样式

使用style属性引入CSS样式

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内样式
style属性引入 ,
行内样式如果要添加多个样式 , 中间使用分号隔开
-->
<h1 style="color: #5e42ff">Hello,css</h1>
<p style="color: #6aff46;font-weight: bold">Hello,css</p>
</body>
</html>

运行:
在这里插入图片描述
问题:这种方式的缺点?
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可言。

(2)内部样式表

CSS代码写在<head><style>标签中

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式表
    需要使用style标签
    格式 :
        选择器 {
              属性 : 属性值
              ...
        }
    -->
    <style>
        a{
            font-size: 50px;
        }

    </style>

</head>
<body>

<a href="">Hello,world!</a>

</body>
</html>

运行:
在这里插入图片描述
如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)

问题:这种方式的缺点。
1.只能在同一页面内复用代码,不能在多个页面中复用 css 代码。
2.维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了。

(3)外部样式表

假设在resources文件夹下有个css目录,在css目录下创建stylesheet样式表文件

1 、链接式

把 css 样式写成一个单独的 css 文件,再通过 link 标签引入即可复用。

css文件:

/*
.css文件
声明选择器的样式
*/
div{
    color: chocolate;
    font-size: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--第三种导入方式:外部样式表-链接式
    需要使用  link标签
    -->
    <link rel="stylesheet" type="text/css" href="../../../resources/css/Style.css">
</head>
<body>

<div>
    Hello,CSS!
</div>

</body>
</html>

运行:
在这里插入图片描述

2、导入式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--第三种导入方式:外部样式表-导入式
    使用@import导入样式表
    -->
    <style>
        @import url("../../../resources/css/Style.css");
    </style>

</head>
<body>

<div>
    Hello,CSS!
</div>

</body>
</html>

链接式与导入式的区别

  • <link/>标签属于XHTML,@import是属于CSS2.1
  • 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
  • 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
  • @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
CSS样式优先级(就近原则)

行内样式 > 内部样式表 > 外部样式表
案例:
Style.css文件:

div{
    color: yellow;
    font-size: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--外部样式表-->
    <link rel="stylesheet" href="../../../resources/css/Style.css">
<!--内部样式表-->
    <style>
        div{
            color: blue;
        }
    </style>

</head>
<body>
<!--行内样式表-->
<div style="color: red">
    Hello,CSS!
</div>

</body>
</html>

运行:
在这里插入图片描述
结论:
从结果我们可以发现根据就近原则,最后显示的颜色样式是用的行内声明的颜色样式,但是多的属性可以互相补充,例如Style.css中的font-size属性是其他两个样式没有的,但是仍能最终显示出来。

(七)CSS基础选择器

(1)标签选择器

HTML标签作为标签选择器的名称

  • <h1><h6><p><img/>等等

格式:

选择器{
    属性1:属性值;//声明1
    属性2:属性值;//声明2
    ...
}

(2)类选择器

格式:

.class{
属性:属性值;
}

<标签名 class = "类名称">标签内容</标签名>

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*   类选择器
        思考: 需要将哪一类统一样式?
          类在标签中定义, 使用class属性
          然后使用类选择器选择到指定的标签元素
          .类名称{
               属性:属性值
          }
        */
        .a{
            font-family: 华文行楷;
        }
        .b{
            font-style: italic;
        }
    </style>

</head>
<body>
<!--自定义标签-->
<fox class="b">你好啊</fox>
<p class="a">初次见面</p>
<a href="" class="a">请多多指教</a>
<div class="a">好好学习,天天向上</div>
<span class="b">加油</span>

</body>
</html>

运行:
在这里插入图片描述

(3)ID选择器

格式:

#id名字{
属性:属性值;
...
}

<标签名 class= "类名称">标签内容</标签名

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id属性全局唯一 , 不能同名*/
        /*id选择器
        需要一个id--> 在标签中定义id
        格式:
        #id名字{
			属性:属性值;
			...
        }
        */
        #bbb{
            color: blue;
        }
        #aaa{
            color: red;
        }
    </style>

</head>
<body>

<p class="a" id="aaa">哈哈</p>
<a href=""  class="a">呵呵</a>
<div  class="a">嘻嘻</div>
<span  class="a" id="bbb">嗯嗯</span>

</body>
</html>

运行:
在这里插入图片描述

(4)组合选择器

组合选择器的格式是:

选择器 1,选择器 2,选择器 n{ 
属性:值; 
} 

组合选择器可以让多个选择器共用同一个 css 样式代码。

需求 1:修改 class=“class01” 的 div 标签 和 id=“id01” 所有的 span 标签,字体颜色为蓝色,字体大小 20 个像素。 边框为 1 像素绿色实线。 示例代码:

 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>class 类型选择器</title> 
	 <style type="text/css"> 
	 	.class01 , #id01{ 
	 		color: blue; 
	 		font-size: 20px; 
	 		border: 1px green solid; 
		 } 
	 </style> 
</head> 

<body> 
	 <div class="class01">div 标签 class01</div> <br /> 
	 <span id="id01">span 标签</span> <br /> 
	 <div  class="class01">div 标签</div> <br /> 
	 <div id="id01">div 标签 id01</div> <br /> 
</body> 
</html>

在这里插入图片描述

(5)小结

  • 标签选择器直接应用于HTML标签
  • 类选择器可在页面中多次使用
  • ID选择器在同一个页面中只能使用一次
基本选择器的优先级
  • ID选择器>类选择器>标签选择器
  • 基本选择器不遵循 “ 就近原则 ”

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    /*标签选择器*/
        h1{
            color: red;
        }
    /*类选择器*/
        .test1{
            color: blue;
        }
    /*ID选择器*/
        #test2{
            color: green;
        }
    </style>

</head>
<body>

<h1 class="test1" id="test2">好好学习,天天向上</h1>

</body>
</html>

运行:
在这里插入图片描述

(八)CSS高级选择器

(1)层次选择器

假设有这样一个层次结构的网页:
在这里插入图片描述

a. 后代选择器

格式:E F{声明;}
功能:获取E元素下所有与F匹配的元素
例如:body p{ background: red; }
在这里插入图片描述

b. 子选择器

格式:E>F{声明;}
功能:只获取E下面的与F匹配的第一层子元素
例如:body>p{ background: pink; }
在这里插入图片描述

c.相邻兄弟选择器

格式:E+F{声明;}
前提 : 定位到一个元素 E
功能:获取指定元素E的相邻兄弟的与F匹配的元素
注意:只找下面的兄弟,上面的不找
例如:.active+p { background: green; }
在这里插入图片描述

d.通用兄弟选择器

格式:E~F{声明;}
前提 : 定位到一个元素 E
功能:获取指定元素E后的所有匹配F的元素
例如:.active~p{ background: yellow; }
在这里插入图片描述
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        p,ul{
            border: 1px solid red; /*边框*/
        }
        /*后代选择器
        需求 : 获取ul下面的所有p标签
        使用空格隔开
        */
        ul p{
            background-color: green;
        }

        /*子选择器
        需求 : 只获得body下面的第一层p元素
        */
        body>p{
            background: purple;
        }
        
        /*相邻兄弟选择器(只向下找)
        前提 : 定位到一个元素 E(class="a")
        需求 : 获取指定元素的相邻兄弟元素
        */
        .a+p{
            background: yellow;
        }

        /*兄弟选择器
        前提 : 定位到一个元素 E(class="b")
        需求 : 获取指定元素的所有(指定元素下面的)兄弟元素
        */
        .b~p{
            background: red;
        }
    </style>
    
</head>
<body>

<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
        <ol>
            <li>
                <p>5.1</p>
            </li>
            <li>
                <p>5.2</p>
            </li>
            <li>
                <p>5.3</p>
            </li>
        </ol>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<ol>
    <li>
        <p>7</p>
        <p class="a">8</p>
        <p>9</p>
        <p class="b">10</p>
        <p>11</p>
        <p>12</p>
    </li>
</ol>

</body>
</html>

运行:
在这里插入图片描述
通过结果我们看到body下的第一层p元素都是紫色,ul下所有p元素都是绿色,标记为a的第8行的p元素相邻兄弟(只向下)为黄色,标记为b的第10行的p元素的所有兄弟(只向下)都为红色。

(2)结构伪类选择器

  • E:first-child 作为父元素的第一个子元素的元素E
  • E:last-child 作为父元素的最后一个子元素的元素E
  • E F:nth-child(n) 选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd
  • E:first-of-type 选择父元素内具有指定类型的第一个E元素
  • E:last-of-type 选择父元素内具有指定类型的最后一个E元素
  • E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

例如:

ul li:first-child{ background: red;} 
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;} 
p:nth-of-type(2){ background: blue;}

在这里插入图片描述
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p,li{
            border: 1px solid red;
        }
        /*
        结构伪类选择器 :
        伪元素和伪选择器是CSS已经定义好的 ,我们拿来就可以用

        格式 :
        选择器:伪元素{

        }

        伪元素 :
            :first-child
            :last-child
            :等等
        */
        ul li:first-child{
            background: yellow;
        }

        ul li:last-child{
            background: red;
        }

        /*
        E:nth-child(n) --> 需要找到E元素的父级元素,寻找父级元素的第n个子元素,
        判断他是不是E元素 , 如果不是,就不会被选择。
        
        这里结果第一个p元素是不会显示绿色的,因为p元素的父级元素为body,
        p前面还有一个h1元素,body的第一个元素不是p元素
        */
        p:first-child{
            background: green;
        }
        /*
        需求:选择body下面的第二个p元素
        这里括号里为什么写3呢?
        因为p元素的父级元素为body,p前面还有一个h1元素
        所以先寻找body的第3个元素才为第二个p元素
        */
        p:nth-child(3){
            background: blue;
        }

        /*
        需求:选择body下面的第三个p元素
        E:nth-of-type(n) -->找到E的父级元素 , 然后在他的父级元素中直接去找第n个E元素
        这种方法括号里数字就不用变
        */
        p:nth-of-type(3){
            background: brown;
        }
    </style>
</head>
<body>

<h1>标题</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

运行:
在这里插入图片描述

(3)属性选择器

  • E[attr] 选择匹配具有属性attr的E元素
  • E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小
    写)
  • E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,并且其属性值是以val开头的任意字符串
  • E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,并且其属性值是以val结尾的任意字符串
  • E[attr*=val] 选择匹配元素E,且E元素定义了属性attr,并且其属性值包含了val,换句话说,字符串val与属性值中的任意位置相匹配

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    /*所有有id属性的a元素背景设为黄色*/
        a[id]{
            background: yellow;
        }
	/*所有有class属性的a元素背景设为红色*/
        a[class]{
            background: red;
        }
	/*所有有id属性的且等于aa的a元素字体大小设为100px*/
        a[id=aa]{
            font-size: 100px;
        }
	/*所有有href属性且以"https"开头的a元素字体设为华文行楷*/
        a[href^="https"]{
            font-family: 华文行楷;
        }
	/*所有有href属性且以".png"结尾的a元素字体大小设为50px*/
        a[href$=".png"]{
            font-size: 50px;
        }
	/*所有有href属性且含有"."的a元素字体风格设为italic*/
        a[href*="."]{
            font-style: italic;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="https://www.baidu.com" id="aa">哈哈</a>
    <a href="" class="b">呵呵</a>
    <a href="/1.png" class="c">哼哼</a>
    <a href="" id="d">嘻嘻</a>
    <a href="" class="e">啦啦</a>
    <a href="" id="f">嗯嗯</a>
</p>

</body>
</html>

运行:
在这里插入图片描述

二、CSS美化网页元素

(一)span和div标签

  • span标签的作用
    • 能让某几个文字或者某个词语凸显出来
    • 行内元素
  • div标签
    • 块级元素

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>

    <style>
        .a{
            font-size: 30px;
            color: red;
            font-weight: bold;
        }
        #b{
            font-size: 24px;
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>

<p>一寸 <span class="a">光阴</span>一寸 <span class="a"></span></p>
<div>寸金<span id="b">难买</span>寸光阴</div>

</body>
</html>

运行:
在这里插入图片描述

(二)字体样式

属性名含义举例
font-family设置字体类型font-family:“隶书”;
font-size设置字体大小font-size:12px;
font-style设置字体风格font-style:italic;
font-weight设置字体的粗细font-weight:bold;
font在一个声明中设置所有字体属性font:italic bold 36px “宋体”;

(三)文本样式

属性含义举例
color设置文本颜色color:#00C;
text-align设置元素水平对齐方式text-align:right;
text-indent设置首行文本的缩进text-indent:20px;
line-height设置文本的行高line-height:25px;
text-decoration设置文本的装饰text-decoration:underline;
vertical-align设置文本对齐vertical-align : middle

(四)文本阴影

在这里插入图片描述
案例:
Style1.css:

#a{
    font-family: 楷体;
}
#b{
    font-style: italic;
}
/* text-indent文本首行缩进 */
.sj{
    text-indent: 2em;
}
/* text-shadow文本阴影 */
h1{
    text-shadow: green -1px 1px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="Style1.css">

</head>
<body>

<!--
px  ->像素
em  ->字符
-->

<h1>CSS(层叠样式表)</h1>

<p>摘自: <span id="a">百度百科</span>

<p class="sj">概念:层叠样式表(英文全称:<span id="b">Cascading Style Sheets</span>)<br/>
    是一种用来表现HTML(标准通用标记语言的一个应用)<br/>
    或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。<br/>
    CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地<br/>
    对网页各元素进行格式化<br/>
</p>

</body>
</html>

运行:
在这里插入图片描述

(五)超链接伪类

伪类名称含义示例
a:link未单击访问时超链接样式a:link{color:#9ef5f9;}
a:visited单击访问后超链接样式a:visited {color:#333;}
a:hover鼠标悬浮其上的超链接样式a:hover{color:#ff7300;}
a:active鼠标单击未释放的超链接样式a:active {color:#999;}

设置伪类的顺序:a:link->a:visited->a:hover->a:active
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:visited{
            color: #ff5f5d;
        }
        /*产生事件的伪类在同一个元素只能绑定一个*/
        a:active{
            color: green;
        }
        /*:hover鼠标悬停样式*/
        a:hover{
            color: yellow;
        }
    </style>
</head>
<body>

<a href="https://www.baidu.com" target="_blank">点击进入...</a>

</body>
</html>

运行:
在这里插入图片描述
鼠标悬停:
在这里插入图片描述

(六)列表样式

  • list-style-type
  • list-style-image
  • list-style-position
  • list-style

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*list-style:none表示列表样式为空,去除小黑点*/
        /*将列表样式设为小方块*/
        ul li{
        list-style-type: square;
        }
    </style>
</head>
<body>

<ul>
    <li>可乐</li>
    <li>雪碧</li>
    <li>康师傅</li>
    <li>芬达</li>
    <li>百岁山</li>
</ul>

</body>
</html>

运行:
在这里插入图片描述

(七)网页背景

  • 背景颜色
    • background-color
  • 背景图片
    • background-image
  • 背景定位
    • background-position属性
  • 背景重复方式
    • background-repeat
  • 简写
    • background
      例如:
background:#C00 url(../image/kuangshen.jpg) 205px 10px no-repeat;
  • 背景尺寸 : background-size

    • auto 默认值,使用背景图片保持原样
    • percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的
    • cover 整个背景图片放大填充了整个元素
    • contain 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应所定义背景的区域

(八)CSS渲染渐变

  • 线性渐变
    • 颜色沿着一条直线过渡 : 从左到右、从右到左、从上到下等
  • 径向渐变
    • 圆形或椭圆形渐变 , 颜色不再沿着一条直线变化, 而是从一个起点朝所有方向混合
  • 浏览器兼容性
属 性 名IEFirefoxChromeOperaSafari
Gradient10+19.0+26.0+12.1+5.1+
  • IE浏览器是Trident内核,加前缀:-ms-
  • Chrome浏览器是Webkit内核,加前缀:-webkit-
  • Safari浏览器是Webkit内核,加前缀:-webkit-
  • Opera浏览器是Blink内核,加前缀:-o-
  • Firefox浏览器是Mozilla内核,加前缀:-moz-

语法:
在这里插入图片描述
兼容Webkit内核的浏览器

-webkit-linear-gradient ( position, color1, color2,…)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            /*  https://webgradients.com/  */
            height: 1000px;
            background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>

</body>
</html>

在这里插入图片描述

三、盒子模型

(一)什么是盒子模型

CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model):

在这里插入图片描述
不同部分的说明:

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

(二)边框

(1)边框颜色

属性说明示例
border-top-color上边框颜色border-top-color:#369;
border-right-color右边框颜色border-right-color:#369;
border-bottom-color下边框颜色border-bottom-color:#fae45b;
border-left-color左边框颜色border-left-color:#efcd56;
border-color四个边框为同一颜色border-color:#eeff34;
boder-color上、下边框颜色:#369 左、右边框颜色:#000border-color:#369 #000;
border-color上边框颜色:#369左、右边框颜色:#000下边框颜色:#f00border-color:#369 #000 #f00;
border-color上、右、下、左边框颜色:#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f;

(2)边框粗细

border-width:边框粗细

  • thin
  • medium
  • thick
  • 像素值

(3)边框样式

border-style:边框样式

  • none:默认无边框
  • dotted:定义一个点线边框
  • dashed:定义一个虚线边框
  • solid:定义实线边框
  • double:定义两个边框。 两个边框的宽度和 border-width 的值相同
  • groove:定义3D沟槽边框。效果取决于边框的颜色值
  • ridge:定义3D脊边框。效果取决于边框的颜色值
  • inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
  • outset:定义一个3D突出边框。 效果取决于边框的颜色值

边框简写

  • 同时设置边框的颜色 , 粗细和样式
    border:1px solid #3a6587;
    border: 1px dashed red;
    等等

(4)外边距

  • margin
    • margin-top设置顶端外边距
    • margin-right设置右端外边距
    • margin-bottom设置底部外边距
    • margin-left设置左端外边距
    • margin

外边距妙用

  • 网页居中对齐

    margin:0px auto;

  • 网页居中对齐的必要元素

    • 块元素
    • 固定宽度

(5)内边距

padding

  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
  • padding

(6)圆角边框

border-radius: 20px 10px 50px 30px;(四个属性值按顺时针排列)
在这里插入图片描述
border-radius:20px;(四个角属性值都为20px)

(7)盒子阴影

在这里插入图片描述

(8)盒子总结演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .a
        {
            border-style:solid;
            border-color:red;
        }
        .b
        {
            border-style:solid;
            border-color:green;
        }
        .c
        {
            border-style:solid;
            border-width:thin;
        }
        .d
        {
            border-style:solid;
            border-width:medium;
        }
        .e
        {
            border-style:solid;
            border-width:thick;
        }
        .none {border-style:none;}
        .dotted {border-style:dotted;}
        .dashed {border-style:dashed;}
        .solid {border-style:solid;}
        .double {border-style:double;}
        .groove {border-style:groove;}
        .ridge {border-style:ridge;}
        .inset {border-style:inset;}
        .outset {border-style:outset;}
        .hidden {border-style:hidden;}
        .f{
            background-color: lightgrey;
            width: 300px;
            border: 35px solid blue;
            padding: 30px;
            margin: 25px;
        }
        #g {
            border-radius: 10px 20px 30px 40px;
            background:yellow;
            padding: 20px;
            width: 200px;
            height: 150px;
        }
        .h{
            width:300px;
            height:100px;
            background-color:orange;
            box-shadow: 10px 10px 5px purple;
        }
    </style>


</head>
<body>
<h2>边框演示</h2>
<p class="a">这是实线红色边框</p>
<p class="b">这是实线绿色边框</p>
<p class="c">细边框</p>
<p class="d">中等宽度边框</p>
<p class="e">粗边框</p>
<p class="none">无边框</p>
<p class="dotted">点线边框</p>
<p class="dashed">虚线边框</p>
<p class="solid">实线边框</p>
<p class="double">双边框</p>
<p class="groove">沟槽边框</p>
<p class="ridge">脊边框</p>
<p class="inset">嵌入边框</p>
<p class="outset">突出边框</p>
<p class="hidden">隐藏边框</p>

<h2>圆角边框演示</h2>
<p id="g"></p>

<h2>盒子模型演示</h2>
<div class="f">这是内间距为30px,外间距为25px和35px的绿蓝色边框的盒子。</div>

<h2>盒子阴影演示</h2>
<div class="h"></div>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

四、浮动

(一)标准文档流

标准文档流的组成

  • 块级元素(block)
    • h1~h6 、p 、 div 、列表
  • 内联元素(inline)
    • span 、 a 、 img 、 strong

内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立

(二)display属性

说明
block块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
inline内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符
inline-block行内块元素,元素既具有内联元素的特性,也具有块元素的特性
none设置元素不会被显示
  • 块级元素与行级元素的转变(block、inline)

  • 控制块元素排到一行 (inline-block)

  • 控制元素的显示和隐藏(none)

(三)块元素排在一行的方法

  • 可以使用什么属性使块元素排在一行?

    • inline-block 属性
    • float属性

(四)浮动(float)

float属性

属性值说明
left元素向左浮动
right元素向右浮动
none默认值。元素不浮动,并会显示在其文本中出现的位置
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        img
        {
            float:right;
        }
    </style>
</head>

<body>
<p>哈哈哈哈哈哈哈啊哈</p>
<p>
    <img src="u=4104926104,4054581253&fm=27&gp=0.jpg" width="95" height="84" />
</p>

</body>
</html>

在这里插入图片描述

(五)边框塌陷

  • 浮动元素脱离标准文档流
  • 清除浮动
    在这里插入图片描述
  • clear属性
说明
left在左侧不允许浮动元素
right在右侧不允许浮动元素
both在左、右两侧不允许浮动元素
none默认值。允许浮动元素出现在两侧

(六)溢出处理

Overflow属性

属性值说明
visible默认值。内容不会被修剪,会呈现在盒子之外
hidden内容会被修剪,并且其余内容是不可见的
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

案例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        .a{
            background-color: green;
            width: 200px;
            height: 200px;
            overflow: visible;
        }
        .b {
            background-color: blue;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .c {
            background-color: yellow;
            width: 200px;
            height: 200px;
            overflow: scroll;
        }
        .d {
            background-color: red;
            width: 200px;
            height: 200px;
            overflow: auto;
        }

    </style>
</head>
<body>
<h1>overflow 属性</h1>

<h2>hidden:</h2>
<div class="b">1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。
    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
    随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。</div>

<h2>scroll:</h2>
<div class="c">1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。
    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
    随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。
 </div>

<h2>auto:</h2>
<div class="d">1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。
    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
    随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。</div>

<h2>visible (默认):</h2>
<div class="a">1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。
    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
    随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。</div>
</body>
</html>

运行:
在这里插入图片描述
在这里插入图片描述

(七)解决父级边框塌陷的方法

  • 浮动元素后面加空div
    • 简单,空div会造成HTML代码冗余
  • 设置父元素的高度
    • 简单,元素固定高会降低扩展性
  • 父级添加overflow属性
    • 简单,下拉列表框的场景不能用
  • 父级添加伪类after
    • 写法比上面稍微复杂一点,但是没有副作用,推荐使用

(八)inline-block和float的区别

  • display:inline-block
    • 可以让元素排在一行,并且支持宽度和高度,代码实现起来方便
    • 位置方向不可控制,会解析空格
    • IE 6、IE 7上不支持
  • float
    • 可以让元素排在一行并且支持宽度和高度,可以决定排列方向
    • float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父 级上添加清除浮动的样式

五、定位网页元素

(一)定位

position属性

  • static : 默认值,没有定位
  • relative:相对定位
  • absolute:绝对定位
  • fixed:固定定位

(二)相对定位

  • 相对定位的特性

    • 相对于自己的初始位置来定位
    • 元素位置发生偏移后,它原来的位置会被保留下来
    • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
  • 相对定位的使用场景

    • 相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        .left
        {
            position:relative;
            left:-20px;
        /* 样式 "left:-20px" 从元素的原始左侧位置减去 20 像素*/
        }
        .right
        {
            position:relative;
            left:20px;
        /* 样式 "left:20px" 向元素的原始左侧位置增加 20 像素*/
        }
    </style>
</head>

<body>
<h2>正常位置</h2>
<h2 class="left">向左移动</h2>
<h2 class="right">向右移动</h2>

</body>
</html>

在这里插入图片描述

(三)绝对定位

  • 绝对定位的特性
    • 绝对定位是相对于它的定位父级的位置来定位,如果没有设置定位父级, 则相对浏览器窗口来定位
    • 元素位置发生偏移后,原来的位置不会被保留
    • 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
    • 设置绝对定位的元素脱离文档流
  • 绝对定位的使用场景
    • 一般情况下,绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别 花边等场景

案例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        h2
        {
            position:absolute;
            left:100px;
            top:150px;
        }
    </style>
</head>

<body>
<h2>我的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。
    这个标题距离左边的页面100px和距离页面的顶部150px。
</p>

</body>
</html>

运行:
在这里插入图片描述

(四)固定定位

  • 固定定位的特性
    • 相对浏览器窗口来定位
    • 偏移量不会随滚动条的移动而移动
  • 固定定位的使用场景
    • 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶 导航栏等
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        .fixed
        {
            position:fixed;
            top:30px;
            right:5px;
        }
    </style>
</head>
<body>

<p class="fixed">哈哈哈</p>
<p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p><p>哈哈哈</p>
</body>
</html>

在这里插入图片描述

(五)z-index属性

用于调整元素定位时重叠层的上下位置

  • z-index属性值:整数,默认值为0
  • 设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系
  • z-index值大的层位于其值小的层上方

(六)网页元素透明度

属性说明举例
opacity:xx值为0~1,值越小越透明opacity:0.4;
filter:alpha(opacity=x)x值为0~100,值越小越透明filter:alpha(opacity=40);
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值