带你快速掌握CSS基础

文章目录

带你快速掌握CSS基础
前言
一、CSS基本样式
二、盒子模型
四、背景
转载声明！！转载文章需得到作者的同意才可进行转载

前言

 - CSS称作为层叠样式表 
 - 主要是用于美化、装饰页面外观
 - CSS样式可以分别为页面的各个层次设置样式

一、CSS基本样式

1.1样式规则与引入

样式规则

引入方式
1、行内式

2、内嵌式

<style type="text/css">
   选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>

3、外链式

<head>
<liink href="CSS文件的路径" type="text/css" rel="stylesheet">

1.2基础选择器

1、元素选择器
作用：通过元素选择器可以选则页面中的所有指定元素

p{
	color: red;
 }
			
h1{
	color: red;
 }

2、id选择器
主要是通过元素的id属性值选中唯一的一个元素

#p1{
	font-size: 20px;
	}

3、类选择器
主要是通过元素的class属性值选中一组元素

.p2{
	color: red;
	}
			
.hello{
	font-size: 50px;
	}

4、并集选择器
主要是通过选择器分组可以同时选中多个选择器对应的元素

#p1 , .p2 , h1{
	background-color: yellow;
	}

5、通配符选择器
他可以用来选中页面中的所有的元素

*{
	color: red;
   }

6、复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素

7、后代选择器
可以选择作为某元素后代的元素

#d1 span{color: greenyellow;}

1.3字体样式

1、字体样式属性

em	相对于当前元素的字体大小来计算的
px	像素
%	根据其父元素的样式来计算该值
cm	厘米
mm	毫米

font-family：字体
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）

font-weight：字体粗细

bold	粗体
Normal	默认值
bolder	定义更粗的值
lighter	定义更细的值

font-style：字体风格

normal	默认值
italic	斜体
oblique	倾斜

1.4文本外观

color：文本颜色
在CSS可以直接使用颜色的单词来表示不同的颜色
红色：red
蓝色：blue
绿色：green
也可以使用RGB值来表示不同的颜色

行间距：line-height

字间距：line-spacing

单词间距：word-spacing

text-transform：文本转换

none	不转换
capitalize	首字母大写
uppercase	全部字母转换为大写
lowercase	全部字母转换为小写

text-decoration：文本装饰

none	默认值
underline	为文本添加下划线
overline	为文本添加上划线
line-through	为文本添加删除线

text-indent：文本缩进

white-space：空白符处理

normal	常规
pre	预格式化
nowrap	空格空行无效

text-shadow：阴影效果

text-overflow：文本溢出

ellipsis	用省略标签表示被修建文本
clip	修剪溢出文本不显示省略标签“…”

text-align：设置文本的对齐方式

right	文本靠右对齐
left	文本靠左对齐
center	文本居中对齐
justify	文本两端对齐

1.5CSS高级属性

伪类选择器

:link：表示普通链接（没有访问过的那种）

a:link{color:white}

:visited：表示访问过的链接

a:visited{color:red}

:active：表示超链接点击的状态

a:active{color:yellow};

:hover：表示鼠标移入的状态

a:hover{color:black};

伪元素
表示元素中的一些特殊字符
first-letter：为元素的第一个字符设置一个样式
first-line：为元素的第一行设置一个样式
:before：表示元素最前面的部分
:after：表示元素最后面的部分

属性选择器

子元素选择器
:first-child:可以选中第一个子元素
:last-child：可以选中最后一个子元素

:nth-child：可以选中任意位置的子元素
该选择器后面可以指定一个参数指定要选中第几个子元素

兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素

pan + p{background-color: yellow;}

选中后面所有的兄弟元素

span ~ p{background-color: yellow;}

否定的伪类
作用：可以从已选中的元素中剔除出某些元素

二、盒子模型

2.1盒子模型的宽和高

witdth：设置盒子内容区的宽度
height：设置盒子内容区的高度

.box1{
	width:200px;
	height:200px;
	}

2.2为元素设置边框

border-width：边框的宽度
border-color：边框的颜色

.box1{border-width:10px;}

border-style：边框的样式

none	默认值
solid	实线
dotted	点状边框
dashed	虚线
double	双线

border：综合设置边框

border:red solid 10px;

border-top：上边框
border-bottom：下边框
border-left：左边框
border-right：右边框

border-radius:圆角边框

border-radius:50px 10px 20px 30px;

2.3内边距(padding)

padding-top：上内边距
padding-bottom：下内边距
padding-right：右内边距
padding-left：左内边距

.box{
padding-top:100px;
padding-bottomm:100px;
padding-right:100px;
padding-left:100px;
}

padding:综合设置内边距

.box{padding:100px 100px 100px 100px}

2.4外边距(margin)

margin-top：上外边距
margin-bottom：下外边距
margin-left：左外边距
margin-right：右外边距

.box{
margin-top:100px;
margin-left:100px;
margin-right:100px;
margin-bottom:100px;
}

.box{margin-left:-100px;}

margin：综合设置外边距

.box{margin:0 auto;}

2.5默认样式

清除浏览器的默认样式

*{
margin:0;
padding:0
}

2.6内联元素

内联元素指的就是display属性为inlin的元素，也称行内元素，在网页中总是随着文字流出现在“行内” 比如：a 、span、br等这些就是行内元素

2.7元素的转换(display)

作用：将一个内联元素变成块元素
inline:可以将一个元素作为内联元素来使用
block：可以将一个元素转换为行内元素
inline-block：将一个元素转换为行内块元素

none：不显示元素，并且元素不会在页面中继续占用位置

.box{
width:100px;
height:100px;
background-color:blue;
display:none;
}

