web前端开发---CSS快速掌握

阅读量：

CSS简介
CSS(Cascading Style Sheets的缩写)，翻译为“层叠样式表” 或者 “级联样式表”，简称样式表。
其主要作用是为HTML网页设置外观或样式(HTML网页中文字的大小，颜色，字体，网页的背景颜色，背景图片)。

书写CSS的语法规则

CSS代码是由选择器和一对括号组成。
大括号里边由若干条声明语句组成。
每条语句用英文分号 隔开
每一条语句由“ 属性：值； ” 组成。
CSS中的属性值一般不加引号
如果属性值为数值型数据时，一般要加单位，如px(像素)。
不能出现HTML标签

CSS代码的书写方式
CSS的书写方式分为三种：嵌入式，外链式，行内式 。

一. 嵌入式
通过

复制代码

    <head>
    	<style type="text/css">
    		<!--书写CSS代码-->
    		选择器{属性：属性值；属性：属性值；}
    	</style>
    </head>
    如果我们使用的时HTML5的文档type属性可以省略不写。

注意：标签一般可以出现在HTML代码中的任意位置，但我们一般只放在中。

e.g.
在这里插入图片描述
二. 外链式

单独写一个以.css为拓展名的文件，然后在标签中使用标签将这个css链接到html文件中。
注意：css文件不能单独运行，必须要依赖于HTML文件。
在这里插入图片描述

复制代码

    <head>
    	<link rel="stylesheet" href="css文件路径">
    </head>

一定要确保css文件引入成功。
步骤：1.当前网页鼠标右键 “检查”。2. 找到network选项。 3.刷新页面。 4.查找network选择卡中的status状态时成功与否。

一个HTML文件可以引入多个CSS文件。

行内式
将CSS代码写在HTML文件标签的style属性中。

复制代码

    e.g.
    <div(标签名) style="属性：值；属性：值；"></div(标签名)>

总结

嵌入式只能作用于当前HTML文件
外链式可以作用于多个HTML文件。
行内式可以精准作用于HTML文件中的一部分。

CSS注释
格式：/注释的内容 /
注意：千万不要在CSS中使用HTML的注释。

选择器 在这里插入图片描述
通用选择器(不建议使用)
作用：给HTML中的所有标签设置样式
e.g.

复制代码

    <head>
    	<style type="text/css">
    		*{
    		color:#00f;
    		}
    	</style>
    </head>

标签选择器
作用：给指定的标签设置样式
e.g.

复制代码

    <head>
    	<style type="text/css">
    		h2{
    		color:#00f;
    		}
    	</style>
    </head>

类选择器
作用：给拥有指定的class属性值的元素设置样式，不管是什么标签只要是拥有相同的class属性值就会设置样式。

复制代码

    <head>
     	<style type="text/css">
      		.h{
      		color:#00f;
      		}
     	</style>
    </head>
    <body>
    	<h4 class="h">标题h4的属性值是h</h4>
    </body>

若为

复制代码

    p.h{
    	color:#00f;
    }

表示先找到p标签，然后再判断p标签里有无指定的class值。

id选择器
作用：给拥有指定的 id 属性值的元素设置样式,但是要注意在一个HTML文件中 ID 的属性值必须是唯一的 。

复制代码

    <head>
      <style type="text/css">
    #h{
    color:#00f;
    }
      </style>
    </head>
    <body>
     <h4 id="h">标题h4的属性值是h</h4>
    </body>

尺寸样式属性
在这里插入图片描述
只有块级元素(如：

)才可以设置宽度和高度,而像这种标签就不行。在这里插入图片描述

文本属性 在这里插入图片描述
字体属性

注意：在写CSS代码前，一定要将HTML代码写好。

复合元素选择器 在这里插入图片描述
前两种选择器最常见。
注意：区分后代元素和子元素。
1.多元素选择器

2.后代元素选择器

3.子元素选择器

4.相邻元素选择器

列表样式属性
分为有序列表和无序列表。(无序列表使用的是最多的)
在这里插入图片描述

列表样式属性案例

