CSS的学习

Posted 2021-04-09 胡说八道你也信

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS的学习相关的知识，希望对你有一定的参考价值。

1.为什么学习CSS

问题：

A、如果单纯的使用html进行网页的布局，格式比较的单一不够美观

B、利用html属性进行布局网页的后期维护比较的繁琐

2.什么是CSS

CSS是Cascading Style Sheets(层叠样式表、级联样式单)的简称

3、学习的知识

CSS的引入方式

CSS中的选择器

CSS中的盒模型

CSS中的定位

CSS中的浮动

CSS3中的动画效果

CSS的引入方式

<!DOCTYPE html>

<html>

<head>

<style>

/*字体的颜色*/

color: green;

/*字体的大小*/

font-size: 30px;

/*字体的风格*/

font-family: 宋体;

/*字体的样式（斜体）*/

font-style: italic;

/*字体的加粗*/

font-weight: bold;

}

</style>

<!--<style>

@import url("css/test.css");

</style>-->

</head>

<body>

<p style="font-size: 30px;color: red;">人到中年不由己，保温杯里泡枸杞</p></body>

</html>

<!--

CSS引入的方式

[1]行内式style="属性：值;属性2：值2"（不推荐使用）

[2]内嵌样式

[3]外联样式 rel：引入的文件和当前文件的关系 type：引入文件的类型

[4]导入样式(了解)

CSS：就近原则

引入方式的优先级相同，如果样式冲突那么最后的样式跟随离自己进的样式

-->

CSS中常用的三种选择器

<!DOCTYPE html>

<html>

<head>

<style>

/*标签选择器/标记选择器*/

font-size: 20px;

color: greenyellow;

}

/*id选择器唯一数字、字母、下划线、中划线（-）组成但是不能用数字开始*/

#p_2{

font-family: "宋体";

font-style: italic;

color: red;

}

/*类选择器*/

.p_1{

font-weight: bold;

color: green;

}

</style>

</head>

选择器的优先级：

id选择器>class选择器>标签选择器

权重: 100 10 1

CSS中的其他选择器

<!DOCTYPE html>

<html>

<head>

<style>

/*包含选择器只要包含该元素即可*/

p span{

color: red;

}

/*子选择器直系子元素*/

p>span{

color: green;

}

/*属性选择器*/

input[type=text]{

width: 300px;

height: 80px;

font-size: 25px;

}

/***伪类选择器*******/

a:hover{

color: red;

/*展示下划线*/

text-decoration: underline;

}

/*去除下划线*/

text-decoration: none;

/*首行缩进2文字*/

text-indent: 2em;

}

/***分组选择器**********/

h1,h2,h3,h4{

color: red;

}

</style>

</head>

<body>

<p>

<span>北京尚学堂</span>

<i>

<span>北京尚学堂2</span>

</i>

</p>

<span>北京尚学堂</span>

<hr />

账号：<input type="text" name="" id=""class="" value=""/><br />

密码：<input type="password" />

<hr />

<hr />

<h1>北京尚学堂</h1>

<h2>北京尚学堂</h2>

<h3>北京尚学堂</h3>

<h4>北京尚学堂</h4>

</body>

</html>

div

1.什么是盒子模型

CSS中的盒子模型：网页布局的基础

平面结构图

2.盒子模型的属性

margin（外边距/边界）

border（边框）

padding（内边距/填充）

1) 3个属性都可以分别设置各个方向属性值

margin-top margin-right margin-bottom margin-left

border -top border -right border -bottom border -left

padding -top padding -right padding -bottom padding –left

2) 3个属性都可以同时或者分别设置4个方向属性值

margin：1px，2px，3px，4px;(顺时针放向：上右下左4个方向)

margin：1px，2px;

margin：1px;

margin：0px auto ;//块元素会自动居中

margin-left:1px;

3) border属性有三个修饰属性

border-color

border-color:red;

border-top-color:blue;

border-width

border-width: 1px;

border-left-width: 3px;

border-style

border-style: solid

border-bottom-style: solid；

可以使用border统一设置

border: 1px solid red;

border-right: 5px dotted blue;

盒子模型

<!DOCTYPE html>

<html>

<head>

<style>

.top{

width: 100px;

height: 200px;

/*边框的粗细边框的风格边框的颜色*/

border: 3px dashed red;

/*外边距 boder到虚拟外边框的距离*/

/*margin: 100px;*/

/*可以调整元素的位置*/

margin-top:100px ;

margin-left:50px ;

margin-bottom: ;

margin-right: ;

/*上下左右*/

/*margin: 100px 200px;*/

/*上右下左顺时针方向*/

margin: 10px 20px 30px 40px;

/*内边距 border和真实div的距离*/

padding: 50px;

}

