1、内联样式
要使用内联样式,需要在相关的标签内使用样式(style)
属性。
Style
属性可以包含任何 CSS
属性
缺点:缺乏整体性和规划性,不利于维护,维护成本高
<p style="background: orange; font-size:24px;">CSS<p>
2、内部样式
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表
缺点:单个页面内的CSS代码具有统一性和规划性,便于维护,但是在多个页面之间容易混乱
<head>
<style>
h1 {
background: red;
}
style>
head>
3、外部样式(推荐)
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观
每个页面使用 标签链接到样式表,
标签在(文档的)头部
<link rel="stylesheet" type="text/css" href="xxx.css">
1、全局选择器
可以与任何元素匹配,优先级最低,一般做样式初始化
*{
margin: 0;
padding: 0;
}
2、元素选择器
HTML文档中的元素, p、b、div、a、img、body
等
标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”
p{
font-size:14px;
}
注意:
ul、li、label、dt、dl、input、div
等3、类选择器
规定用圆点 .
来定义,针对想要的所有标签使用,比较灵活
"oneclass">你好
.oneclass{
width:800px;
}
class属性的特点
"classone classtwo">我是一个h3
4、ID选择器
针对某一个特定的标签来使用,只能使用一次。 css
中的 ID选择器
以 #
来定义
<h2 id="mytitle">你好h2>
#mytitle{
border:3px dashed green;
}
注意:
5、合并选择器
语法: 选择器1,选择器2,…{ }
作用:提取共同的样式,减少重复代码
.header, .footer{
height:300px;
}
选择器的优先级
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
ID选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低:内联样式 > ID选择器 > 类选择器 > 元素选择器>全局选择器
1、字体属性
color:规定文本的颜色
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}
font-size:设置文本的大小
chrome浏览器接受最小字体是12px
font-weight:设置文本的粗细
font-style:指定文本的字体样式
font-family:指定一个元素的字体
font-family:"MicrosoftYaHei","Simsun","SimHei";
注意:
2、背景属性
background-image语法:
background-image: url("images/img1.jpg");
background-repeat属性:
设置如何平铺背景图像
background-size属性:
设置背景图像的大小
background-position属性:
设置背景图像的起始位置,其默认值是:0% 0%
3、文本属性
text-align:指定元素文本的水平对齐方式
text-decoration:规定添加到文本的修饰,下划线、上划线、删除线等
text-transform:控制文本的大小写
text-indent:规定文本块中首行文本的缩进
p{
text-indent:50px;
}
负值是允许的,如果值是负数,将第一行左缩进
4、表格属性
表格边框
指定CSS表格边框,使用border属性
table, td {
border: 1px solid black;
}
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table {
border-collapse:collapse;
}
table,td {
border: 1px solid black;
}
表格宽度和高度
width和height属性定义表格的宽度和高度
table {
width:100%;
}
td {
height:50px;
}
表格文字对齐
表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式,向左,右,或中心
td {
text-align:right;
}
垂直对齐属性设置垂直对齐
td {
height:50px; vertical-align:bottom;
}
表格填充
如果在表的内容中控制空格之间的边框,应使用td
和th
元素的填充属性,th
是表头,td
是单元格
td {
padding:15px;
}
表格颜色
下面的例子指定边框的颜色,和th
元素的文本和背景颜色
table, td, th {
border:1px solid green;
}
td {
background-color:green; color:white;
}
1、后代选择器
选择所有被E元素包含的F元素,中间用空格隔开
<ul>
<li>宝马li>
<li>奔驰li>
ul>
<ol>
<li>奥迪li>
ol>
} -->
ul li{
color:green;
}
2、子代选择器
选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示
<div>
<a href="#">子元素1a>
<p> <a href="#">孙元素a> p>
<a href="#">子元素2a>
div>
div>a{
color:red
}
3、相邻兄弟选择器
选择紧跟E元素后的F元素,用加号表示,选择相邻的第一个兄弟元素,只能向下选择
<h1>h1元素h1>
<p>第一个元素p>
<p>第二个元素p>
h1+p{
color:red;
}
4、通用兄弟选择器
选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开,只能向下选择
<h1>h1元素h1>
<p>第一个元素p>
<p>第二个元素p>
h1~p{
color:red;
}
1、盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:
如果把盒子模型看作是一个生活中的快递,那么内容部分等同于你买的实物,内边距等同于快递盒子中的泡沫,边框等同于快递盒子,外边距等同于两个快递盒子之间的距离
div{
width: 100px;
height: 100px;
padding: 10px;
border: 2px solid red;
margin: 10px;
background-color: green;
}
2、弹性盒子模型(flex box)
弹性盒子是 CSS3 的一种新的布局模式,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
CSS3弹性盒内容
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
<div class="flex-container">
<div class="flex-item">flex item 1div>
<div class="flex-item">flex item 2div>
<div class="flex-item">flex item 3div>
div>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
style>
默认弹性盒里内容横向摆放
3、父元素上的属性
display 属性
display:flex;
开启弹性盒,属性设置后子元素默认水平排列
flex-direction属性
flex-direction 属性指定了弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse
.flex-container {
display: flex;
flex-direction: column;
width: 400px;
height: 250px;
background-color: lightgrey;
}
justify-content 属性
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐
justify-content: flex-start | flex-end | center
flex-start
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放flex-end
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放center
弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出).flex-container {
display: flex;
justify-content: center;
width: 400px;
height: 250px;
background-color: lightgrey;
}
align-items 属性
align-items
设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式
align-items: flex-start | flex-end | center
flex-start
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界flex-end
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界center
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)4、子元素上的属性
flex属性
flex
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间默认为0,即如果存在剩余空间,也不放大
如果只有一个子元素设置,那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%,1即100%,超出按100%
<div class="flex-container">
<div class="flex-item1">flex item1div>
<div class="flex-item2">flex item2div>
<div class="flex-item3">flex item3div>
div>
<style>
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: gold;
}
.flex-item1 {
height: 150px;
background-color: red;
flex: 1;
}
.flex-item2 {
height: 150px;
background-color: green;
flex: 2;
}
.flex-item3 {
height: 150px;
background-color: blue;
flex: 1;
}
style>
1、文档流
文档流是文档中可显示对象在排列时所占用的位置/空间,例如:块元素自上而下摆放,内联元素,从左到右摆放
标准流里面的限制非常多,导致很多页面效果无法实现
2、文档流产生的问题
3、脱离文档流
1、浮动
float
属性定义元素在哪个方向浮动,任何元素都可以浮动
浮动的原理
注意:
2、清除浮动
浮动副作用
当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动
清楚浮动的方案
父元素设置高度
如果父元素高度塌陷,可以给父元素设置高度,撑开元素本身大小
overflow清除浮动
如果有父级塌陷,并且同级元素也收到了影响,这种情况下父布局不能设置高度,可以使用 overflow
清除浮动
在父级标签的样式里面加: overflow:hidden;
(用的比较多)或者clear: both;
伪对象方式
如果有父级塌陷,并且同级元素也收到了影响,还可以使用伪对象方式处理
为父标签添加伪类 after
,设置空的内容,并且使用 clear:both ;
<div class="container">
<div class="box">div>
<div class="box">div>
<div class="box">div>
div>
<div class="nav">div>
.container{
width: 350px;
border: 1px solid red;
}
.container::after{
content: "";
display: block;
clear: both;
}
.box{
width: 100px;
height: 100px;
background-color: #fff176;
float: left;
margin: 5px;
}
.nav{
width: 100px;
height: 100px;
background-color: red;
}
3、定位
position
属性指定了元素的定位类型
其中,绝对定位和固定定位会脱离文档流
设置定位之后:可以使用四个方向值进行调整位置: left、top、right、 bottom
注意
设置定位之后,相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整,如果父级元素不存在定位,则继续向上逐级寻找,直到顶层文档
Z-index
z-index
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
<div class="box1">div>
<div class="box2">div>
.box1{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
z-index: 2;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
position:absolute;
z-index: 1;
}
1、圆角
使用 CSS3
border-radius
属性,可以给任何元素制作 “圆角” border-radius
属性,可以使用以下规则:
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
div{
margin: 10px;
}
.box1 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
.box2 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
.box3 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
2、阴影
box-shadow
向框添加一个或多个阴影
box-shadow: h-shadow v-shadow blur color;
<div class="box">div>
/* 三个方向的阴影效果 */
.box{
width: 200px;
height: 200px;
background-color: #8ac007;
box-shadow: 0 10px 30px rgba(0, 0, 0,0.5);
}
动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数,用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%,0% 是动画的开始,100% 是动画的完成
1、@keyframes创建动画
@keyframes name {
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}
name:动画名称,开发人员自己命名;
percent:为百分比值,可以添加多个百分比值;
2、animation执行动画
animation: name duration timing-function delay iteration-count direction;
3、切换背景颜色
<div class="animation">div>
.animation {
width: 300px;
height: 300px;
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;
}
}
4、呼吸效果
<div class="box">div>
.box {
width: 500px;
height: 400px;
background-color: #8ac007;
margin: 40px auto;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe{
0% {
opacity: 0.2;
box-shadow:0 1px 2px rgba(255,255,255,0.1);
}
50% {
opacity: 0.5;
box-shadow:0 1px 2px rgba(18,190,84,0.76);
}
100% {
opacity: 1;
box-shadow:0 1px 2px rgba(59,255,255,1);
}
}
媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
1、设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在 标签里加入这个meta标签
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
2、参数说明
width = device-width
宽度等于当前设备的宽度initial-scale
初始的缩放比例(默认设置为1.0)maximum-scale
允许用户缩放到的最大比例(默认设置为1.0)user-scalable
用户是否可以手动缩放(默认设置为no)3、媒体查询语法
@media screen and (max-width: 768px) {
/* 设备小于768px加载样式 */
body{
background-color: red;
}
}
@media screen and (max-width: 992px) and
(min-width: 768px) {
/* 设备小于768px但小于992px加载样式 */
body{
background-color: pink;
}
}
@media screen and (min-width: 992px) {
/* 设备大于992px加载样式 */
body{
background-color: green;
}
}
CSS Sprite也叫CSS精灵图、CSS雪碧图,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去
优点
原理
<i class="icon1">i>
<i class="icon2">i>
.icon1 {
display: block;
background-image: url(1.png);
background-position: -20px 0;
width: 45px;
height: 70px;
}
.icon2 {
display: block;
background-image: url(1.png);
background-position: -93px -84px;
width: 45px;
height: 70px;
}
我们会经常用到一些图标,但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢。所以,我们可以使用字体图标的方式来显示图标,既解决了失真的问题,也解决了图片占用资源的问题
常用字体图标库:阿里字体图标库
优点
使用字体图标
font-class
引用<link rel="stylesheet" href="./css/iconfont.css">
<span class="iconfont icon-add-circle">span>
.iconfont{
font-size: 35px;
color: red;
}