本文已参与「新人创作礼」活动，一起开启掘金创作之路。
CSS是层叠样式表(Cascading Style Sheets)的简称
有时我们也会称之为CSS样式表或级联样式表
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)
以及版面的布局和外观显示样式
总结:
1.HTML主要做结构,显示元素内容
2.CSS美化HTML,布局网页
3.CSS最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离
使用HTML时,需要遵从一定的规范,CSS也是如此 要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则
CSS规则由两个主要的部分构成:选择器以及一条或多条声明
CSS要写在<style></style>标签中 <style></style>写在<head></head>中
p {
color: red;
font-size: 12px;
}
给所有P元素修改成红色
选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
属性和属性值以"键值对"的形式出现
属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
属性和属性值之间用英文":"分开
多个"键值对"之间用英文";"进行区分
CSS选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来
选择器分类
选择器分为基础选择器和复合选择器两个大类
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
作用
标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签
优点 能快速为页面中同类型的标签统一设置样式
缺点 不能设计差异化样式,只能选择全部的当前标签
类选择器
如果想要差异化选择不同的标签,单独选一个或者几个标签,可以使用类选择器
.类名 {
属性1: 属性值1;
属性2: 属性值2;
}
例如,将所有拥有的red类的HTML元素均为红色
.red {
color: red;
}
结构需要用class属性来调用
<div class='red'>变红色</div>
注意
1.类选择器使用"."进行标识,后面紧跟类名(自定义)
2.长名称或词组可以使用中横线来为选择器命名
3.不要使用纯数字、中文等命名,尽量使用英文字母来表示
4.命名要有意义,尽量使别人一眼就知道这个类名的目的
5.命名规范:(Web前端开发规范手册.doc)
类选择器-多类名
可以给一个标签指定多个类名,从而达到更多的选择目的 这些类名都可以选出这个标签
多类名使用方式
1.在标签class属性中写多个类名
2.多个类名中间必须用空格分开
<div class="red box">调用red类和box类</div>
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义
#id名 {
属性1: 属性值1;
属性2: 属性值2;
}
注意:id属性只能在每个HTML文档中出现一次
按照语法规则 id不能重复
但是id重复 CSS样式表都可以生效
id选择器和类选择器的区别
1.类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用
2.id选择器好比人的身份证号码,全中国是唯一的,不得重复
3.id选择器和类选择器最大的不同在于使用次数上
4.类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和javascript搭配使用
通配符选择器
在CSS中,通配符选择器使用"*"定义,它表示选取页面中所有元素(标签)
* {
属性1: 属性值1;
属性2: 属性值2;
}
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用,例如(清楚所有的元素标签的内外边距)
* {
margin: 0;
padding: 0;
}
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)
字体系列
CSS使用 font-family属性定义文本的字体系列
p { font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft Yahei","微软雅黑";}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号
尽量使用系统默认自带字体,保证在任何用户浏览器中都能正确显示
最常见的几个字体:body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}
页面中的主要内容都是写在body里 所以一般直接在body里设置字体
如果第一个字体用户没有安装就用第二个字体以此类推
如果都没有安装就用浏览器默认字体
字体大小
CSS使用font-size属性定义字体大小
p {
font-size: 20px;
}
px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
可以给body指定整个页面文字的大小
标题标签比较特殊,需要单独指定文字大小
字体粗细
CSS使用font-weight属性设置文本字体的粗细
normal 默认值(不加粗的)
bold 定义粗体(加粗的)
100-900 400等同于normal,而700等同于bold 注意这个数字后面不跟单位
文字样式
CSS使用font-style属性设置文本的风格
p {
font-style: normal;
}
normal 默认值,浏览器会显示标准的字体样式 font-style: normal;
italic 浏览器会显示斜体的字体样式
注意:平时很少给文字加斜体,反而要给斜体标签<em></em><i></i>改为不倾斜字体
字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码
body {
font: font-style font-weight font-size/line-height font-famlily; /风格,粗细,行高,字体/
}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性(文字大小和字体),否则font属性将不起作用
CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
文本颜色
color属性用于定义文本的颜色
div {
color: red;
}
表示方式 属性值
预定义的颜色值 red,green,blue,pink
十六进制 #FF0000,#FF6600,#29D794
RBG代码 rgb(255,0,0)或rgb(100%,0%0%)
开发中最常用的是十六进制
对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
dev {
text-align: center;
}
属性值 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐
装饰文本
text-decoration属性规定添加到文本的修饰 可以给文本添加下划线、删除线、上划线等
div {
text-decoration: underline;
}
属性值 描述
none 默认 没有装饰线(最常用)
underline 下划线 链接a自带下划线(常用)
overline 上划线(几乎不用)
line-through 删除线(不常用)
文本缩进
text-indent属性用来指定文本的第一行缩进,通常是将段落的首行缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进
div {
text-indent: 10px;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值
p {
text-indent: 2em;
}
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小
行间距
line-height属性用于设置行间的距离(行高) 可以控制文字行与行之间的距离\
p {
line-height: 26px;
}
CSS的三种样式表
按照CSS样式书写的位置(或者引入的方式),CSS可以分为三大类
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式)
内部样式表
内部样式表(内嵌样式表)是写到html页面内部 是将所有的CSS代码抽取出来 单独放到一个<style>标签中
<style></style>
<style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中
通过此种方式,可以方便控制当前整个页面中的元素样式设置
代码结构清晰,但是并没有实现结构与样式完全分离
使用内部样式表设定CSS,通常也被称为嵌入式引入 这也是练习时常用的方式
行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式 适合于修改简单样式
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
style其实就是标签的属性
在双引号中间,写法要符合CSS规范
可以控制当前的标签设置样式
由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
使用行内样式表设定CSS,通常也被称为行内式引入
外部样式表
实际开发都是外部样式表 适合于样式比较多的情况 核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用
引入外部样式表分为两步:
1.新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中
2.在HTML页面中,使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
属性 作用
rel 定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件
href 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式
复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素 其写法就是把外层标签写在里面,内层标签写在后面,中间用空格分隔 当标签发生嵌套时,内层标签就成为外层标签的后代
语法:
元素1 元素2 { 样式声明 }
上述语法表示选择元素1里面的所有元素2(后代元素)
例如:
ul li { 样式声明 } /* 选择ul里面所有的li标签元素*/
元素1和元素2中间用空格隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可
元素1和元素2可以是基础选择器
子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素 简单理解就是选亲儿子元素\
语法:
元素1 > 元素2{ 样式声明 }
上述语法表示选择元素1里面的所有直接后代(子元素)元素2
例如:
div > p { 样式声明 } /* 选择 div里面所有最近一级p标签元素 */
元素1和元素2中间用大于号隔开
元素1是父级,元素2是子级最终选择的是元素2
元素2必须是亲儿子,其孙子、重孙之类都不归他管.也可以叫他亲儿子选择器
并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式 通常用于集体声明
并集选择器是各种选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分
语法:
元素1,元素2 { 样式声明 }
上述语法表示选择元素1和元素2
例如:
ul,div { 样式声明 } /* 选择ul 和 div标签元素*/
元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
注: 约定的语法规范,并集选择器竖着写 最后一个选择器不要加逗号
伪类选择器 伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素 伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover、:first-child
链接伪类选择器 a:link 选择所有未被访问的链接 a:visited 选择所有已被访问的链接 a:hover 选择鼠标指针位于其上的链接 a:active 选择活动链接(鼠标按下未弹起的链接)
链接伪类注意事项 1.为了确保生效,要按照LVHA的顺序声明:link - :visited - :hover - :active 2.因为a链接在浏览器中具有默认样式,所以实际工作中都需要给链接单独指定样式
:focus 伪类选择器用于选择获得焦点的表单元素 焦点就是光标,一般情况类表单元素才能获取,因此这个选择器也主要针对于表单元素来说 例如 input:focus { background-color:yellow; }
元素显示模式
网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局网页
元素显示模式就是元素(标签)以什么方式进行显示,比如
块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素
块级元素的特点:
①自己独占一行
②高度,宽度、外边距以及内边距都可以控制
③宽带默认是容器(父级宽度的)100%
④是一个容器及盒子,里面可以放行内或者块级元素
注意:
文字类的元素内不能使用块级元素
<p>标签主要用于存放文字,因此
里面不能放块级元素,特别是不能放<div>
同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素 有的地方也将行内元素称为内联元素
行内元素的特点:
①相邻行内元素在一行上,一行可以显示多个
②高、宽直接设置是无效的
③默认宽度就是它本身内容的宽度
④行内元素只能容纳文本或其他行内元素
注意:
链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签----<img />、<input />、<td>,它们同时具有块元素和行内元素的特点
行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙 一行可以显示多个(行内元素特点)
②默认宽度就是它本身内容的宽度(行内元素特点)
③高度、行高、外边距以及内边距都可以控制(块级元素特点)
元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围
转换为块元素: display:block;
转换为行内元素: display:inline;
转换为行内块: display:inline-block;
技巧:单行文字垂直居中
解决方案 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
简单理解:行高的上空隙和下空隙把文字挤到中间了 如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下
背景颜色
background-color属性定义了元素的背景色
background-color:颜色值;
一般情况下元素背景颜色默认值是transparent(透明),可以手动指定背景颜色为透明色
背景图片
background-image属性描述了元素的背景图像 实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种应用场景)
background-image : none | url(url)
参数值 作用
none 无背景图(默认的)
url 使用绝对或相对地址指定背景图像
背景平铺
如果需要在HTML页面上对背景图像进行平铺,可以使用background-repeat属性
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数值 作用
repeat 背景图片在纵向和横向上平铺(默认的)
no-repeat 背景图像不平铺
repeat-x 背景图像在横向平铺
repeat-y 背景图像在纵向平铺
背景图片位置
利用background-position: x y;
参数代表的意思是:x坐标和y坐标 可以使用方位名词或者精确单位
参数值 说明
length 百分数 | 由浮点数字和单位标识符组成的长度值
position top | center | bottom | left | centet | right 方位名词
1.参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致
如果只指定了一个方位名词,另一个省略,则第二个值默认居中对齐
2.参数是精确单位
如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标
如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
3.参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值是y坐标
背景图像固定(背景附着)
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment后期可以制作视差滚动的效果
background-attachment : scroll | fixed (scroll背景滚动 fixed背景固定)
参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定
背景复合写法
为了简化背景属性的代码,可以将这些属性合并简写在同一个属性background中 从而节约代码量
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top;
这是实际开发中 更提倡的写法
背景色半透明
background: rgba(0, 0, 0, 0.3);
最后一个参数是alpha透明度,取值范围在0~1之间(0不透明 1完全透明)
习惯把0.3的0省略掉,写为background: rgba(0, 0, 0, .3);
注意:背景半透明是指盒子背景半透明,盒子里面内容不受影响
CSS3新增属性,是IE9+版本浏览器才支持的
现在实际开发不太关注兼容性写法,可以放心使用
CSS有三个非常重要的特性:层叠性、继承性、优先级
层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式 层叠性主要解决样式冲突的问题
层叠性原则:
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
样式不冲突,不会层叠
继承性
CSS中的继承:子标签会继承父标签的某些样式,比如文本颜色和字号
恰当地使用继承可以简化代码,降低CSS样式的复杂性
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
行高的继承
body {
font:12px/1.5 Microsoft YaHei ;
}
写在一行的规则:
font: font-style font-weight font-size/line-height font-famlily; /风格,粗细,行高,字体/
行高可以跟单位也可以不跟单位
如果子元素没有设置行高,则会继承父元素的行高为1.5
此时子元素的行高是:当前子元素的文字大小*1.5
body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
优先级
当同一个元素指定多个选择器,就会有优先级的产生
选择器相同,则执行层叠性
选择器不同,则根据选择器权重执行
选择器 选择器权重
继承或者* 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important 重要的 ∞无穷大
优先级注意点:
1.权重是有4组数字组成,但是不会有进位
2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推
3.等级判断从左向右,如果某一位数值相同,则判断下一位数值
4.可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器为100,行内样式表为1000,!important无穷大
5.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0 (重要)
权重叠加如果是复合选择器,则会有权重叠加,需要计算权重
权重虽然会叠加,但是永远不会有进位
