CSS 样式详解


参考视频:https://ke.qq.com/course/320021

一、CSS介绍

是一种用于修饰网页的文本样式语言,还可以配合Javascript脚本语言动态对网页各元素操作

格式: 选择器{属性:值;属性:值;属性:值;…}
选择器:需要改变样式的HTML元素

二、CSS使用方法

2.1.内联方式(行内样式)

<p style="color: red">红色段落</p>

2.2.内部方式(内嵌样式),在head标签中使用

通过名字c1、c2进行关联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS演示</title>
    <style type="text/css">
        .c1 {
            color: red;
        }
        .c2 {
            color: blue;
        }
    </style>
</head>
<body>
<p class="c1">段落一</p>
<p class="c2">段落二</p>
</body>
</html>

在这里插入图片描述

2.3.外部导入方式(推荐),在head标签中使用

创建css目录,并创建main.css文件
在这里插入图片描述
在这里插入图片描述
把样式写到main.css文件中

.c1 {
    color: red;
}
.c2 {
    color: gold;
}

在html中调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS演示</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<p class="c1">段落一</p>
<p class="c2">段落二</p>
</body>
</html>

在这里插入图片描述

三、选择器

3.1.元素

元素选择器:使用html标签作为选择器,为指定标签设置样式

3.1.1.示例1:h1元素设置样式

h1 {
	color: red; 
	font-size: 14;
}

3.1.2.示例2:多个元素设置样式

h1,h2,h3,h4,h5,h6 {
	color: green;
}

3.1.3.示例3:子元素会继承最高级元素所有属性

body {
	color: #000;
	font-family: Verdana, serif; /*字体*/ 
}

3.2.ID

使用“id”作为选择器,为指定id设置样式。

使用格式:#id名{样式…}

3.2.1.特点:

• 每个标签都可以设置id
• 每个id名称只能在HTML文档中出现一次
• id名称不能以数字开头,不能是标签名称
• 在实际开发中,id一般预留JavaScript使用

3.2.2.第一步:给标签指定id

<p id="t">...</p>

3.2.3.第二步:针对id设置样式

#t {
	color: red; 
}

3.3.类

使用“类名”作为选择器,为指定id设置样式。

使用格式:.类名{样式…}

3.3.1.第一步:给标签指定类

<p class="c">...</p>

3.3.2.第二步:针对类设置样式

.c {
	color: red; 
}

3.4.派生

派生选择器:依据元素在其位置的上下文关系来定义样式。
在这里插入图片描述
示例:

<style type="text/css">
	.c p {		/* 适用div下的p标签*/
		color: red;
	}
</style>

<div class="c">
	<h1>一号标题</h1>
	<p>这是一个段落</p>
</div>

四、CSS常用属性

4.1.内边距和外边距

在这里插入图片描述
padding(内边距):钻戒到盒子内边框的距离
margin(外边距):钻戒盒子距离桌子边缘的距离
border:钻戒盒子边框宽度
在这里插入图片描述
在这里插入图片描述

padding: 10px 5px 15px 20px # 上右下左
padding: 10px 5px 15px # 上右下
padding: 10px 5px # 上右
padding: 10px # 四边都是10px

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性</title>
    <style>
        .zhuozi {
            height: 200px;
            width: 200px;
            background-color: gray;
            /*border: 2px dashed gray;    !*防止整体变动*!*/
            overflow: hidden;   /*两种方法均可实现*/
        }
        .hezi {
            height: 100px;
            width: 100px;
            background-color: red;
            margin-left: 25px;
            margin-top: 25px;
            padding-left: 50px;
            padding-top: 50px;
        }
        .hezi img {
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>

<div class="zhuozi">
    <div class="hezi">
        <img src="img/zuanjie.jpg">
    </div>
</div>
</body>
</html>

在这里插入图片描述

4.2.字体 font-*

在这里插入图片描述

p {
    color: red;
    font-size: x-large;
    font-weight: bolder;
    font-style: italic;
}

4.3.文本

在这里插入图片描述

4.4.边框 border-

在这里插入图片描述

4.5.背景 background-*

在这里插入图片描述

4.6.定位

position属性:把你元素定到什么位置,或者把你元素根据什么定位。
在这里插入图片描述

4.6.1.使用步骤:

  1. 先使用postion告诉怎么定位

  2. 再告诉它定位到哪
    • left 靠左距离
    • right 靠右距离
    • top 顶部距离
    • bottom 底部距离

4.6.2.示例1:登录页面,div在页面中间

.div {
	width: 200px;
	height: 200px;
	border: 1px dashed blue;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

4.6.3.示例2:回到顶部,div在右下角

.go {
	position: fixed;
	right: 20px;
	bottom: 30px;
}

<a href="#" class="go">回到顶部</a>

4.7.浮动

float属性:定义元素在哪个方向浮动。
可选值:none、left、right

特点:
• 只能水平浮动,不能横向浮动

• 浮动碰到父元素的边框或者浮动元素的边框就会停止

• 浮动元素的后一个元素会围绕着浮动元素(典型应用:文字围绕图片)

• 浮动元素的前一个元素不会受到任何影响(如果想让两个块元素并排显示,必须让两个块元素都应用float)

4.8.其他

在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页