CSS-应用方式、选择器、常用属性

最新推荐文章于 2021-08-04 00:46:43 发布

73、

最新推荐文章于 2021-08-04 00:46:43 发布

阅读量797

点赞数 2

分类专栏： # 前端基础文章标签： css css三种存在形式 css常用属性 css选择器

本文链接：https://blog.csdn.net/weixin_40318474/article/details/103483579

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。
CSS的注释：/* 注释内容 */

1、css三种应用方式：

1. 标签属性上编写

适用范围：指定一个标签。【不推荐，多标签无法复用样式】

<!DOCTYPE html>
<html lang="en">
   	<head>
       	<meta charset="UTF-8">
       	<title>Title</title>
   	</head>
   	<body>
       	<div style="background-color:red; height:48px;">123</div>
       	<div style="background-color:#2908a1; height:48px;">456</div>
       	<div style="background-color:blue; height:48px;">789</div>
   	</body>
</html>

2. head标签中定义

适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        /*给所有的div设置样式*/
        div {
            color: green;
        }
    </style>
</head>
<body>
    <div>seth</div>
    <div>jack</div>
</body>
</html>

3. 在css文件中定义

适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】

创建css文件，如：common.css

/*
author: mr.xue
2019.12.11
common.css
*/
.c1{                                /*c2优先级大于c1，如果c2放在c1上面，则反之*/
    background-color:blue;
    color: white;
}
.c2{
    color: red;
    font-size: 40px;
}

创建html文件，如：index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="common.css" /> /*引入css文件*/
    </head>
    <body>
        <div class="c1 c2" style="color: pick;">123</div> /*style优先级大于c1,c2*/
    </body>
</html>

优先级讲解

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{                                /*c2优先级大于c1，如果c2放在c1上面，则反之*/
                background-color:blue;
                color: white;
            }
            .c2{
                color: red;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div class="c1 c2" style="color: pick;">123</div> /*style优先级大于c1,c2*/
    </body>
</html>

2、选择器

学习选择器的目的就是选中html页面中指定标签，便于以后给他应用样式.

1.id选择器

在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #i1{ 					/*id选择器,不可以重用*/
                background-color:red; 
                height:48px;
            }
            #i2{
                background-color:#2908a1; 
                height:48px;
            }
            #i3{
                background-color:blue; 
                height:48px;
            }
        </style>
    </head>
    <body>
        <div id="i1">123</div>
        <div id="i2">456</div>
        <div id="i3">789</div>
    </body>
</html>

2.class选择器

在body中找到所有class属性值匹配的标签。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{ 						/*class选择器，可以重用，最最常用的就是这个*/
                background-color:blue; 
                height:48px;
            }
        </style>
    </head>
    <body>
        <div class="c1">123</div>
        <div class="c1">456</div>
        <div class="c1">789</div>
    </body>
</html>

3.标签选择器

在body中找到所有指定标签

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           div{ 							/*标签选择器，找到body中所有的div设置成这个样式*/
               background-black; 
               color:white;
           }
       </style>
   </head>
   <body>
       <div>123</div>
       <div>456</div>
       <div>789</div>
   </body>
</html>

4.关联选择器（层级选择器）

在body标签中根据父子关系找到指定标签。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           span div{ 	/*也可以是.c1 div，中间用空格分隔*/						
               background-black; 
               color:white;
           }
       </style>
   </head>
   <body>
       <div>123</div>
       <span>wquwquhdhwh<div>456</div>sasa</span>
       <div>789</div>
   </body>
</html>

5.组合选择器

对选择器进行分组，无需重复编写。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #i1, #i2, #i3{ 				/*中间用，分隔*/				
                background-black; 
                color:white;
            }
        </style>
    </head>
    <body>
        <div id="i1">123</div>
        <span>wquwquhdhwh
<div id="i2">456</div>
sasa</span>
        <div id="i3">789</div>
    </body>
</html>

6.属性选择器

