web前端之CSS

文章目录

  • 一、CSS简介
      • 1.1 CSS语法规则
  • 二、CSS的引用方法
    • 2.1 定义行内样式表
    • 2.2定义内部样式表
    • 2.3链入外部样式表
    • 2.4导入外部样式表
  • 三、CSS选择符
    • 3.1 基本选择符
      • 3.1.1 标签选择符
      • 3.1.2 class类选择符
      • 3.1.3 id选择符
    • 3.2 复合选择符
      • 3.2.1 交集选择符(合并选择器)
      • 3.2.2 并集选择符
      • 3.2.3 后代选择符
    • 3.3 通配符选择符
    • 3.4 特殊选择符
      • 3.4.1伪类选择符
      • 3.4.2 伪元素
    • 3.5 选择器的优先级
  • 四、CSS属性单位
    • 4.1 字体属性
      • 4.1.1 color
      • 4.1.2 font-size
      • 4.1.3 font-weight (设置文本粗细)
      • 4.1.4 font-style(指定文本字体样式)
      • 4.1.5 font-family(指定一个元素的字体)
    • 4.2 背景属性
      • 4.2.1 background-color(设置背景颜色)
      • 4.2.2 background-image(设置背景图片)
      • 4.2.3 background-repeat(设置如何平铺背景图像)
      • 4.2.4 background-size(设置背景图像大小)
      • 4.2.5 background-position(设置背景图像起始位置,默认值0% 0%)
    • 4.3 文本属性
      • 4.3.1 text-align(指定元素对齐方式)
      • 4.3.2 text-decoration(添加文本的修饰)
      • 4.3.3 text-transform(控制文本的大小写)
      • 4.3.4 text-indent(规定文本块中首行文本的缩进)
    • 4.4 表格属性
      • 4.4.1 border(表格边框)
      • 4.4.2 border-collapse(折叠边框)
      • 4.4.3 text-align(表格文字对齐)
      • 4.4.4 表格填充
      • 4.4.5 表格颜色
  • 五、CSS盒子模型
    • 5.1 盒子模型
    • 5.2 弹性盒子模型
      • 5.2.1 flex-direction属性
      • 5.2.2 justify-content(内容对齐)
      • 5.2.3 align-items 对齐方式
  • 六、浮动
  • 七、定位及CSS新特性
    • 7.1 relative(相对定位)
    • 7.2 absolute(绝对定位)
    • 7.3 fixed(固定定位)
    • 7.4 z-index(设置元素堆叠顺序)
    • 7.5 border-radius(圆角)
    • 7.6 shadow(阴影)
  • 八、动画
    • 8.1 @keyframes创建动画
    • 8.2 animation执行动画
  • 九、媒体查询
    • 9.1 meta标签
  • 十、雪碧图


一、CSS简介

CSS,层叠样式表单,又称级联样式表,简称样式表,用于html文档中元素样式的定义。
CSS文件后缀名.css
注释:/* …*/

1.1 CSS语法规则

主要由2个部分构成,选择器以及一条或多条声明。
web前端之CSS_第1张图片
每条声明由一个属性或一个值组成。
属性是希望设置的样式属性,每个属性有一个值,属性和值被冒号分开。

<style>
	h1{
		color: blue;
		font-size:12px;
		}
style>

以上代码中,h1是选择器,表明选择的元素。

二、CSS的引用方法

2.1 定义行内样式表

定义行内样式就是通过直接设置各个元素的style属性,从而达到设置样式的目的。需要在相关标签内使用style属性,style属性可以包含任何css属性。

<body>
	<p style="font-size:18px;color:red">此行文字被style定义为红色显示p>
	<p>此行文字没有被style属性定义p>
body>

2.2定义内部样式表

指的是样式表的定义处于html文件一个单独的区域,若单个文档需要特殊的样式时,就应该使用内部样式表,可以用《style》标签定义在文档的头部。
注意:内部样式表处于页面的《head》《/head》之间

<head>
	<style>
		p{
			color:red;
			font-size:18px;
		}
	style>
head>
<body>
	<p >此行文字被style定义为红色显示p>
	<p>此行文字被style属性定义p>
body>

2.3链入外部样式表

外部样式表通过在某个html页面中添加链接的方式生效。
外部样式表把声明的样式放在样式文件中,页面需要修改样式时,通过link标签链接外部样式表文件。

<link rel="stylesheet" type="text/css" href="xxx.css">

样式表文件的格式
样式表文件的内容是定义的样式表,不包含html标签。

2.4导入外部样式表

指在内部样式表的

<style type="text/css">

style>

链入外样式表与导入外部样式表的本质区别:

导入方式实在浏览器下载HTML文件时将样式表文件的全部内容复制到@import关键字位置,以替换该关键字。
链入方式尽在HTML文件需要引用CSS样式文件中的某个样式时,浏览器才链接样式表文件读取需要的内容,但是并不进行替换。

三、CSS选择符

3.1 基本选择符

3.1.1 标签选择符

