Web前端之浅谈CSS
CSS
什么是CSS?
css, cascading style sheets 层叠样式表。
它用来控制网页样式,并允许将样式代码与网页内容分离的一种标记性语言。简单地说:css的引入是为了使得HTML语言能够更好地适应页面的美工设计。
- css的优点: ●节省时间 ●页面加载速度更快 ●易于维护 ●多设备兼容性
CSS的三种引用方式
- 内联式:缺点是代码重复,造成整个文档体积变大从而不利于维护、不符合结构与样式分离规范。
<p style="color:red;">文本颜色</p>
- 嵌入式: 缺点是代码复用不方便,初步实现分离,不同页面若公用就会不方便。
<style type="text/css">
/* css样式:选择符(如span)和声明(属性名和属性值):{}内容构成 */
span{
font-size: 100px;
color: green;
font-weight: bold;
}
</style>
- 外部式(推荐): 优点是利于后期维护 可重复使用。因为link 会产生一点额外请求,但是现在的html可以抹平这个小缺点。
在<head>中加上<link rel="stylesheet" type="text/css" href="css/test.css">
再建一个test.css文件:
h2{
color: blue;
font-size: 100px;
font-weight: bold;
}
●三种方法优先级:内联式>嵌入式>外部式 (嵌入式大于外部式是因为浏览器解析代码是从上往下解析的,比较的是执行先后问题,前提link在style的后面)
CSS常用选择器介绍
选择器样式:
♦语法: 选择符{属性:值;}
♦作用:选中页面上的元素(标签),设置对应的样式一基础选择器
一、基础选择器
- 标签(元素)选择器
♦html中所有标签。
♦ 选择器选择的是页面中共有的属性进行设置。
<h2>标签选择器</h2>
h2
{
color: blue;
font-size: 100px;
font-weight: bold;
}
- 类(class)选择器
♦class=“xx英语单词”、active title等。
♦一个标签中可携带多个类。
♦任何标签都可以携带类。
♦一定要有"归类的概念,公共类的想法”。选中的页面元素,设置相同的属性
<h3 class="active title">木子洋</h3>
/*类选择器*/
.active{
color:green;
}
.title{
font-size: 35px;
}
- id(身份证号)选择器
♦id=“xx”,任何元素都可以设置id
♦id是唯一的, 并且不能重复,表示选中的是有特性的元素
<h3 id="container">木子洋</h3>
/*id选择器*/
#container{
color:red;
}
二、高级选择器
-
后代选择器(爸爸的儿子,孙子…)
-
子代选择器(亲儿子)
-
组合选择器
例如:h3,span{
color:brown;
font-size:25px;
}
- 交集选择器
html中:
<div>
<h2 class="active">你看看</h2>
</div>
css中:
h2{
color: red;
}
.active{
font-weight: lighter;
}
h2.active{
font-size: 55px;
}
- 伪类选择器
/*爱恨准则 先爱再恨LoVe HAte*/
/*没有被访问过a的状态*/
a:link{
color:red;
}
/*被访问过a的状态*/
a:visited{
color:purple;
}
/*鼠标悬浮时的状态*/
a:hover{
color:pink;
}
/*鼠标按住时a的状态*/
a:active{
color:blue;
}
注意:hover可以应用于任何的元素
- css继承性:不管嵌套多少层都可以被继承。 检查方法:打开网页源码,高亮状态代表可以被继承下来
选择器权重
●内联样式的权重为1000
●id选择器的权重为100
●类选择器的权重为10
●元素选择器的权重为1
●权重计算永不进位
注意:继承来的属性 它的权重非常低接近于0
- !important:权重很大,常用它这是一个不好的习惯。当面对很多嵌套繁琐的选择器代码时可以一用。
字体属性
-
字体 font- family:
“微软雅黑” , “宋体” ,…;
可放置多个字体,后面的都是备选。 -
字体大小 font-size:
20px; 像素单位:px,em,rem
px:绝对单位。一旦设置 了值,不管网页如何变化始终如一
em:相对单位。当前某块区域的字体大小20px,比如给p标签设置了20px,那么1em= 20px;
rem :相对单位主要应用于移动端 -
字体颜色 color: red
颜色表示法:
单词表示法red green yellow purple.
rgb( )表示法
rgba() a:alpha 表示透明度
十六进制表示法
#ff6700 -
字体样式 font-style
normal :默认的字体
italic:斜体 -
字体粗细 font- weight:
bold:粗的字体
100~900 400表示默认
文本属性
-
文本修饰 text-decoration
underline下划线
none无线(默认)
overline.上划线
line-through删除线 -
文本缩进 text- indent
单位建议使用em -
行高 行与行之间的距离 line- height
px,em,rem -
line-height:行间距,行高一定要大于你的字体大小
letter-spacing:字间距,只对中文起作用
word-spacing:字间距,对英文单词起作用 -
文本对齐方式 text-align
left(默认)
right
center使用最多
元素分类
display属性:
字面意思就是显示,主要是控制元素显示的方式,比如说是否显示、显示的元素的状态、特征是什么等等
块状元素
display:bloock;
<div> <ul> <ol> <p> <h> <table> <form>等等
块级元素特点
◆独占一行
◆>可以设置宽高,如果不设置宽度,默认是父标签的100%宽度
行内元素
display:inline
<a> <span> <em> <strong> <lable>等等
行内元素特点
◆在一-行内显示
◆不能设置宽高,默认的宽高为文本内容占据的宽高
行内块元素
display:inline-block;
<input> <i m g>等等
行内块元素特点
◆在一行内显示
◆可以设置宽高
盒模型
什么是盒模型?盒模型(css model)这一术语用来设计和布局时使用。所有的HTML元素可以看作盒子。它的属性包括外边距、边框、内边距和实际内容。
内边距padding
这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
/*上下左右*/
/*padding-top: 40px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;*/
padding: 20px 40px;/*20表示上下方向,40表示左右方向*/
padding: 10px 20px 30px;/*上 左右 下*/
padding: 10px 20px 30px 40px;/*表示上 右 下 左方向的padding值*/
可能的值:
值 | 描述 |
---|---|
auto | 浏览器计算内边距。 |
length | 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的内边距。 |
inherit | 规定应该从父元素继承内边距。 |
边框border
border 简写属性在一个声明设置所有的边框属性。三要素:粗细 样式 颜色
可以按顺序设置如下属性:
border-width
border-style
border-color
如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。
样式:solid dotted double dashed。
可能的值:
值 | 描述 |
---|---|
border-width | 规定边框的宽度。 |
lborder-style | 规定边框的样式。 |
border-color | 规定边框的颜色。 |
inherit | 规定应该从父元素继承 border 属性的设置。 |
外边距margin
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
可能的值:
值 | 描述 |
---|---|
auto | 浏览器计算外边距。 |
length | 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的外边距。 |
inherit | 规定应该从父元素继承外边距。 |
外边距塌陷问题:margin垂直方向上会出现外边距合并(小的值合到大的值里面去意思是大的值会覆盖小的)。为了避免这个问题所以对于两个相邻盒子,只设置一个盒子的垂直方向上的外边距。
清除某些HTML元素的默认样式
盒子居中显示
CSS布局之浮动(float)
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
◆浮动的背景
◆浮动属性
◆浮动的现象:
1.文字环绕
2.脱离了标准文档流
3.浮动元素互相贴靠
4.浮动元素有收缩现象
可能的值:
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | right |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
注意:最好不要单独设置一个盒子浮动,要浮动就一起浮动。要不浮动就不去浮动。 设置浮动的盒子会脱离整个文档,就像浮起来一样。
文档流,标准文档流指的是元素在排版布局中是默认,从左往右从上往下一个流式的排列布局。而浮动就是脱标现象。
浮动的破坏性
浮动具有破坏性,导致父元素高度塌陷,也就是浮动撑不起父盒子高度。而我们常常认为浮动造成父元素高度塌陷是一种bug,这里要告诉大家:这不是bug,而是标准。
解决方法:清除浮动
-
1.给父盒子设置固定高度 缺点:使用不灵活 后期不易维护 应用:网页中盒子固定高度区域,比如固定的导航栏
-
2.内墙法 规则:在最后一个浮动元素的后面加一个空的块级元素,并且设置该属性clear: both; 缺点:结构冗余
-
3.伪元素(选择器)清除,想在哪清除就在哪加上clearfix
::after
.clearfix::after{
content: '';
display: block;
}
- 4.overflow:hidden;
.top_bar{
height: 200px;
border: 2px solid pink;
overflow: hidden;
}
BFC
一、 BFC是什么东东
了解BFC前先一了 解一下Box和Formatting Context
( 1) B: BOX即盒子,页面的基本构成元素。分为inline、
( 2 ) FC: Formatting Context是W3C的规范中的一 种概念。它是页面中的一 块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
常见的Formatting Context有Block fomatting context (简称BFC )和Inline formatting context (简称IFC)
BFC定义
BFC( Block formatting context)
直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block- level Box如何布局,并且与这个区域外部毫不相干。
BFC布局规则:
1.内部的Box会在垂直方向,一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3.每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float元素重叠。
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算。
二、哪些元素会生成BFC
1.根元素
2.float属性不为none
3.posi tion为absolute或fixed
4.display为inline-block
5.overflow不为visible -->
定位
静态定位
position:static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
理解:一般的元素的定位都是静态定位。
不能设置left,top等等(设置了浮动以后也可以设置宽高)
相对定位
position:relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。若仅仅给一个标准文档流下的盒子设置相对定位,那么它与标准文档流下的盒子没有任何区别。但是能设置left,top等,设置了left、top等的值之后以原来的位置为参考点进行移动。
- 特点:不脱离标准文档流,可以调整元素参考点。
- 参考点:以原来的位置为参考点。
绝对定位
position:absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- 特点:1.脱离标准文档流,不在页面上占位置。
2.层级提高,压盖现象。后来的会覆盖前面的。 - 参考点:单独给一个盒子设置绝对定位,以根元素页面左上角为参考点。
- 相对于最近的非static祖先元素定位,如果没有非static祖先元素,那么以页面上根元素左上角进行定位。
- 网站中的实战应用:“子绝父相”
tips:cursor:游标,鼠标cursor: pointer;时,鼠标悬浮到这时就会变成小手。
固定定位
position:fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
-
特点:1.脱离标准文档流,有压盖现象
2.一旦设置固定定位,在页面中滚动网页,固定不变。 -
参考点:以浏览器的左上角为参考点。
-
应用:小广告,回到顶部,回到导航栏等等。
解决压盖现象
使用z-index(数字越大表示层级越高),可以调整。只能应用在定位的元素之上。其在嵌套结构中,看的都是父级的层级。
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
值 | 描述 |
---|---|
auto | 默认。堆叠顺序与父元素相等。 |
number | 设置元素的堆叠顺序。 |
inherit | 规定应该从父元素继承 z-index 属性的值。 |
CSS背景属性
- background-image,背景图片。默认情况下是横向和纵向平铺
background-image: url(images/yang.jpg);
- background-repet,平铺方式。默认都平铺,no-repet不平铺(应用最多),repet-x只横向平铺,repet-y只纵向平铺。
background-repeat: no-repeat;
- background-position,背景定位。调整背景图的位置。
1.background-position: 50px 100px;
background-position-x: 100px;
background-position-y: 200px;
2.关键字:top right left bottom center
组合起来一共有九种位置。
background-position: 50px 100px;
background-position-x: 100px;
background-position-y: 200px;
background-position: top center;
- background-size:控制背景图大小。background-size:24px597px ;宽度 高度
百分比:0% 50% 100%
水平百分比的值=容器宽度的百分比-背景图片宽度百分比
background-position: 20% 50%;
background-position: 176px 582px;
制作圆、圆环以及半圆
利用border属性的圆角设置:border-radius
border-radius: 5px(左上和右下角) 30px(右上和左下角);
border-radius:1px(左上) 5px(右上和左下) 30px(右下);
border-top-left-radius: 15px;也可以单独设置一个角的。
border-top-left-radius: 15px 30px;表示水平方向圆角半径是15,垂直方向圆角半径是30,二者不一致就不像一个圆角了。
width: 200px;
height: 200px;
background-color: pink;
border-radius:2px 5px 30px;
border-radius: 5%;
以上代码实现效果:
实现圆:border-radius:50%;此时变成了一个圆。
实现圆环:在后面加个 border:5px solid gold;
实现半圆:
width: 200px; height: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
使网页中元素产生阴影效果
box-shadow
box-shadow有五个值
第一个表示阴影的水平偏移方向。
第二个表示阴影的垂直偏移方向(第一二个都可正可负 第一个值为正则阴影往右边偏移 为负则反之。第二个值为正则阴影往下偏移 为负则反之)
第三个表示阴影的模糊程度,数值越大表示模糊程度越深。
第四个是颜色。
第五个默认是outset,表示阴影在外,而inset表示内阴影。
.shadow{
position: relative;
width: 200px;
height: 200px;
background-color: seagreen;
box-shadow: 20px 10px 30px pink;
}
以上代码实现效果:
网页常见布局方案
单列布局
常见单列布局有header与footer等宽,content略窄的单列布局
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color:black;
}
.container{
width: 1200px;
margin:0 auto;
}
.header .container{
height: 60px;
background-color: pink;
}
.wrap{
width: 100%;
height: 100%;
}
.wrap .container{
height: 100%;
/*background-color: seagreen;*/
}
.wrap .left{
width: 10%;
height: 100%;
float: left;
background-color: yellowgreen;
}
.wrap .right{
width: 90%;
height: 100%;
float: right;
background-color: olive;
}
.footer{
width: 100%;
height: 100px;
}
.footer .container{
height: 100px;
background-color: gold;
}
以上代码实现效果:
多列布局
在上面代码的基础上加上
html,body{
margin:0;
height:85%;
}
.wrap .center{
height: 100%;
background-color: #72D8C0;
margin:0 130px;
}
改为.wrap .right{
width:10%;
height: 100%;
float: right;
background-color: olive;
}
以上代码实现效果:
网页中常见问题介绍
1.css规范命名大全http://www.divcss5.com/jiqiao/j4.shtml
2.项目的目录规范
3.确定错误发生的位置
通过删除标签块的方式来确定错误发生的位置。
行内元素与块级元素水平垂直居中
- 行内元素水平垂直: display: table-cell;让我们的div呈现一个单元格的显示方式,相当于一个td
.box{
width: 200px;
height: 200px;
background-color: #FCDBE0;
color: #DEAB9B;
text-align: center;
/*line-height: 200px;*/
display: table-cell;
vertical-align: middle;
}
td{
width: 100px;
height: 100px;
background-color: seagreen;
text-align: center;
/*vertical-align: top;*/
}
vertical-align: middle;垂直方向-排列方式
以上代码实现效果:
- 块级元素水平垂直居中方法一 position+margin
.box{
width: 200px;
height: 200px;
background-color: #F3ED76;
/*position: relative;*/
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
width: 100px;
height: 100px;
background-color: #FDB0BC;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
- 块级元素水平垂直居中方法二 table-cell
td
{
width: 100px;
height: 100px;
background-color:#7FEBB1;
vertical-align: middle;
text-align: center;
}
span{
display: inline-block;
width: 50px;
height:50px;
background-color: pink;
line-height: 50px;
}
- 块级元素水平垂直居中方法三 纯定位计算
.wrap{
width: 200px;
height: 200px;
background-color: #D5BAF7;
position: relative;
}
.xiongda{
width: 100px;
height: 100px;
background-color: #D5F8C8;
position: absolute;top:50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}