css代码
在这里插入图片描述

html代码
伪类选择器
用来超级链接的不同状态设置样式。

四种状态分别为：正常状态，访问后的状态，鼠标放上去的状态和激活状态(鼠标左键已经按下去了，但是没有将左键弹起)。
注意：超级链接的不同状态其实是有顺序的，如果不按照伪类选择器的顺序那么样式就会失效，
方便记忆，按照Love Hate，即lvha。

超级链接的美化
通常去掉超级链接的下划线，然后同时给超级链接设置一个颜色。
一般情况下：
正常访问与访问过后的样式设置为一样。
当鼠标放上的时候给其设置另外一个颜色，激活状态一般不设置因为时间太短。
例如：在这里插入图片描述
属性选择器
继承性

复制代码

    <body>
    	<div>
    	<h1>继承性</h1>
    	<p>.........</p>
    	</div>
    </body>

当我们给body设置字体颜色和字体样式时，body内的标签也会继承body字体的颜色和样式。
如果此时再给div设置字体颜色和字体样式，则原先继承的body的特性就会被覆盖为div的特性。
注意：只有字体颜色和样式可以被继承。
通常我们给body设置字体和颜色。

优先级

复制代码

    /*标签选择器 权重：1*/
    div{
    	color:#00f;
    }
    /*类选择器 权重：10*/
    .d{
    	color:#00f;
    }
    /*ID选择器 权重：100*/
    #dd{
    	color:#00f;
    }
    /*权重：1+1*/
    div h2{
    	color:#00f;
    }
    /*权重：10+1*/
    .d h2{
    	color:#00f;
    }
    /*权重：100+1*/
    #dd h2{
    	color:#00f;
    }
    /*行内样式 权重：1000*/
    <div color="#00f"></div>

复制代码

    <div class="d" id="dd">
    	<h2></h2>
    </div>

通过字体颜色变换可以看出，优先级：行内样式>ID选择器>类选择器>标签选择器
一般来说选择器指向越准确，优先级就会越高。
优先级权重：
标签选择器： 1
类选择器：10
ID选择器：100
行内样式：1000

!improtant属性
作用：主要是用来提升属性的权重，其属性权重值无穷大。
格式：属性：值 !improtant (注意不要将!improtant写在；右边)

复制代码

    p{
    	color:#f00 !improtant;  /*使用!important属性使其权重值无限大，最优先*/
    	font-size: 20px;/*!improtant只提升标签的权重，而不提升选择器的权重*/
    }
    .p1{
    	color:#0f0;
    }
    #p2{
    	color:#00f;
    }

复制代码

    <p class="p1" id="p2">
    bulabulabula..
    </p>

注意：

!improtant标签提升的是标签的优先级，而不是选择器的优先级！！！！！
!improtant也不能提升继承过来的权重。
在这里插入图片描述
一个标签可以携带多个类名
类名：class的属性值
e.g.<标签名 class=“值1 值2 值3”></标签名>
优点：1.减少css代码量。2.多个类名的样式会叠加到当前元素上面。
如果一个标签内的多个类名上设置的样式种类一样的话，就会出现样式冲突 ,那就以css中的代码为标准，谁在下面就采用谁，与class中类名的顺序无关。

背景样式属性(重点)
在这里插入图片描述
要么有内容，要么有长宽才能显示。
background-color:
background-repeat是用于设置背景图片是否平铺，repeat(是平铺)，repeat-x(水平方向平铺)，repeat-y(垂直方向平铺)，no-repeat(不平铺)

background-position: 水平位置，垂直位置。
这两个位置的表示方式有三种，英文单词 or 固定值 or 百分比，这三种方式可以混合使用。
英文单词：
水平位置：left,right,center.
垂直位置：top,bottom,center
固定值：
在这里插入图片描述
百分比的方式：

background简写：
标准文档流

制作HTML网页不同与PS画图，要遵循一个”流“的规则：从左至右，从上至下。
1.如何实现文字与图片之间没有空白：让他们的代码紧密相连。
2.高矮不齐，底部对齐。