在body中找到所以class属性值匹配的标签。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            input[type='text']{height:100px;width:200px;}
            input[n='xue']{height:300;width:300px;} /*先筛选input,在筛选n='xue'*/
            .c1[n='xue']{height:300;width:300px;} /*先筛选class为c1,在筛选n='xue'*/
        </style>
    </head>
    <body>
        <input type="text">
        <input type="text" n="xue">
        <input type="password">
    </body>
</html>

3、 css常用属性

1. 边框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--边框宽度为1px 颜色是红色的-->
        <div style="border: 1px solid red;">asdf</div>
        <!--边框宽度为1px 边框为虚线 颜色是红色的-->
        <div style="border: 1px dotted red;">asdf</div>
    </body>
</html>

border-radius也可以设置圆角边框。

<div style="border: 2px solid #333333;border-radius: 10px;"></div>
    <div style="border: 1px solid #333333;border-bottom-right-radius: 20px;"></div>
    <div style="border: 1px solid #333333;border-bottom-right-radius: 20px;border-top-left-radius: 20px;"></div>
    <div style="border: 1px solid #333333;width: 100px;height: 100px;border-radius: 30px;"></div>
    <div style="border: 2px solid red;width: 80px;height: 80px;border-radius: 50%;"></div>

在这里插入图片描述

2. height & width

在html中如果想要给标签设置高度和宽度的话，需要使用height和width属性，并且在设置时有两种单位：

像素，根据像素设置。
百分比，根据百分比设置。
因网页高度无限制，所以默认高度无法设置百分比，如果非要设置，则需要父级标签设置固定高度，子标签便可使用百分比设置高度。

注意：行内标签无法设置高度和宽度，如果想要设置必须转换为块级标签才能应用。

<!DOCTYPE html>
<html lang="en">
  	<head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="height: 48px; /*高度*/
                    width: 80%; /*宽度,像素、百分比*/
                    font-size: 23px; /*字体大小*/
                    text-align:center; /*水平居中*/
                    line-height:48px; /*垂直居中，数值与height一样*/
                    font-weight: 300; /*字体加粗*/
                    border: 1px dotted red;">asdf</div>
    </body>
</html>

3. float 浮动

float浮动用于实现N个标签并排存放（主要针对块级标签，行内标签默认就可以并排存放）。

页面布局时，一般都会使用div标签及float属性来实现，float设置时一般有两个值：

float:left，标签并排向左浮动。
float:right，标签并排向右浮动。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="width:20%; background-color: red; float:left;">asdf</div>
        <div style="width:80%; background-color: blue; float:left;">qwer</div>

        <div style="width:20%; background-color: red; float:left;">asdf</div>
        <div style="width:60%; background-color: blue; float:left;">qwer</div>

        <div style="width:20%; background-color: red; float:left;">asdf</div>
        <div style="width:60%; background-color: blue; float:right;">qwer</div>

        <div style="width:20%; background-color: red; float:left;">asdf</div>
        <div style="width:81%; background-color: blue; float:left;">qwer</div>
    </body>
</html>

网页布局例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-header{
                height: 38px;
                background-color: #dddddd;
                line-height: 38px;
            }
        </style>
    </head>
    <body style="margin: 0 auto;">
        <div class="pg-header">
            <div style="float: left;">本站收藏</div>
            <div style="float: right;">
                <a href="">登录</a>
                <a href="">注册</a>
            </div>
            <!-- 清除浮动，与使用了float属性的标签放在同一级 -->
        	<div style="clear:both;"></div>
        </div>
        <div style="width: 300px; border: 1px solid red;">
            <div style="width: 96px; height: 30px; border: 1px solid blue; float: left;"></div>
            <div style="width: 96px; height: 30px; border: 1px solid green; float: left;"></div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

4. display样式