以文档对象模型作为选择符,即选择某个html标签为对象,设置其样式规则,所有的标签都可以作为选择符,样式如下:

E{
	/*CSS代码*/
}

E表示网页元素。
具体例子:

body{
	font-size:13px;
	}
div{
	border:3px double #f00;
	width:300px;
	}

3.1.2 class类选择符

class类选择符的名称可以由用户自定义,使用时必须使用英文.(点)进行标识。

.blue{
	color: #00f;
}
p{
	border:2px dashed #f00;
	width:28px;
}

应用class类选择符的代码如下:

<h3 class="blue">标题可以应用样式,蓝色h3>
<p class="blue">段落可以应用样式,蓝色h3>

同一个标签可以使用多个类选择器,用空格隔开,代码如下:

<h3 class="content size"> 这是一个标题h3>

3.1.3 id选择符

针对某一个特定标签,一次只能使用一次。
css中定义id选择符时要在id名称前加上一个#号。

#id 是定义的id选择符名称,该选择符名称在一个文档中是唯一的,不能以数字开头,只对页面中唯一元素进行样式定义。

#top{
	line-height:20px;
	font-size:24px;
	color: #f00;
}

应用id选择符的代码如下:

<div id="top">尝试一下div>

3.2 复合选择符

3.2.1 交集选择符(合并选择器)

由两个选择符直接连接构成,其结果是选中两者各自元素范围的交集。第一个选择符必须是标签选择符,第二个选择符必须是class类选择符或id选择符。

.p,.class {Color:red;font-size:16px;}

p是标签,class是类选择符。

3.2.2 并集选择符

同时选中各个基本选择符所选择的范围,任何形式的基本选择符都可以作为并集选择符的一部分。

h1 span {Color:red;font-size:16px;}

h1 和 span均为标签

3.2.3 后代选择符

选择所有被h1元素包含的span元素,中间用空格隔开

h1 span {Color:red;font-size:16px;}

外层标签是h1,内层标签是span,span标签成为h1标签的后代。

3.3 通配符选择符

*表示定义所有元素的样式
格式如下:

*{CSS代码}

例如:

*{	
	/*    *表示全局变量     */
	margin:1px;	/*外边距设置为1*/
	padding:2px; /*内边距设置为2*/
}

3.4 特殊选择符

3.4.1伪类选择符