标准文流档中元素只有两种：块级元素和行内元素。

浮动
如果想要一些元素既有块级元素的特点又有内行元素的特点，就要让这些元素脱离标准文流档，坚称脱标，这也就是浮动的主要目的。

浮动元素脱离标准文档流，就不再占用空间。
浮动元素的层级比标准文档流里边的元素层级要高，会将标准文档流中的元素给压住。
浮动元素遇到另一个浮动元素就会停止浮动。
将行内元素进行浮动后，就会变成块级元素

清除浮动

效果图：1.浮动元素的父元素没有将其包裹。2.影响到了下边元素的排版。

解决办法1.给父元素添加一个高度。(这个方法不建议使用，因为一个元素的高度应该由其自身的内容决定)

解决办法2
使用清楚浮动的样式属性 clear，clear这个属性是专用于来清除浮动的，其属性值有三个：clear:left; clear:right; clear:both 。
这个属性一般是用在最后一个浮动元素的下边，在最后一个浮动元素的下边新建一个空白的div ，这个标签什么都不放，只做清除浮动使用。
注意：不是所有的地方都可以使用
标签例如：在一系列
标签后边就不行，要采用方法三。

解决办法3
使用 overflow:hidden 这个属性来清除浮动，他的原意是用来将溢出的部分进行隐藏，但也可以用来清除浮动(一般用于给列表清除浮动)。

盒子模型
在这里插入图片描述
width:指的是盒子里面的内容的宽度，而不是盒子的宽度。
height:指的是盒子里面的内容的高度，而不是盒子的高度。
border:指的是盒子的边框。
margin：指的是盒子与盒子之间的间距。

盒子的宽度 = 盒子里面内容的宽度 + 左右两边的填充 + 左右两边的边框线
盒子的高度 = 盒子里面内容的高度 + 上下的填充 + 上下两边的边框线
注意：一个盒子的高度一般情况下不用设置，它的高度应该是由其内容来决定的。

padding
padding表示的是内填充，指的是盒子中间的内容到边框的这一段距离。
方法有两种：第一种我们称为小属性，第二种称之为简写属性。

小属性：
padding-top: 上内填充
padding-right: 右内填充
padding-bottom: 下内填充
padding-left: 左内填充
在这里插入图片描述

简写属性：
padding: 这个属性是有方向的，可以同时表示四个方向，且是上，右，下，左依次顺时针排列。
padding: 20px; 表示shang’you’xia’z上右下左这四个方向的内部填充都为20px
padding:10px 20px; 表示上下为10px，左右为20px。
padding:10px 20px 30px; 表示上为10px，左右为20px，下为30px。
padding:10px 20px 30px 40px; 表示上为10px, 右为20px，下为30px，左为40px。

margin
margin和padding的属性很相似。
margin表示”外边距“的意思，它指的是盒子与盒子之间的举例。
在这里插入图片描述

margin塌陷现象
1.在标准文档流中，竖直方向的margin值不会叠加，而是会取较大的值，如下：
在这里插入图片描述
2.横着的方向是没有margin的塌陷现象

3.浮动元素没有塌陷现象

margin居中
margin的值可以是auto, auto表示“自动”的意思，当左边距与右边距的值都是auto时这个盒子就会水平居中。

注意：

使用margin来实现水平居中时，一定要给这个盒子设置一个宽度，也就是说只有块级元素可以实现水平居中，而行内元素时不能实现居中的，除非在行内元素外包裹一个块级元素。(margin属性是用来实现盒子的水平居中，而不是文本的水平居中)
中有标准文档流中的盒子才可以使用margin来实现水平居中。
e.g.浮动元素不属于标准文档流。
text-align 这个属性是用来实现文本的对齐方式，如果其值为center就表示文本水平居中，但是它不能实现合资的水平居中。
e.g.

善于使用父元素的padding而不是子元素的margin
在这里插入图片描述
上图中，分明只给content类设置了margin-top: 100px ，但是box也被影响了，要解决这个问题
第一种方法：给其父元素设置一个边框线。

但是这种方法不常用，因为边框一般是用来调试代码的，很少给一个盒子设置边框。