块级标签和内联标签之间进行转换
inline默认自己有多少占多少
block可以自己设置高度宽度、padding、margin
inline-block既有inline的属性又有block的属性
none让标签消失，可以设置功能消失显示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-header{
                height: 38px;
                background-color: #dddddd;
                line-height: 38px;
            }
        </style>
    </head>
    <body>
        <div style="background-color:red; display:inline;">123</div>
        <span style="background-color:blue; display:block;">asdf</span>
        <!-- inline-block 自己有多少就占多少空间，又可以设置高度宽度、padding、margin -->
        <span style="background-color:blue; display:inline-block;">asdf</span>
        
    </body>
</html>

*行内标签无法设置高度宽度、padding、margin
*块级标签是可以设置的

5. 內边距padding、外边距margin

padding内边距作用是为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
padding-left:8px;
padding-right:2px;
padding-top:4px;
padding-bottom:18px;
/* padding:上 右 下 左; */
padding:10px 0 2px; 4px;
/* padding:上下  右左; */
padding:7px 5px;
/* padding:上下右左; */
padding:8px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
</head>
<body>
<h1>无内边距</h1>
<div style="height: 200px;border: 1px solid #dddddd">
    <div style="background-color: darkseagreen;">听妈妈的话</div>
    <div>
        小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
    </div>
</div>
<h1>内边距示例1</h1>
<div style="height: 200px;border: 1px solid #dddddd">
    <div style="background-color: gold;padding: 10px;">听爸爸的话</div>
    <div style="padding: 10px;">
        小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
    </div>
</div>
<h1>内边距示例2</h1>
<div style="height: 200px;border: 1px solid #dddddd;padding: 10px;">
    <div style="background-color: gold;">听爸爸的话</div>
    <div>
        小朋友你是否有很多问号，为什么别人在那看漫画，我却在学画画对着钢琴说话。
    </div>
</div>
</body>
</html>

在这里插入图片描述
margin外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
margin-left:8px;
margin-right:2px;
margin-top:4px;
margin-bottom:18px;
/* margin:上 右 下 左; */
margin:10px 0 2px; 4px;
/* margin:上下  右左; */
margin:7px 5px;
/* margin:上下右左; */
margin:8px;

margin: 0 auto;
0:上下间距为0 auto:左右各一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
</head>
<body>
    <div style="height: 200px;background-color: gold;"></div>
    <div style="height: 200px;background-color: pink;margin-top: 20px;"></div>
</body>
</html>

在这里插入图片描述
外边距补充：body标签默认有一个 8px的外边距，所以你会发现默认的页面都有一个“白边”。

6、font字体和颜色

<h1>字体格式</h1>
<div style="font-family: "Times New Roman",Georgia,Serif;">一白日依山尽，黄河入海流。</div>
<div style="font-family: Arial,Verdana,Sans-serif;">欲穷千里目，更上一层楼。</div>

<h1>字体大小</h1>
<div style="font-size: 13px;">smallsmallsmall</div>
<div style="font-size: 16px;">middlemiddlemiddle</div>
<div style="font-size: 18px;">bigbigbigbig</div>

<h1>字体加粗</h1>
<div style="font-weight: 100;">想想想想想想想想想想想想想想想</div>
<div style="font-weight: 300">重中之重重中之重重中之重重中之重</div>
<div style="font-weight: 400">哒哒哒哒哒哒哒哒</div>

<h1>字体颜色</h1>
<div style="color: red;">colorcolorcolor</div>
<div style="color:#f0ad4e">风格哈各方经过发酵</div>

