3、第九 - WEB开发基础 - HTML中CSS的应用

于 2018-09-09 22:27:00 发布
阅读量96 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/chen170615/p/9575726.html
本文详细介绍了HTML中的CSS应用方式，包括各种选择器的使用方法、CSS优先级与外部调用方式、边框设置等基本样式，以及float、display、position等进阶样式，并通过实例演示了hover和background等特性的应用。

HTML中的CSS应用方式

一、CSS的选择器

HTML中常用的CSS方式，有两种：标签中的style属性；把样式在head头中定义，style标签样式。

1、标签的style属性（设置比较简单）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 80%;width: 60%;background-color: blue">chen1203</div>
    <!--  style="height: 80%;width: 60%;background-color: blue" 就是在标签中定义的用样式-->
</body>
</html> 

2、写在head里面，style 标签中的样式。

- ID选择器
	#i1 {
	}

- class 选择器（推荐使用）
	.cl{
		定义名字
	}
	<标签 class='名称'> </标签>
- 标签选择器
	div{
	 ....
	}
    所有div 设置此样式
	
- 层级选择器（关联选择器，都是空格）
	.cl .c2 div{
	}
- 组合选择器（逗号）
	#i1,#i2,#i3{
	}   
        .i1,.i2,.i3{
	}
- 属性选择器
	对选择到的标签在通过属性在进行一次筛选
	.cl[n='alex']{属性}

如看效果，直接代码复制。

A 、ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id_set1{
            height: 80%;width: 60%;background-color: blue
        }
    </style>   
</head>
<body>
    <div id="id_set1">chen1203</div>
</body>
</html>

<!--在body中，ID 是唯一的值，不能设置重复 -->

 B、class 选择器（因为ID是唯一的值，body中不能设置重复。但class可以）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cl_set_1 {
            height: 80%;width: 60%;background-color: blue
        }
    </style>
</head>
<body>
    <div class="cl_set_1">chen1203</div>
    <div class="cl_set_1">chen</div>    
</body>
</html>
<!-- class 选择器与ID选择器，具体的区别就是，head中把#换.; 且class支持的标识不是唯一，可以写多个 -->

 C、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            height: 80%;width: 60%;background-color: blue
        }
    </style>
</head>
<body>
    <div class="cl_set_1">chen1203</div>
    <div class="cl_set_1">chen</div>
    <span>fasdfasdfasf</span>
</body>
</html>
<!-- 只针对span标签，进行样式渲染，其他的div 标签并没有发现改变-->

D、层级选择器（也叫关联选择器）

h1  b:  说明h1标签下与b标签才生效
h1>b: 说明h1下面的b标签全部生效
h1+b: 说明h1标签相连的b标签才会生效
h1~b: 说明h1类下面的所有b都生效

<!--  层级选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
         h1 b {
             color: red;
         }
    </style>
</head>
<body>
    <h1>
        <b>chen1203</b>
    </h1>
    <h2>
        <b>chen1204</b>
    </h2>
</body>
</html>

<!-- 子元素选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 b { color:blue; }
        h1 > b { color:red; }
    </style>
</head>
<body>
    <h1>
        <b>chen1203</b>
    </h1>
    <h1>
        <i>chen
            <b>chen</b>
        </i>
    </h1>
</body>
</html>

<!-- 相邻选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1+b { color:blue; }
    </style>
</head>
<body>
    <h1>OK</h1>
    <b>chen1203</b>
    <h1>
        <i>chen
            <b>chen</b>
        </i>
    </h1>
</body>
</html>

E、组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id_1,#id_2,#id_3{
            height: 80%;width: 60%;background-color: #57ff82
        }
<!-- 对应ID选择器 -->
        .cl_set_1,.cl_set_2,.cl_set_3{
            height: 80%;width: 60%;background-color: blue
        }
<!-- 对应class 选择器 -->
    </style>
</head>
<body>
    <div id="id_1">chen_1</div>
    <div id="id_2">chen_2</div>
    <span id="id_3">chen_3</span>
    <div class="cl_set_1">chen1203</div>
    <div class="cl_set_2">chen</div>
    <span class="cl_set_3">chenqinq</span>
</body>
</html>

 F、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[id='username']{height: 80%;width: 60%;}<!-- 只针对id为username的input标签进行调整-->
    </style>

</head>
<body>
    <label for="username">用户名：</label>
    <input id='username' type="text" name="user">
    <label for="pwd">密码：</label>
    <input id='pwd' type="text" name="user">
</body>
</html>

 

二、CSS的优先级及外部调用的方式

1、 CSS在HTML中执行的优先级

优先级：标签上的style优先，编写顺序，就近原则

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: red;
        }
        .c2 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <span class="c1 c2" style="background-color: green">chen1203</span>
</body>
</html>

 谷歌调出：开发者工具进行检测，如图,可以点击大框里面的进行点。验证，执行的顺序。

 

2、 CSS在外部调用的方式

A、CSS样式，可以写在单独的文件中，外部需要用 <link rel="stylesheet" href="comm.css"> 调用。过程如下：