第二种方法：
不使用子元素的margin而使用父元素的padding。
说明：margin这个元素本意是用来描述兄弟与兄弟之间的关系，而不是用于描述父子之间的关系。
如果要描述父子之间的关系，最好给其父元素设置padding属性。
在这里插入图片描述

border的属性
border：它是”边框“的意思。
边框三要素：粗细，线型，颜色；(边框的颜色可以省略不写，不写的话默认边框的颜色为黑色。其他的两个属性值不能不写，否则不会显示边框) 在这里插入图片描述
边框的线型：

其实边框也是有四个方向的：
border-top;
border-right;
border-bottom;
border-left;

display
它是 ”显示“ 的意思，用来进行行内元素和块级元素 之间的转换。
将隐藏的元素显示或者将显示的元素隐藏。
display属性取值: inline(行内)，block(块级)，none(无)

当我们将一个行内元素的display设置成block，它就变成一个块级元素。
在这里插入图片描述

反之，当我们将一个块级元素的display属性设置成inline，这个元素就会从块级元素转换为行内元素。

将显示的元素隐藏，将一个隐藏的元素显示。
display: none;(将一个显示的元素隐藏)
display: block;(将一个隐藏的元素显示出来)
这两个功能的主要用javascript写。
在这里插入图片描述
position
它主要是用于实现对元素的定位，在CSS中有三种，
position:fixed 固定定位
position:relative 相对定位
position:absolute 绝对定位

在使用时要配合坐标来使用：
top: 表示定位的元素离上边多远
right: 表示定位的元素离右边多远
bottom: 表示定位的元素离下边多远
left:表示定位的元素离左边多远

固定定位：position：fixed
它是相对于浏览器窗口进行定位，不管页面如何滚动，固定定位元素显示的位置不会改变。
特点：

固定定位元素脱离了标准文档流
固定定位元素的层级比标准文档流中的元素层级要高，所以固定定位元素会压盖住标准文档流中的元素。
固定定位元素显示的位置不会随着浏览器的滚动而滚动

案例1：使用固定定位实现返回顶部的按钮。
在这里插入图片描述
相对定位 position：relative；
相对定位是相对于自己来定位。

相对定位元素没有脱离标准文档流
相对定位元素如果没有设置定位的坐标，那么他还在原来的位置。
当它设定了定位的坐标后，他会在初始位置留下一个空位。
(所以相对定位元素很少单独使用，它主要是用来配合“绝对定位”元素来使用的)
相对定位元素会将标准文档流中的元素压盖住
相对定位元素的坐标值可以为负数

绝对定位
在这里插入图片描述

绝对定位元素脱离了标准文档流
绝对定位元素不再占用空间
绝对定位元素会压盖住标准文档流里边的元素
绝对定位元素相对于“祖先定位元素”来进行定位，这里”祖先定位元素“可以是相对定位，固定定位或绝对定位，但是我们一般只给其祖先元素设置相对定位，”子绝父相“

祖先定位元素未设置定位属性
在这里插入图片描述父元素设置了position定位属性

爷爷元素设置了position定位属性

如果父元素和爷爷元素都设置了相对定位，那么它的绝对定位元素会相对于其父元素来进行定位，因为当绝对定位元素查找到了其祖先元素已经设置了定位的属性，就不会再去查找上一级。(先到先得)
在这里插入图片描述
效果图：

z-index
在这里插入图片描述

在日常使用中，记得给导航栏的z-index设置一个很大的值，避免其被后边的元素覆盖。

结构伪类选择器
css3 = css2 + 新语法 + 新的属性，就是对css2进行扩充删减和优化
在这里插入图片描述

匹配第一个孩子
在这里插入图片描述

匹配第n个孩子
在这里插入图片描述
匹配偶数个孩子
or
匹配奇数个孩子
or

案例：使用CSS3中的结构伪类选择器来实现隔行变色的表格。

border-collapse
这个属性主要是用来合并表格边框线。
border-collapse:collapse;
在这里插入图片描述
伪元素

文本阴影