7、文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .c1{
           width: 400px;
        }
        .c2{
            width: 400px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>水平方向</h1>
    <div class="c1" style="background-color: pink;text-align: left;">fsggsd</div>
    <div class="c1" style="background-color: darkseagreen;text-align: center;">sggsgs</div>
    <div class="c1" style="background-color: goldenrod; text-align: right;">gsgsgs</div>
    <h1>垂直方向</h1>
    <div class="c2" style="background-color: pink;">gsfghuhgsu</div>
    <div class="c2" style="background-color: darkseagreen;line-height: 100px;">gsgsugusi</div>
    <div class="c2" style="background-color: goldenrod;position: relative; ">
        <span style="position: absolute;bottom: 0;">sgfhugshughfui  </span>
    </div>
</body>
</html>

在这里插入图片描述

8、background 背景

background-color:red;
background-image:url(‘image.gif’); # 默认，div大，图片重复放
background-repeat:no-repeat/repeat-x/repeat-y # 图片不重复放/x方向上重复放/y方向上重复放
background-position: 10px 10px; # 移动背景图片，抠取自己需要的图片部分

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="height:100px;"></div>
        <div style="height: 50px; width:50px;border: 1px solid red;background-image:url('1.png');background-repeat:no-repeat;background-position:-50px -50px"></div>
    </body>
</html>

9、position 定位

position用于对屏幕上的标签进行定位，可以分为两种：

1、position:fix，生成绝对定位的元素，相对于浏览器窗口进行定位。例如最常见的广告位和返回顶部，都是基于它来实现。固定在页面某个位置，使得div标签脱离重叠的状态，有了position之后，就会有top、left、right、bottom四个属性，离顶部、左边、右边、底部多少像素

应用场景1: 返回顶部的按钮一直在右下角

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div onclick="GoTop()"; style="background-color:black; 
        	color: white; 
        	height: 50px; 
        	width: 50px;
        	position: fixed; <!--固定在页面某个位置-->
        	bottom: 20px;
        	right: 20px;">返回顶部</div>
        <div style="height: 1500px; background-color: red;"></div>
        <script>
			function GoTop(){
				document.body.scrollTop = 0;
			}
		</script>
    </body>
</html>

应用场景2: 网页下滑，头部一直顶部显示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-header{
                height: 48px;
                background-color: black;
                color: red;
                position: fixed;
                top: 0;
                left: 1px;
                right: 1px;
            }
            .pg-body{
                height: 1000px;
                background-color: #dddddd;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="pg-header">头部</div>
        <div class="pg-body">内容</div>
    </body>
</html>

2、position:absolute ，生成绝对定位的元素，相对于特定第一个父元素进行定位，常与position:relative结课使用。例如：想要让某标签相对某指定标签位置显示。

应用场景：点赞

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="position: relative; height:200px; width:500px; border: 1px solid red; margin: 0 auto">
            <div style="position: absolute; left: 0; bottom: 0; height: 50px; width: 50px; background-color: black;"></div>
        </div>
        <div style="position: relative; height:200px; width:500px; border: 1px solid red; margin: 0 auto">
            <div style="position: absolute; right: 0; bottom: 0; height: 50px; width: 50px; background-color: black;"></div>
        </div>
        <div style="position: relative; height:200px; width:500px; border: 1px solid red; margin: 0 auto">
            <div style="position: absolute; left: 0; top: 0; height: 50px; width: 50px; background-color: black;"></div>
        </div>
    </body>
</html>

10、opacity 透明度

给标签设置透明度，例如：常见的加载、登录框等显示都是基于它实现。

应用场景：弹框
opacity: 透明度、z-index: 层级顺序，大的在上面
要想弹框出现或消失，只需对display属性进行操作

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="z-index: 10; position: fixed; top: 50%; left: 50%; margin-left: -250px; margin-top: -50px;height: 100px;width: 500px; background-color: white;"></div>
        <div style="z-index: 9; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5;background-color: black;"></div>
        <div style="height: 1500px; background-color: red;"></div>
    </body>
</html>

11、overflow

hidden: 超过div定义的长度就隐藏剩余的内容
auto: 大小就这么大，别的做成滚动条

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

12、hover

当鼠标移动到标签上时，加了hover的样式才生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position:fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            background-color: #dddddd;
        }
        .pg-body{
            margin: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .w .logo{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        .pg-header .w .logo:hover{
            background-color: red;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="w">
        <a class="logo">hello</a>
        <a class="logo">world</a>
        <a class="logo">good</a>
        <a class="logo">evening</a>
        <a class="logo">right</a>
    </div>
</div>
<div class="pg-body">
    dsdsds
</div>
</body>
</html>