visibility：可以用来设置元素的隐藏和显示的状态
visible：默认值，元素默认会在页面显示
hidden：元素会隐藏不显示，隐藏的元素虽然不会在页面中显示，，但是它的位置会依然保持

.box{visibility:hidden;}

2.8 box-shadow属性

作用：添加阴影效果

h-shadow	水平阴影
v-shadow	垂直阴影
blur	阴影模糊半径
spread	阴影扩展半径
color	阴影颜色
outset/inset	外阴影/内阴影

box-shadow:5px 5px 10px 2px #999 inset;

2.9 box-sizing属性

作用：用于定义盒子的宽度值和高度值是否包含内边距和边框

content-box：当定义width和height时，它的参数值不包括border和padding
border-box：当定义width和height时，border和padding的参数值被包含在width和height之内

三、浮动与定位

3.1文档流

3.2浮动(float)

1、当为一个元素设置浮动以后(非none)，元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
2、元素浮动之后，会尽量向页面的左上或者右上漂浮，，直到遇到父元素的边框或者其他的浮动元素
3、如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
4、浮动的元素不会超过它上面的兄弟元素，最多就是一边对齐

none	默认值
right	标签向左浮动
left	标签向右浮动

未浮动之前的代码以及效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=di, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

未浮动之前的效果
浮动之后的代码以及效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=di, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: right;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

浮动之后的效果

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=di, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;

            float: left;
        }

        .p1{
            font-size: 30px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p class="p1">
这一路上走走停停，顺着少年漂流的痕迹迈出车站的前一刻，竟有些犹豫
不禁笑这近乡情怯，仍无可避免而长野的天，依旧那么暖
风吹起了从前，从前初识这世间，万般流连看着天边似在眼前，也甘愿赴汤蹈火去走它一遍
如今走过这世间，万般流连翻过岁月不同侧脸，措不及防闯入你的笑颜
我曾难自拔于世界之大，也沉溺于其中梦话不得真假 不做挣扎，不惧笑话
我曾将青春翻涌成她，也曾指尖弹出盛夏
心之所动，且就随缘去吧逆着光行走，任风吹雨打
短短的路走走停停，也有了几分的距离不知抚摸的是故事，还是段心情
也许期待的不过是，与时间为敌再次看到你，微凉晨光里，笑的很甜蜜
从前初识这世间，万般流连看着天边似在眼前，也甘愿赴汤蹈火去走它一遍
如今走过这世间，万般流连翻过岁月不同侧脸，措不及防闯入你的笑颜
我曾难自拔于世界之大，也沉溺于其中梦话不得真假，不做挣扎，不惧笑话
我曾将青春翻涌成她，也曾指尖弹出盛夏心之所动，且就随缘去吧
晚风吹起你鬓间的白发，抚平回忆留下的疤你的眼中，明暗交杂，一笑生花
暮色遮住你蹒跚的步伐，走进床头藏起的画画中的你，低着头说话
我仍感叹于世界之大，也沉醉于儿时情话不剩真假，不做挣扎，无谓笑话
我终将青春还给了她，连同指尖弹出的盛夏心之所动，就随风去了以爱之名，你还愿意吗
    </p>
</body>
</html>

效果图

在文档流中，子元素的宽度默认占父元素的全部，当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，宽度和高度都被内容撑开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: rgb(187, 170, 255);
            float: left;
        }       
    </style>
</head>
<body>
    <div class="box">Hello</div>
</body>
</html>

效果图
当开启内联元素span的浮动，，内联元素脱离文档流以后会变成块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: rgb(187, 170, 255);
            float: left;
        }   
        .s1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box">Hello</div>
    <span class="s1">Bye</span>
</body>
</html>

效果图
overflow属性

visible	内容不会被修剪，呈现在标签框之外
hidden	溢出的内容被修剪，并且修剪的内容不可见
auto	会根据需求自动添加滚动条
scroll	会为父元素添加滚动条，通过拖动滚动条来查看完整内容

clear清除浮动

none	默认值，，不清除浮动
left	清除左侧浮动元素对当前元素的影响
right	清除右侧浮动元素对当前元素的影响
both	清除左侧浮动元素对当前元素的影响

3.3定位(position)

相对定位

基本语法

position:relative;

可以通过四个属性来设置元素偏移量

left	元素相对于其定位位置的左侧偏移量
right	元素相对于其定位位置的右侧偏移量
top	元素相对于其定位位置的上边的偏移量
bottom	元素相对于其定位位置下边的偏移量

绝对定位

基本语法

position:absolute;

固定定位

基本语法

position:fixed;

层次(z-index)
如果定位元素的层次是一样，则下边的元素会盖住上一边

z-index:1;

四、背景

4.1背景颜色（background-color）

body{
	background-color:#000;
}

4.2背景图像

4.3背景平铺（background-repeat）

作用：用于设置背景图片的重复方式

repeat	背景图片会双方向重复（平铺）
no-repeat	背景图片不会重复，有多大就显示多大
repeat-x	背景图片沿水平方向重复
repeat-y	背景图片沿垂直方向重复

4.4背景位置（background-position）

作用：可以调整背景图片在元素中的位置

可选值：
该属性可以使用 top right left bottom center中的两个值该属性可以使用 top right left bottom center中的两个值

age:
top left 左上
bottom right 右下

如果只给出一个值，则第二个值默认是center

4.5背景图像固定（background-attachment）

作用：用来设置背景图片是否随页面一起滚动

可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动

4.6背景图像大小（background-size）

像素值	设置背景图像的高度和宽度
百分比	以父标签的百分比来设置背景图像的宽度和高度
cover	把背景图像扩展够大，使背景图像完全覆盖背景区域
contain	把背景图像扩展最大尺寸，使宽度高度完全适应内容区域