编写CSS文件，命名为comm.css ,注意在编写css文件时，不需要<style>标签。

#set_1 {
            background-color: #5655ff;
        }
.c1,span{
            background-color: #804668;
}

 编写css.html文件，并引用外部的css样式。head 中添加    <link rel="stylesheet" href="comm.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="comm.css"> <!-- 外部引用css文件 -->
</head>
<body>
    <div id="set_1">1</div>
    <div class="c1">af</div>
    <div >2</div>
    <div class="c1">3</div>
    <span >4</span>
</body>
</html>

 如图：

 

B 、访问看样式加载的效果

三、CSS的边框及其他常用样式

边框的设置：

  • 宽度，样式，颜色 (border: 4px dotted red;)---- 设置边框虚线
  • border-left;只设置边框的左边
  • border-right;只设置边框的右边
  • border-top;只设置边框的顶部

边框的样式：

  • height 高度，百分比
  • wight 宽度，百分比，像素
  • text-align:center 水平方向居中
  • line-height 垂直方式根据标签高度自动居中
  • color 设置字体颜色
  • font-size 字体大小
  • font-weight 字体加粗

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<div style="border: dotted;height: 20px;width: 200px ">chen1203</div>-->
    <div style="border: 1px solid red ">chen1203</div>
    <p></p>
    <div style="
    height: 48px;
    width: 80%;
    border: 1px solid red;
    text-align:center;
    line-height: 48px;
    color: green;
    font-size: large;
    font-weight: bold"
    >qing</div>
</body>
</html>

效果：

 

四、CSS的float样式

　　float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
　　如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
　　float样式在页面的导航条上，使用的比较广，比较常用。让标签浪起来，块级标签也可以堆叠。

可定的值：

  • left 元素向左浮动
  • right 元素向右浮动。
  • none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
  • inherit 规定应该从父元素继承 float 属性的值。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:30%;background-color: red; float:left">1</div>
    <div style="width:60%;background-color: blue;float:right">2</div>
</body>
</html>

 效果：（两个div中，可以堆叠起来使用）


补充：（ <div style="clear: both"></div> ） 的功能点，不好描述请看图吧

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0 auto">
    <div class="pg_header">
        <div style="float: left">收藏本站</div>
        <div style="float: right">
            <a>登录</a>
            <a>注册</a>
        </div>
    </div>
    <br />
    <div style="width: 300px;border: 1px solid red">
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="width:90px;height: 30px;border: 1px solid green;float:left"></div>
        <div style="clear: both"></div>  <!--  主要把红色边框调整出来 -->
    </div>
</body>
</html>

 效果：

五、CSS的display样式

　　display 属性规定元素应该生成的框的类型。

display 可用参考值：

  •  display: none -- 让标签消失(可以设置弹出对话框、关闭对话框)
  • display: inline;
  • display: block;
  • display: inline-block;

解析：

  1. inline-block 两者兼有
  2. 具有inline, 默认自己有多少，占用多少
  3. 具有block ，可以设置高度、宽度，padding 、margin

++++ +++ ++ ++ ++ +++ +++ ++ +++ ++ +++ ++ ++ +++
行内标签：无法设置高度、宽度，padding margin
块级标签: 设置高度，宽度 padding margin

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: red;display: inline-block"> fadfafaf </div>
    <span style="background-color: red;display: block">fnnnnn</span>
    <a style="background-color: red;display: inline-block"> fadfafaf </a>
    <span style="background-color: red;display: none">chen1203</span>
</body>
</html>

 效果：(第4行被隐藏掉了)

补充：padding\margin

观察两个工具中，样式的具体标变化

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>margin</h2>
    <div style="border: 1px solid red;height: 70px ">
        <div style="background-color: green;height: 50px;
        margin-top: 0px"></div>
    </div>

    <h3>padding</h3>
    <div style="border: 1px solid red;height: 70px ">
        <div style="background-color: green;height: 50px;
        padding-top: 0px"></div>
    </div>

</body>
</html>

 效果：

　
　　两者区别在于：padding 与margin 根据开发者代码里面去看。用鼠标调整padding-top、margin-top像素，就可以知道margin的绿色块是整体往下移动，而padding就向下扩大，就想瀑布一样，调整像素，越来越大。

六、CSS的postion样式

postion 几种常用的属性：

absolute

  • 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

  • 生成绝对定位的元素，相对于浏览器窗口进行定位。
  • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

  • 生成相对定位的元素，相对于其正常位置进行定位。
  • 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。

  • 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit 规定应该从父元素继承 position 属性的值。

这里重点介绍一下，fixed 的定位元素。postion  为fixed 把元素固定页面的某个地方

1、举例，（顶部导航固定、在滑动页面的情况下，不会进行收缩。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg_header{
            height: 48px ;
            background-color: cornflowerblue;
            color: black;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            margin-top:0px;
            margin-left:10px;
            margin-right: 10px;
        }
        .pg_body{
            height: 500px ;
            background-color: #dddddd;
            margin-top: 50px;
            margin-left:2px;
            margin-right: 2px;
        }
    </style>