文字阴影可以有多组值，多组之间用逗号隔开就可以
水平阴影正值阴影在右边，负值在左边
垂直阴影正值在下边，负值在上边
模糊强度，值越大越模糊。

盒子阴影
box-shadow:水平方向阴影，垂直方向阴影模糊距离阴影尺寸阴影颜色内/外阴影
水平阴影和垂直阴影必须要写，其余可以省略不写。
在这里插入图片描述

给图片设置阴影

圆角矩形
**border-radius:**左上右上右下左下

如果四个值都是一样的话，就只用写一个值。

透明度
只要是颜色，就可以用透明度。
rgba(红，绿，蓝，透明度)
透明度 a 取值范围：0 ~ 1 之间，0 表示完全透明，1 表示不透明。
在这里插入图片描述

全部评论 (0)

还没有任何评论哟~

web前端开发---CSS快速掌握

CSS简介 CSSCascadingStyleSheets的缩写，翻译为“层叠样式表”或者“级联样式表”，简称样式表。其主要作用是为HTML网页设置外观或样式HTML网页中文字的大小，颜色，字体，网...

ios开发调用getusermedia_快速掌握前端开发中的常见错误

前言今天我们来了解一下现在浏览器中支持的一些Error对象，如果你还在经常在捕获到错误的时候不知道该用哪个类型，总是习惯于去thrownewError'xx'的话，相信本文会帮你对error有更进一...

快速掌握CSS技能，从这里开始！

CSS挑战：解码网页设计的秘密在如今的数字化世界中，良好的用户体验和视觉设计无疑是一个成功网站的基石。而这一切背后的驱动力之一便是CSS（CascadingStyleSheets）。如果你正在学习网...

基础篇01—前端开发必掌握的css语法

CSS语法实例 <!DOCTYPEhtml <html <head <metacharset=utf8 <title菜鸟教程runoob.com</title <style bodybackgrou...

快速掌握SpringBoot多环境开发

多环境开发在一个项目当中可能同一套代码需要用于多种环境进行不同的用途例如：生产环境，开发环境，测试环境，需要通过配置进行不同环境的开发切换： spring: profiles: active:she...

音视频开发_快速掌握FFmpeg

FFmpeg命令 1. 视频格式转换： ffmpegiinput.avioutput.mp4 bash 2. 音频提取： ffmpegivideo.mp4q:a0mapaaudio.mp3 bash ...

web前端开发之CSS

文章目录 CSS 一.CSS语法二.CSS注释三.CSS选择器 1.CSS元素选择器 2.CSSid选择器（） 3.CSS类选择器（.） 4.CSS通用选择器（） 5.CSS分组选择器 6.CSS...

快速掌握前端页面布局思维要点

快速掌握前端页面布局思维要点所要达到的标准：对于前端的布局能做到信手拈来的程度，就说明已经初见成效了。（到了这种程度，自己会知道的）底层：浏览器会将HTML标签渲染成dom树，形成一种树形的...

【Zstack】快速掌握简单应用层开发

基于TI样例快速开发Zstack协议栈应用层本文基于TIGenericApp样例梳理样例应用层函数，学习协议栈和相关编程思路。知识储备 C语言基础（包括回调函数、静态变量、指针、结构体以及一些很基...

快速掌握 VLC

作者：一去、二三里个人微信号：iwaleon 微信公众号：高效程序员在开始libVLC之前，建议先熟练使用VLC，并掌握其中的常用操作。可能有人会说：一个播放器有什么好学的？那我告诉你，VLC的功...

是否确定退出登录?

web前端开发---CSS快速掌握

全部评论 (0)

相关文章推荐

web前端开发---CSS快速掌握

ios开发调用getusermedia_快速掌握前端开发中的常见错误

快速掌握CSS技能，从这里开始！

基础篇01—前端开发必掌握的css语法

快速掌握SpringBoot多环境开发

音视频开发_快速掌握FFmpeg

web前端开发之CSS

快速掌握前端页面布局思维要点

【Zstack】快速掌握简单应用层开发

快速掌握 VLC