学了半个月HTML之后,终于开始接触CSS了。
学HTML的时候被老师无数次提及CSS这玩意。感觉这玩意简直万能。
“这个不用太了解,以后学了CSS能弄”
“这个用CSS做的,现阶段我们先不讲”
“你们先用table做,等我们学了CSS...”
“现如今最流行的布局是DIV+CSS...”
“...”
反正就是这样,盼星星盼月亮终于开始学CSS了。
好吧,下面正式开始做笔记
div+css布局的优势:
table布局:
优点:布局容易、快捷、兼容性好
缺点:改动不变、代码冗余、浏览器加载速度变慢、对搜多引擎不友好
div+css:
优点:布局灵活、改动方便
缺点:需要考虑平台的兼容性、对制作人员技能要求较高
无语义标签:
div标签:默认宽度充满整行
span标签:默认宽度跟随文字的变化而变化
CSS概念:
Cascading Style Sheets
是一种用来表现html或xml的页面显示样式的计算机语言,改变可视化标签的样式,做视觉效果相关的东西,美化页面的作用
层叠样式表:
html标记是有层级结构的
*同一个标签有可能被多个样式表同时层叠的设置样式属性
*层叠样式表是有优先级的
作用:美化页面
概念
语法
style标签(非可视化标签)
type是style的类型属性,text/css是它的值,告诉浏览器这里面的文本内容是当做层叠样式表
<style type="text/css">
selector{declaration1;
declaration2;
declaration3;
...
declarationN
}
</style>
注意:style标签写在head标签之间
颜色值
单词
调色:
rgb:r(red)红色 g(green)绿色 b(blue)蓝色
rgb(0~255,0~255,0~255)
比如:红色 rgb(255,0,0)
十六进制:#00~ff 00~ff 00~ff
比如:红色 #ff0000 简写:#f00
rgba:相当于rgb+a[透明度[
比如:rgba(255,210,0,0~1)
字体
font-size:字体大小
font-family:字体
font-style:字体样式(normal默认值,italic斜体,oblique倾斜,inhert继承)
font-variant:以小型大写字体或者正常字体显示文本(normal默认值,small-caps小型大写,inhert继承)
font-weight:字体粗细(normal默认值,100~900整百,bord粗体,border更粗,lighter更细,inhert继承)
font:连写(例: font: 700 italic 39px "宋体")
文本
color:文本颜色
direction:文本方向(ltr从左到右,rtl从右到左,inhert继承)
text-align:对齐元素中的文本(left左,right右,center中,justify两端,inhert继承)
text-decoration:添加修饰(none默认,underline下划线,overline上划线,line-through删除线,blink闪烁,inhert继承)
text-transform:控制元素中的字母(none默认,capitalize大写开头,uppercase仅大写,lowercase仅小写,inherit继承)
unicode-bidi:设置返回文本是否被重写(normal默认,embed嵌套,bidi-override覆盖)
vertical-align:设置元素的垂直对齐(baseline默认,sub下标,super上标,top顶端,text-top父顶端,middle父中部,bottom低顶端,text-bottom父底端,length,%百分比,inherit继承)
white-spaceb:设置元素中空白的处理方式(normal默认,pre保留,nowrap不换行,pre-wrap保留空白,正常换行,pre-line合并空白,inherit继承)
text-indent:首行缩进
line-height:行间距
word-spacing:单词间距
letter-spacing:字符间距
text-shadow:阴影(左右 上下 颜色)
图片背景
background-color 指定要使用的背景颜色
background-position 指定背景图像的位置(值:例:top center;或10% 10%;或10px 10px)
background-size 指定背景图片的大小(值:cover覆盖,contain扩展)
background-repeat 指定如何重复背景图像(值:repeat-x水平,repeat-y垂直,no-repeat不重复)
background-origin 指定背景图像的定位区域 (值:padding-box内边距框,border-box边框盒,content-box内容框)
background-clip 指定背景图像的绘画区域(值:padding-box内边距框,border-box边框盒,content-box内容框)
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动(值:scroll默认,fixed不懂,inherit继承)
background-image: url("#"); 指定要使用的一个或多个背景图像
css三大特性:
覆盖:同标签选择器时,最下面的样式属性会覆盖上面的样式属性
优先级:!important>ID选择器>类选择器>标签选择器>通配符
继承:子元素会继承父元素相关样式,宽高不继承
(cs根据权重决定页面显示何种样式)
CSS整体重点:
选择器
selector:选择目标
标签选择器
标签名{属性名:属性值;}
针对该页面所有的对应的标签,都会受到样式表的影响
class选择器(建议)
.class名{属性名:属性值;}
任何可视化标签元素都可以有class属性,默认没有
一个class属性可以有多个值、多个classa样式(用空格分开)
id选择器(identity 唯一标识)
#id名{属性名:属性值;}
任何标签元素都可以有id属性
如果设置id属性,一定要保证这个属性的值整个页面是唯一的
后代选择器
空格分隔
通过多个选择器空格组合的方式(强烈推荐)
组合选择器(并集选择期)
逗号分隔
命名规范:是由字母数字和横岗组成(半角),例子:head-logo
优先级:id选择器>class选择器>标签选择器
选择器描述的尽量详细一点
元素样式来源
系统自带的样式
不同的标签,根据标签名字的不一样,浏览器给了默认的样式)
外部链接的样式
1、使用link标签href引用,放在head之间。后缀名.css
rel属性必须是stylesheet href代表css的位置
2、使用@import url("地址");(放入style标签内)
内部链接的样式
style标签
优点:方便在页面修改样式
缺点:不利于共享、结构和样式分离不够彻底
内嵌的样式(行内样式)
style="属性名:属性值;属性名:属性值;"
所有可视化标签都可以有style属性,但不建议使用,维护成本高
link标签
引入外联资源
css:<link rel="stylesheet" href="css/style.css">
ico:<link rel="icon" href="favicon.ico" type="image/x-icon>
三个层面设置style如何选择
style属性
直接设置属性值
常用来调试css样式,因为它优先级最高(比id标签还高)
style标签
通过style标签写样式表
用来测试,开发时我们用这种方式,因为不用几个文件来回切换,提升开发效率
link标签引入外联的css文件
单独写css,然后通过link标签href引入进来
项目开发中最常用的方式(推荐)
总结
命名规范
id属性命名规范:驼峰命名法 多个单词后面的单词首字母大写,例:headLogo
class命名规则:
1、反应功能
2、通用性
3、短小精悍
4、全部用小写
5、功能名连接用-
6、不可以用纯数字或者数字开头
通过把样式写到css文件中,最终通过link标签href属性引入外联的css文件
在同样一种选择器的前提之下,有限级问题是就近原则,离目标标签越近,优先级越高
盒子模型
标签分类
块级元素
如:h1-h6、div......
特点;
如果不设置宽度,默认占整行
可以设置宽高
子级默认继承父级宽度
行内元素
如:a、span......
特点:
宽度随内容变化,并且行内元素在一行显示
不可以设置宽和高
行内块元素
如:input、img......
特点:
可以设置宽高
元素在一行显示
css显示模式
元素转化:
display:block(块级显示),inline(行内显示),inline-block(行内块显示);
元素隐藏:
diplay:none(隐藏)
盒子
padding:内边距(div内容到边框的距离)
padding:上下左右px
padding:上下px 左右px
padding:上px 左右px 下px
padding:上px 右px 下px 左px
padding-top:
padding-bottom:
padding-left:
padding-right:
margin:界边距(div与div之间的距离)
居中:margin: 0 auto;(适用于块级定宽元素)
margin:上下左右px
margin:上下px 左右px
margin:上px 左右px 下px
margin:上px 右px 下px 左px
margin-top:
margin-bottom:
margin-left:
margin-right:
border:边框(宽度,样式[solid实体,dashed虚线,dotted点线],颜色)
border-top:
border-bottom:
border-left:
border-right:
overflow:溢出部分处理(值:auto自动,visible默认,scroll滚动条,hidden隐藏多余部分,inherid继承)
标准文档流:
默认的盒子排放标准
特性:
空白折叠、高矮不齐,底边对齐、显示方式(块级、行内)
限制多,不方便布局页面
布局:
脱离标准文档流
方法:
1、浮动
2、绝对定位
3、固定定位
浮动
作用:解决一行显示多个盒子的问题(并且盒子位置可控)
特点:
1、脱离标准流
2、浮动元素会覆盖在标准元素之上
3、浮动找浮动/不浮动找不浮动
4、浮动以后的元素和标准流位置一一对应
5、浮动元素不会影响上面的元素,只影响下面的元素
6、浮动元素会改变显示方式,行内、块级都是一行显示,
注意:是浮动后的显示方式和行内块一样
7、在标准流中不占位置
浮动对页面的影响:
如果父盒子有子盒子,并且父盒子没有设置高度,这时子盒子浮动,那么父盒子的高度就为0;
由于父盒子高度0,下面的元素会自动补位。
清除浮动
claer:both;
1、额外标签
在浮动的盒子下面再放一个标签,这个标签设置clear:both,来清除浮动对页面的影响。
缺点:将来父盒子的高度还是0
a、外部标签:会清除浮动盒子的影响,但是不会撑开父盒子高度
缺点:将来父盒子的高度还是0
b、内部标签:会清除浮动盒子的影响,并撑开父盒子
2、overflow属性清除
浮动盒子的父元素添加overflow:hidden;
3、伪元素清除浮动(j建议用)
.clearfix:after{
content: "";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;
}
伪元素&伪类
伪类:用于像元素添加特殊效果
a:link、a:hover、a:active、a:visited
:link“链接”:超链接点击之前(a标签专用)
:visited“访问过的”:链接呗访问过之后(a标签专用)
:hover“悬停”:鼠标放到标签上的时候
:active“激活”:鼠标点击标签,但是不松手时
:focus是某个标签获得焦点时的样式(比如某个输入框获得焦点)
例:a:link{color:red;}
a:visited{colororange}
a:hover{color:green;}
a:active{color:black;}`
div:hover p{display:block;}
伪元素:在页面上不存在的元素,可以通过伪元素添加上去
例: p:before{content: "H";}(在p标签前面加H)
p:after{content:"d";}
元素的隐藏:
display:none;(隐藏,不占位置)
overflow:hidden;(将超出部分裁剪)
visibility:hidden;(隐藏,但是原页面还保留位置)
定位
清楚默认margin/padding值:
1、*{padding:0px;margin:0px}
2、body,p,h1...{padding:0px;margin:0px}
解决页面上盒子与盒子之间的层叠问题
相对定位、绝对定位、规定定位、静态定位
问题:在页面上有两个盒子,其中第二个盒子将第一个盒子压了一半
清除默认的margin\padding值
1、static(静态的)
position:static;静态定位
所有标准流中的元素都是静态定位(默认)
2、relative(相对的)
position:relative;相对定位
使用的时候要配合:top、left、right、bottom
特点:如果设置了相对定位并且设置了tlrb属性,那么将来盒子会相对于自己原本的位置发生偏移
1.相对于原来位置进行平移
2.设置了相对定位的元素在页面上占据了位置(没有脱离标准文档流)
总结:想当年
3、absolute(绝对的)
position:absolute;绝对定位
使用的时候要配合:top、left、right、bottom
1、如果这个元素没有父元素,将来tlrb时相对于body来定位的。
2、如果这个元素有父元素,但是父元素没有定位,那么这个时候tlrb还是相对于body定位的。
3、如果这个元素有父元素,并且父元素有定位(非static),那么这个绝对定位的元素偏移是以自己的父元素为基础的。
4、绝对定位以后的元素在页面不会占据位置。
总结:看脸
注意:如果小盒子要在大盒子里定位,并且水平居中靠下对齐,先left:50%,再margin:-小盒子宽度一半
重点:将来用的最多的是绝对+相对一起
规范:子绝父相(子元素使用绝对定位,父元素使用相对定位)
4、fixed:固定定位
position:fixed;固定定位
使用的时候要配合:top、left、right、bottom
特点:
1、不管页面多大,tlrb都是相对于浏览器的边框
2、固定元素脱离了标准流,不占标准流的位置
总结:死心眼
z-index显示在哪一层(置顶层显示)
布局
标准文档流、浮动布局、定位布局、table
常见布局
见另一篇文章:CSS基本页面布局布局方式
https://blog.csdn.net/weixin_42588379/article/details/81668014
居中:水平居中、垂直居中
水平居中
1、inline-block和text-align实现
.parent{text-align:center}
.child{display:inline-block}
2、margin:0 auto(块级)
.child{width:200px;margin:0 auto}
3、table实现
.child{display:table;margin:0 auto}
4、绝对定位
.parent{position:relative;}
.child{position:absolute;left:50%;margin-left:-(child的一b半宽)}
垂直居中
vertical-align
针对inline或者inline-block才有效果
绝对定位
.parent{position:relative;}
.child{position:absolute;top:50%;margin-top:-(child的一b半高)}
开发流程
1、设计师设计出来图片
2、确实网站的结构
wx:凡是与wx相关的文件都放在wx这个文件夹里
css:所有的css文件都放在这个文件夹里
js:所有的js文件都放在这个文件夹里
images/image:存放所有的图片
3、决定页面的开放方式
从上到下依次编写(符合认知)
从模块化的角度来分析(适合有经验的开发人员)
CSS初始化
指定编码:@charset "utf-8";
CSS文件压缩:响应速度快
/*1、清楚标签的margin和padding*/
html,body,ul,li,p,h1,h2,h3,h4,h5,h6,form,img{margin:0;padding:0}
/*2、清除img的边框*/
img{border:0}
/*3、清除li标签之前的小圆点*/
ul{list-style-type:none}
/*4、给页面设置一个统一的字体大小和颜色,还要设置body的背景颜色*/
body{font:12px;color:#433;font-family:"宋体"background:#fff}
/*5、清浮动*/
.clearfix:after{content: "";height: 0;line-height: 0;display: block;clear: both;visibility: hidden;}.clarfix{zoom:1}
/*6、a标签设置颜色,去掉下划线,以及a:hover*/
a{color:#333;text-decoration:none}
a:hover{color:#777}
/*7、设置浮动*/
.fl{float:left}
.fr{float:right}
添加地址栏小图标
<link rel="shortcut/icon" type="image/x-icon" href=".../.ico">
通栏:默认占浏览器一整行
版心:页面中用来展示内容的固定宽
背景图一般为1px宽 repeat-x 铺满
border-radius边框的圆角
transparent透明色
精灵图(sprite)
what?
就是将页面上一些较小的图片放在一张大图上面,也叫雪碧图、雪碧技术。css sprite
why?
减少图片请求次数,减轻服务器压力
how to use?
一张大图上面有很多小图,怎样将小图拿出来?
1、如果我们需要的图在精灵图上,必须了解这个图片的大小,以及在精灵图上的位置
2、容器的大小和要显示的图的大小一样
3、将精灵图设置为容器的背景,并且根据图片所在位置进行平移
how to make?
1、必须是一些小图片
2、多个小图之间一定要留有一定的间隙
3、精灵图的大小一定要大于所有图中最大的那个,方便将来添加其他图
4、一个像素的背景图不要放在精灵图上面
滚动条样式
只适用于webkit核心浏览器
::-webkit-scrollbar 滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)。
::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式
例:
.class::-webkit-scrollbar{width: 8px;height: 20px;}
.class::-webkit-scrollbar-thumb{background-color: #C0BEBC;border-radius: 5px;}
.class::-webkit-scrollbar{display: none;}
其他:
opacity透明度
cursor鼠标样式
cursor: pointer;鼠标样式(可点击的)[扩展,取值很多]
max-width;最大宽度
min-width;最小的宽度
max-height;最大高度
min-height;最小高度
outline; 设置轮廓(none隐藏)[类似border,取值方式一样]
resize: none;隐藏多行文本框标识
标准盒子模型:width和height指的是内容区域的宽高
box-sizing: content-box;/*标准盒子模型*/
IE盒子模型:width和height指的是内容区域+border+padding的宽高
box-sizing: border-box;/*ie盒子模型*/