</head>
<body>
    <div class="pg_header">头部</div>
    <div class="pg_body">内容</div>
    <div class="pg_bottom">底部</div>
</body>
</html>

 效果，如下：

 2、举例，（右下角，生成按钮，点击返回顶部。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .return_top_header{
            width: 50px;
            height: 50px;
            background-color: #5655ff;
            color: white;
            position: fixed;
            right: 20px;
            bottom:20px;

        }
    </style>

</head>
<body>
    <div onclick="TOP()" class="return_top_header">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd;">数据</div>
    <script>
        function TOP() {
            document.body.scrollTop = 0;
        }
    </script>
<!-- onclick="TOP()" 的名称定义要跟 script 标签中的function TOP() 名字对应 -->
</body>
</html>

 效果，如下:

 验证：浏览器点击不了的话，注意清楚缓存。

3、absolute  与 relative 的一般是结合使用（在框之中，还需要有框或图标）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;top: 0;right:0;width: 50px;height: 50px;background-color: black"></div>
　　　　　<!-- 可变动黑色边框的位置，top left bottom right  可是设置像素为零-->
    </div>
</body>
</html>

 效果：

补充：z-index  与 opcity 

z-index　层级顺序关系

opcity 设置透明度（就好像两张图片放在一起，把另外一张图片呈现出现）

举例：

<body>
    <div style="z-index: 10;position: fixed;top:50%;left:50%;background-color: white;height:50px">chen1203</div>
    <div style="z-index: 9;position: fixed;background-color: black;top: 0;bottom: 0;right: 0;left: 0;opacity: 0.5"></div>
</body>

 效果：(根据红框中的标签，可调整数值，看效果)

 

七、CSS的overflow样式

overflow 属性规定当内容溢出元素框时发生的事情。
　　定义：溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

  • visible  默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll   内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 　如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  • inherit 规定应该从父元素继承 overflow 属性的值。

举例说明：（可以测试把   overflow:auto 换成其他参数，查看效果。）

    <div style="height: 200px;width: 300px;overflow:auto">
        <img src="1535799057866.jpg">
    </div>

显示如下：（浏览器中红框的位置，就可以调整参数，查看效果---对图片，显示不完全，单会出现导航条，查看具体的内容）

八、CSS的hover样式

:hover在鼠标移到链接上时添加的特殊样式。
提示: :hover 选择器器可用于所有元素，不仅是链接。

简单来讲，鼠标经过之处，字体或者图片会变换颜色

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg_header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            line-height: 48px;
            background-color: blue;
        }
        .pg_body{
            margin-top: 50px;
        }
        .w {
            width: 900px;
            margin:0 auto;
        }
        .pg_header .menu {
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        .pg_header .menu:hover {
            background-color: green;
        }
        .pg_header .Home_appliance:hover {
            background-color: green;
        }
        .pg_header .mobile:hover {
            background-color: green;
        }
    </style>

</head>
<body>
    <div class="pg_header">
        <div class="w">
            <a class="logo"> LOGO </a>
            <a class="menu"> 全部 </a>
            <a class="Home_appliance">家电 </a>
            <a class="mobile"> 手机 </a>
        </div>
    </div>
    <div class="pg_body">
        <div class="w"> chen1203 </div>
    </div>
    <div class="pg_bottom"></div>
</body>
</html>

 效果：（鼠标点到其他：全部、手机，会变动颜色）

九、CSS的background样式

background 背景缩写属性可以在一个声明中设置所有的背景属性。

　　以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

定义：

  • background-color       指定要使用的背景颜色
  • background-position  指定背景图像的位置
  • background-size 　    指定背景图片的大小
  • background-repeat      指定如何重复背景图像
  • background-origin      指定背景图像的定位区域
  • background-clip          指定背景图像的绘画区域
  • background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
  • background-image      指定要使用的一个或多个背景图像

举例：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-image: url(22.jpg);height: 260px;background-repeat: no-repeat"></div>
    <div style="background-image: url(22.jpg);
    height: 98px;
    width: 131px;
    background-repeat:no-repeat;
    border: 1px solid red;
    background-position-x: -243px;
    background-position-y: -69px;"
    >chen1203</div>
</body>
</html>

 

效果：（把图中LOGO字体，通过样式截取出来。并在框里面写上chen1203）

 

应用：

  • background-image:url("文件路径") #默认div大小，图片重复访问，要设置高度、宽度
  • backgrounf-repeat: repeat-y ; #纵轴重复图片
  • backgrounf-repeat: repeat-x; #横轴重复图片
  1. backgrounf-position-x: 50px #设置截取横坐标像素
  2. backgrounf-position-y: 50px #设置截取z纵坐标像素

或者也可以这样描述：backgrounf-position: 50px 50px 表示横坐标，纵坐标。

~~~以上~~~

 

转载于:https://www.cnblogs.com/chen170615/p/9575726.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值