个人前端学习进程
C S S 篇
css是层叠样式表的简称。也称之为css样式表或级联样式表。也是一种标记语言。主要用于设置html页面中的文本内容(字体,大小,对齐方式等),图片外形(宽高,边框样式,边距等)以及版面的布局和外观显示样式。简而言之,css美化html文件,使布局变得简单。
**css语法规范: 选择器 { 属性:值;}**属性值,冒号后加空格,用展开式。
<!-- p为body中的一个段落标签 -->
<style>
p {
color(属性): red(值);
font-size(属性): 12px(值);
}
</style>
选择器用于指定标签,表明在哪个标签上修改,style标签被head标签包围。
选择器
选择器分为基础选择器和复合选择器两大类
基础选择器
包括标签选择器,类选择器,id选择器和通配符选择器
标签选择器
是指用HTML标签名称作为选择器,按标签名称分类,为界面中所有该标签指定统一的css样式(其缺点为不能设计差异化样式,只能选择全部的标签)
类选择器
实现差异化选择,用class属性来调用,是开发最常用的方法
<!-- 这个red是自己取的名字 -->
.red{
color:red;
}
<p class="red">
这个段落变成了红色。
</p>
<p>
这个段落没有变化
</p>
先用 一个点号 . 定义样式,然后在需要的地方用class调用。类名是自己命名的,但不能用原有标签语如p div等,也不能用中文,尽量不用数字。一般有约定熟成的定义名,例如头部为header,热点为hot(用英语)
类选择器的多类名
1.在class标签中可以写多个类名,如果发生冲突(如颜色)那以后面那个为准。
<p class="red font">这个段落变了颜色与字号,red 和font 是两个不同的类名,两个类名一定用空格隔开</p>
多类名可以把标签元素相同的样式放在一个部分,标签可以调用公共的类,然后再去调用自己独有的类。从而节省css代码,统一修改更方便。
id选则器
用#id名定义 语法规范:
#id名{
属性:属性值;
}
#red{
color: red;
}
<p id="red">这个字段变成了红色,当这个段使用了这个id调用,别的标签就不能调用此id调用了</p>
类选择器可以多次使用,但是id选择器只能使用一次。界面修饰常用类选择器,id选择器常与JavaScript搭配使用。
通配符选择器
用 * 定义,语法规范
*{
color:red;
}
通配符选择器不需要调用,写出就会将页面中所有的标签修改样式。用于特殊情况
字体属性
字体系列
css中用font-family属性定义文本的字体系列,例如Microsoft YaHei(微软雅黑)。
一般情况下,由多个单词组成的字体,加 ’ ’ ,可使用多个字体,优先使用前面的,各种字体之间用英文的逗号分开。
<body font-family:'Microsoft YaHei',tahoma,arial;>
</body>
字体大小
css用font-size属性定义字体大小
p{
font-size: 20px;
}
px(像素)是我们网页最常用的单位,可以在body中指定整个页面文字的大小。标题标签比较特殊,得特殊给标题修改。
字体粗细
css用font-weight属性定义文字粗细。
.bold{
font-weight: 700;<!-- 700为加粗 -->
}
.normal{
font-weight: 400;<!-- 400为正常 -->
}
数字的范围为100—900.表示粗细。
文字样式
css用font-style属性定义文字的样式(例如倾斜)normal是最常用的字体样式。
p{
font-style: normal;
}
字体复合属性(字体连写)
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family:'Microsoft yahei';
可简化为:
font: italic 700 16px 'Microsoft yahei';
但是注意顺序不能颠倒,必须按照font:font-style font-weight font-size/line-height font-family;的顺序
口诀:类粗大家,有大有家(类型,粗细,大小,家族)。
不需要的属性可以省略,但必须保留 font-size和font-family属性,否则font属性将不起作用。
如果出现font:14px/1.5 ‘Microsoft yahei’;那代表文字大小为14px行高为文字大小的一点五倍
文本属性
文本颜色
color属性用于定义文本颜色
1.用预定义的颜色值如red,pink
2.用16进制如#FF0000
3.RGB代码:rgb(255,0,0)或rbg(100%,0%,0%)
实际开发中16进制最常用
对齐文本
text-align属性用于设置元素内文本内容的水平对齐,属性值有 left 左对齐,right 右对齐,center 居中对齐。
装饰文本
text-decoration属性规定添加到文本的修饰,可以加下划线,删除线,上划线
none 无装饰线(默认); underline 下划线; overline 上划线; line-through删除线;
超文本连接默认有下划线,这时我们常用none去除下划线。
文本缩进
text-indent属性用于指定文本的第一行缩进,通常是将段落的首行缩进。
语法:text-indent: 20px;
em是一个相对单位,就是一个当前文字的大小。
text-indent:2em;
行间距
line-heigh属性用于设置行间的距离
语法:line-height:26px
行间距来自于 上间距 加文字高度加 下间距
让行高等于盒子的高度可以实现文字垂直居中。
字间距
word-spacing:以每一个单词中间的空格为缩进。
letter-spacing:以每个字符为缩进。
css引入方式
内部样式表(嵌入式)
在html页面内部写样式,但是需要单独写到style标签中
这种结构方便控制当前整个页面中的元素样式设置,代码结构清晰,但是没有实现结构与样式的完全分离。
行内样式表(行内式)
在元素标签内部的style属性中设定css样式。适合于简单形式
<p style="color: red; font-size: 12px;">这是一个行内样式表</p>
在双引号中间,写法要符合css语法规范
控制当前标签设置样式
书写繁杂,未实现结构与样式相分离,代码简单少量时可考虑使用。
外部样式表(链接式)
实际开发都是外部样式表,适合于样式比较多的情况。
核心是将样式单独写到css文件中,之后把css文件引入到HTML文件中,在css文件里面只有样式没有标签
用 < link >标签引入这个css文件
语法:< link rel=“stylesheet” href=“css的文件路径” >
stylesheet意为样式表
Emmet语法
它可以提高HTML文件的编写速度。
html文件
1.生成标签可以 直接输入标签名然后加Tab键 例如:div然后按Tab键,生成< div >< /div >(回车也可以)
2.要生成多个相同标签,加上*就可以了,例如div *3就可以生成3个div标签。
3.如果有父子级关系的标签,可用 > 例如 ul > li 就可以了。
4.如果有兄弟关系的标签,用+号,例如,div+p。
5.如果生成带有类名或者id名字的,直接写 .xxx 或者#xxx就可以了。
6.如果生成的div类名是有顺序的,可以用自增符号$
7.如果要在生成的标签内部写内容可以用{xxx}表示
例如p.aKaTeX parse error: Expected 'EOF', got '#' at position 1: #̲b{c}*5可生成
<p class="a1" id="b1">c</p>
<p class="a2" id="b2">c</p>
<p class="a3" id="b3">c</p>
<p class="a4" id="b4">c</p>
<p class="a5" id="b5">c</p>
css文件也可以采用简写的方法
css的复合选择器
1.后代选择器
又称为包含选择器,可以选择父元素里面的子元素,语法为将外层标签写在前面,空格隔开后内层标签写在后面
ol li{color: red;}
ol li a{color: red;}
还可以和类选择器一起用
.nav ol li{color:red;}
子选择器
只能选择作为某元素最近一级的子元素,语法为 元素1>元素2{样式声明}
表示选择元素1里面所有的子元素2.
div>p{color: red;}/*选择div里面的最近一级p元素*/
并集选择器
可以选择多组标签,同时将它们定义为相同样式。语法为 元素1 , 元素2{样式声明}
任何形式的选择器都可以用并集选择器
伪类选择器
用于向某些元素添加特殊效果,比如鼠标滑动到链接上链接就会变色
伪类选择器用冒号:来表示如 :hover
链接伪类选择器
1.未访问链接 a : link{样式声明}
2.已访问过链接 a:visited{样式声明}
3.鼠标经过的链接 a:hover{样式声明}
4.按下没松开的链接 a:active{样式声明}
书写需按照上述顺序书写!!( l v h a )
:focus
针对于input元素,用于选取获得焦点的表单元素(例如输入框选定时,框框变成蓝色了)
写法 input:focus{样式声明}
css的元素显示模式
元素以什么方式进行显示,比如< div >自己独占一行,比如一行可以放多个< span >
html元素一般分为块元素和行内元素两种。
块元素
常见块元素有< h1 >-< h6 >,< p >,< div >,< ul >,< ol >,< li >等,其中< div >为最典型的块元素。
块元素的特点:
1.独占一行。
2.高度,宽度,外边距,内边距都可以自己控制。
3.宽度默认是容器的100%。
4.是一个容器及盒子,里面可以放行内或者块级元素。
5.文字类元素内不能使用块元素,例如p标签中不能放div标签,同理,h1-h6标签中不能放块元素。
行内元素
常见有< a >,< strong > ,< b > ,< span >等
行内元素的特点:
1.相邻行内元素在一行上,一行可以显示多个。
2.高,宽的直接设置是无效的。
3.默认宽度为它本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。
5.链接里面不能再放链接
6.a里面可以放块级元素,但是给a转换一下块级模式最安全。
行内块元素
在行内元素中1有几个特殊的标签,< img/ >,< input/ >,< td/ >,它们同时具有块元素和行内元素的特点。
行内块元素的特点:
1.和相邻行内块元素或者行内元素在一行上,但是它们之间会有空白间隙,一行可以显示多个。
2.默认宽度高度就是它本身内容的宽度。
3.高度,行高,外边距,内边距都可以控制。
元素显示模式转换
一个模式需要另外一种模式的特性,比如想增加链接a的触发范围。
转化为块元素display:black; (display显示 black块)
转换为行内元素display:inline;
转换为行内块元素display:inline-block;
CSS的背景属性
通过背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色,背景图片,背景图片位置,背景图像固定等。
一般情况下,元素背景颜色默认值是transport(透明的)
背景颜色
语法 background-color:颜色值;
背景图片
background-image属性描述了元素的背景图像。实际开发中常见于logo或者一些装饰性小图片,还有一些超大性背景图片,优点是便于位置控制。
语法 background-image :url( 图片位置 )
背景平铺
用background-repeat属性控制平铺
语法: background-repeat:属性值;
属性值:no-repeat背景图像不平铺(图片只显示一次) repeat-x背景图像在横向上平铺 repeat-y背景图像在纵向平铺 repeat横纵向平铺(默认)
背景图片位置显示
利用background-position属性控制图片在背景中的位置
语法: background-position:x y;
参数代表的意思为: x坐标和y坐标。可以用方位名词或者精确单位
参数值为精确单位 坐标为百分数,由浮点数和单位标识符组成的长度值。
参数为位置坐标 横坐标有left center right 纵坐标有 top center bottom。
如果参数为方位,则两个值前后顺序无关,left top和top left表示意思一样。如果只指定了一个方位名词,则第二个值默认为居中。
如果参数是精确单位, 前面的是x轴,表示据左边距的距离,后边的是y轴,表示据顶部的距离,如果只指定一个数值,那一定是x的值,y的值默认为居中。
也可以使用混合搭配,第一个一定是x第二个一定是y
背景图像固定(背景附着)
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
后期可以实现视差滚动的效果。
语法: background-attachment:scroll 或者 fixed
scroll代表背景图像是随着对象内容滚动,fixed表示背景图像固定,默认为scroll滚动。
背景的复合写法
习惯约定的顺序为: background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置。
背景色半透明
background:rgba(0,0,0,0.3)
其中,第一个参数代表红色,第二个代表绿色,第三个代表蓝色,第四个为透明度取值范围为0-1,1为100%。
背景色半透明,内容不变。
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色/十六进制/rgb代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 背景平铺 | repeat/ no-repeat/ repeat-x/ repeat-y |
background-position | 背景位置 | 精确数,方位名词。 |
background-attachment | 背景附着 | scroll(背景滚动) fixed(背景固定) |
背景半透明 | 背景半透明 | background:rgba(0,0,0,0.3) |
CSS的三大特性
层叠性,继承性,优先级。
层叠性
相同的选择器给相同的样式,此时一个样式会覆盖另一个样式。
样式冲突,执行后面那个。
样式不冲突,不会出现覆盖问题,只有相同样式会出现覆盖现象。
继承性
子标签会继承父标签的某些性质,例如一个div包含了一个p 修改div标签的性质,p也会继承div的样式。
一般而言 text- font- line- 这些元素开头的样式可继承,color也可以继承。
优先级
当元素有多个选择器,就会出现优先级的现象。
如果选择器相同,则执行层叠性。
选择器不同,更具选择器权重执行
选择器 | 选择器权重 |
---|---|
继承或者通配符* | 0,0,0,0 |
元素选择器(标签选择器) | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
样式后面加 !important | 无穷大 |
简单理解style="" > id > 类 > 元素(标签)> 继承或 *
注意继承出现的情况,父标签选择器权重可能很高,子元素继承父元素的性质,但是权重很低
看标签执行哪个样式,主要看标签是否被直接选择。
如果是复合选择器,会出现权重叠加的问题,需要叠加权重,范围越小(越精确)权重越高,权重叠加不会进位。
例如 :
div ul li 权重为0,0,0,3(三个标签选择器权重相加)
.nav ul li 权重为0,0,1,2(一个类选择器,两个标签选择器)
a:hover权重为0,0,1,1(一个标签选择器,一个伪类选择器)
盒子模型
页面布局的三大核心为盒子模型,浮动,定位。
网页布局的过程:
1.准备好网页元素,以及盒子
2.利用css设置好盒子的样式,摆放到相应位置
3.往盒子里装内容
其中第二条为网页布局的核心
盒子模型的组成
border边框 content内容 padding内边距 (内容与边框之间的距离) margin外边距(盒子与盒子之间的距离)
边框
边框有三个组成,边框宽度(粗细), 边框样式(虚线实线), 边框颜色
语法: border :border-width
属性 | 作用 |
---|---|
border-width | 边框粗细,单位为px |
border-style | 边框样式,重点记住solid实线,dashed虚线,dotted点线 |
border-color | 边框颜色 |
边框简写:border:1px solid red;(没有顺序)
边框还可以修改上下左右四个边,例如border-top就是上边框同理有 bottom left right
表格的细线边框
在设置表格的时候,会出现两个单元格的边框挤在一起的情况,这样的话边框线就会被变成两倍粗
border-collapse属性控制浏览器绘制表格的方式。它控制相邻单元格的边框。
语法: border-collapse:collapse;
collapse单词是合并的意思,border-collapse:collapse;表示将相邻边框合并在一起。
注意盒子的大小会被边框影响,例如原本200px的正方形盒子,在加了边框后,会变大。
盒子内边距(内容与边框的距离)
padding属性用于设置内边距
padding-top上内边距
padding-bottom下内边距
padding-left左内边距
padding-right右内边距
简写 以空格隔开, padding:后面一个值a,代表上下左右都有边距a。后面两个值a,b,代表上下边距为a左右边距为b。后面三个值a,b,c上为a,左右为b,下为c。四个值时,以顺时针(上右下左)分别分配abcd
padding会影响盒子的实际大小。
例如盒子是200px的正方形,加20px的边框,显示的是240的正方形。
解决方案:用盒子大小减去两倍边框大小。
padding的合理运用,当盒子中字数不一样时可以不设置盒子的原本宽度,用内容和padding撑开盒子。
当盒子没有被指定height和width时,盒子不会被撑开。
外边距
margin属性用于设置外边距,即控制盒子与盒子之间的距离
同理,也有margin-top只控制上边距…简写也一样
外边距可以让块级盒子水平居中,但是必须满足
1.盒子必须有宽度。
2.盒子左右外边距都设置为auto(自动)。
若要实现行内元素或者行内块元素水平居中,给其父元素添加 text-align:center即可。
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并,不是取两者相加,而是取其中最大者。
解决方案:尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷:
对于两个嵌套的父子关系的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:1.可以为父元素定义上边框。2.可以为父元素定义上外边距。3.可以为父元素添加overflow:hidden
去除内外边距
例如随便在body里面加入内容,这个内容与最左上角总会有距离,这是网页元素默认的内外边距,而且不同的浏览器默认的也不一样。我们在布局前,首先要清除网页元素的内外边距。
常用解决
*{
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}
这也是css的第一行代码。