.cen{

height: 480px;

border: 1px solid red;

/*指定背景图片*/

background-image: url(img/5b3b570dNd5ac6d3b.jpg);

/*设置背景图片重复*/

background-repeat: no-repeat;

/*设置背景图片的位置*/

background-position: center;

/*背景图片的大小宽高*/

/*background-size: 1300px 480px;*/

/*设置背景的颜色*/

background-color: #02e2fc;

}

</style>

</head>

<body>

</body>

</html>

<!--

div本身没有含义的

主要的作用是实现网页的模块化

-->

<!DOCTYPE html>

<html>

<head>

<style>

.div1{

width: 200px;

height: 200px;

background-color: red;

/*绝对定位*/

/*position: absolute;*/

position: absolute;

top: 100px;

left: 100px;

/*css层层数越大越往上*/

z-index: 2;

}

.div2{

width: 200px;

height: 200px;

background-color: green;

/*相对定位*/

/*position: relative;*/

/*相对浏览器定位*/

/*position: fixed;*/

position: absolute;

top: 150px;

left: 150px;

z-index: 1;

}

</style>

</head>

<body>

</body>

</html>

<!--

*绝对定位

基于页面左上角定位（基于父级元素的定位）定位离开之后之前的位置会释放

*相对定位

基于原来的位置

定位离开之后之前的位置不会释放

相对浏览器定位

用于广告的实现

-->

CSS中的浮动

<!DOCTYPE html>

<html>

<head>

<style>

div{

width: 100px;

height: 100px;

border: 1px solid red;

float: right;

/*行内块元素*/

/*display: inline-block;*/

/*行---块*/

/*display: block;*/

/*块---行*/

/*display: inline;*/

/*整个元素隐藏*/

/*display: none;*/

}

</style>

</head>

<body>

<!--<span>1</span>

</body>

</html>

<!--

行内元素：（书写元素不会自动换行的元素称为行内元素），行内元素是无法指定宽和高

input span 小标签，图片img（行内块元素），超链接

块元素：（书写元素会自动换行的元素称为块元素）

h1-h6 p div ul ol 等

-->

小米导航实现

<!DOCTYPE html>

<html>

<head>

<style>

/*清除所有元素的内外边距*/

*{margin: 0px;padding: 0px;}

.top{

height: 40px;

background-color: #333333;}

.warp{

width: 1230px;

height: 40px;

/*设置div居中*/

margin: 0px auto;

}

/*设置li的风格不显示*/

.top li{list-style: none;

float: left;

/*设置字体的行高*/

line-height:40px ;

}

.top a{

color: #b0b0b0;

font-size: 13px;

text-decoration: none;

margin-right: 15px;

}

.top a:hover{color: #ffffff;}

.shop{

height: 700px;

background-color: #f5f5f5;

}

.warp div{

width: 235px;

height: 300px;

background-color: #FFFFFF;

float:right;

margin-right: 30px;

margin-top: 25px;

/*调用动画的过程*/

transition: all .5s;

}

.warp div:hover{

/*水平垂直 css3中的偏移*/

transform: translate(0px,-5px);

/*水平（右侧）垂直（下）模糊度模糊颜色 */

box-shadow: 0px 15px 10pxrgba(0,0,0,.3);

}

</style>

</head>

<body>

<div>

<div>

<ul>

<li><a href="">SelectRegion</a></li>

</ul>

</div>

<div>

</div>

</body>

</html>

效果图

<!DOCTYPE html>

<html>

<head>

<style>

body{

background-color: #ffa5a5;

}

.hea{

width: 200px;

height: 200px;

background-color: #d5093c;

box-shadow: 0px 0px 70px #D5093C;

animation: aj 1s infinite;

}

.rig{

/*倒圆角*/

border-radius:100px ;

position: absolute;

left: 200px;

top: 200px;

}

.lef{

/*倒圆角*/

border-radius:100px ;

position: absolute;

left: 361px;

top: 200px;

}

.cen{

position: absolute;

left: 281px;

top: 280px;

/*旋转角度*/

transform: rotate(45deg);

}

/*css3:中的动画*/

@keyframes aj{

/*放大操作*/

0%{transform: scale(1)rotate(45deg);}

50%{transform: scale(1.1)rotate(45deg);}

100%{transform: scale(1)rotate(45deg);}

}

</style>

</head>

<body>

</body>

</html>

以上是关于CSS的学习的主要内容，如果未能解决你的问题，请参考以下文章

HTML、CSS、JavaScript的学习顺序应该是啥？