a:link{color:#ff0000;}	/*未访问的超链接状态*/
a:visited{color:#00ff00;} /*已访问链接状态*/
a:hover{color:#ff00ff;} /*鼠标悬停在超链接上的状态*/
a:active{color:#0000ff;} /*被激活的超链接状态*/

注意要把active样式写到hover样式后面,否则active样式是不生效的。

3.4.2 伪元素

语法格式:

选择符:伪元素{属性:属性值}
  • :first-letter 将特殊样式添加到文本的首字母
  • :first-line 将特殊样式添加到文本的首行
  • :before 在某元素之前插入内容
  • :after 在某元素之后插入内容

3.5 选择器的优先级

CSS中,权重用数字衡量。

优先级从高到低:行内样式1000>ID选择器100>类选择器10>元素选择器1

四、CSS属性单位

4.1 字体属性

4.1.1 color

<p>学习字体属性p>
p{ color: red;		/*红色*/}
p{ color: #ff0000;	/*红色*/}
p{ color: rgb(0,0,0);  /*黑色*/}

4.1.2 font-size

<p>学习字体属性p>
p{font-size:14px; }

4.1.3 font-weight (设置文本粗细)

web前端之CSS_第2张图片

4.1.4 font-style(指定文本字体样式)

在这里插入图片描述

4.1.5 font-family(指定一个元素的字体)

每个值用逗号分开
如果字体包含空格,它必须加上引号。

font-family:"Simsun","SimHei";

4.2 背景属性

4.2.1 background-color(设置背景颜色)

.box1{
	width:400px;
	height:400px;
	background-color:#f00000;
	}

4.2.2 background-image(设置背景图片)

.box1{
	width:400px;
	height:400px;
	background-image: url(路径);
	}

4.2.3 background-repeat(设置如何平铺背景图像)

web前端之CSS_第3张图片

.box1{
	width:400px;
	height:400px;
	background-image: url(路径);
	background-repeat: repeat-y;
	}

4.2.4 background-size(设置背景图像大小)

web前端之CSS_第4张图片

.box1{
	width:400px;
	height:400px;
	background-image: url(路径);
	background-repeat: repeat-y;
	background-size: 100% 100%;
	}

4.2.5 background-position(设置背景图像起始位置,默认值0% 0%)

web前端之CSS_第5张图片

4.3 文本属性

4.3.1 text-align(指定元素对齐方式)

web前端之CSS_第6张图片

h1 {text-align: left;}

4.3.2 text-decoration(添加文本的修饰)

web前端之CSS_第7张图片

h1{text-decoration:overline;}

4.3.3 text-transform(控制文本的大小写)

web前端之CSS_第8张图片

h1{text-transform:uppercase;}

4.3.4 text-indent(规定文本块中首行文本的缩进)

p{
	text-indent:50px;
}

4.4 表格属性

4.4.1 border(表格边框)

table,td{
	border:1px solid black;
	}

4.4.2 border-collapse(折叠边框)

设置表格的边框是否被折叠成一个单一的边框或隔开

table{border-collapse:collapse;}

4.4.3 text-align(表格文字对齐)

设置水平对齐方式,向左、右、中心

td{text-align:right;}

设置垂直对齐属性

td{height:50px;vertial-align:bottom;}

4.4.4 表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性

td{padding:15px;}

4.4.5 表格颜色

下面指定边框的颜色和th元素的文本和颜色

table,td,th{ border:1px solid green;}
td{background-color:green;color:white;}

五、CSS盒子模型

5.1 盒子模型

概念
所有html元素可以看作盒子,css盒子模型本质上是一个盒子,封装周围的html元素,它包括外边距(margin),边框(border),内边距(padding),实际内容(content)。
web前端之CSS_第9张图片

  • Margin(外边距)- 清除边框外的区域,外边距是透明的,第一个值代表上下,第二个值代表左右
  • Border(边框)-围绕在内边距和内容外的边框
  • Padding(内边距)- 清除内容周围的区域,第一个值代表上下,第二个值代表左右
  • Content(内容)-盒子的内容,显示文本和图像

5.2 弹性盒子模型

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成.
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素

5.2.1 flex-direction属性

定义:指定了弹性子元素在父容器中的位置
语法:

flex-direction:row;
  • row:横向从左到右排列左对产)默认的排列方式
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面
  • column:纵向排列
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面

5.2.2 justify-content(内容对齐)

  • flex-stat 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放
  • flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平产摆放
  • center弹性项目居中紧挨着填充(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)

5.2.3 align-items 对齐方式

在这里插入图片描述

六、浮动

float属性定义元素在哪儿个方向浮动,任何元素都可以浮动。
web前端之CSS_第10张图片
浮动的原理:

  • 浮动以后使元素脱离了文档流
  • 浮动只有左右浮动,没有上下浮动
    元素向左浮动
    web前端之CSS_第11张图片
    元素向右浮动
    web前端之CSS_第12张图片
    当容器不足时
    web前端之CSS_第13张图片

七、定位及CSS新特性

7.1 relative(相对定位)

不脱离文档流

<div class="box">div>
.box{
	width:100px;
	height:100px;
	background-color:red;
	position:relative;
	left:100px;
	}

7.2 absolute(绝对定位)

脱离文档流

<div class="box1">div>
<div class="box2">div>
.box1{
	width:100px;
	height:100px;
	background-color:red;
	position:absolute;
	left:100px;
	}
.box2{
	width:200px;
	height:200px;
	background-color:red;

	}

7.3 fixed(固定定位)

脱离文档流

<div class="box">div>
.box{
	width:100px;
	height:100px;
	background-color:red;
	position:fixed;
	left:100px;
	}

7.4 z-index(设置元素堆叠顺序)

<div class="box1">div>
<div class="box2">div>
.box1{
	width:100px;
	height:100px;
	background-color:red;
	position:absolute;
	left:100px;
	z-index:100;
	}
.box2{
	width:200px;
	height:200px;
	background-color:red;
	z-index:10;
	}

7.5 border-radius(圆角)

<div class="box">div>
.box{
	width:100px;
	height:100px;
	background-color:red;
	border-radius:10px;
	}

使用规则:
web前端之CSS_第14张图片

7.6 shadow(阴影)

box-shadow:h-shadow或v-shadow或blur或color;

web前端之CSS_第15张图片

八、动画

8.1 @keyframes创建动画

@keyframes name{
	from|0%{
		CSS样式
		}
	percent{
		CSS样式
		}
	to|100%{
		CSS样式
		}
	}

name:为动画名称,开发人员自己命名
percent:为百分比值,可以添加多个百分比值
例如:web前端之CSS_第16张图片

8.2 animation执行动画

animation: name duration timing-function delay iteration-count direction;

web前端之CSS_第17张图片
web前端之CSS_第18张图片
web前端之CSS_第19张图片
切换背景颜色

<div class="animation">div>
.animation{
	width:100px;
	height:100px;
	background-color:red;
	animation:anima 5s linear 5s infinite;
	}
.animation:hover{
	animation-play-state:paused;
	}
@keyframes anima{
	0%{
		background-color:red;
		}
	50%{
		background-color:green;
		}
	100%{
		background-color:blueviolet;
		}
	}

九、媒体查询

9.1 meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放,在标签里加入这个meta标签。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

加入以上代码就会按设置的宽度不变,如果不加则会按比例缩放。
参数解释

web前端之CSS_第20张图片

十、雪碧图

CSS Sprite也叫CSS精灵图,CSS雪碧图,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一个大图中去。
优点

  • 减少图片的字节
  • 减少网页的http请求,从而大大提高页面的性能

原理

  • 通过background-image引入背景图片
  • 通过background-position把背景图片移动到自己需要的位置

你可能感兴趣的:(web前端,前端,css)