CSS笔记
1.CSS样式规则
选择器{ 属性:值;}
1 | eg: h1{color:red;font_size:25px} |
在上述样式规则中:
1.选择器用于指定CSS样式作用的HTML对象,花括号内是对对象作用的具体格式
2.属性和属性值以键值对的形式出现
3.属性是对具体对象设置的样式属性,如字体大小,字体颜色
4.属性和属性值之间用英文的:隔开
5.多个键值对之间用英文;隔开
2.CSS字体样式属性
font-size:字体大小
font-size用于设置字体字号,该属性可以使用相对长度,也可以使用绝对长度单位。其中相对长度单位更常见,推荐使用像素单位px
相对长度单位
- em:相对于当前对象内文本的字体尺寸
- px:像素
绝对长度单位
- in:英寸
- cm:厘米
- mm:毫米
- pt:点
font-family:字体
font-family用于设置字体。例如将网页中所有段落文本字体设置为微软雅黑,可以用如下CSS样式代码
1 | <html> |
常用技巧
- 现在网页普遍使用14px。
- 尽量使用偶数数字字号,某些老浏览器支持奇数有bug。
- 各种字体之间必须使用英文逗号隔开。中文字体需要加引号,英文字体一般不加引号。当需要设置英文字体时,应位于中文字体前面。
- 如果字体中包含空格,#,$等特殊符号,则该字体必须加英文单或双引号。
- 尽量使用系统默认字号,保证在任何用户的浏览器中都能正确显示。
CSS Unicode字体
在CSS中设置字体字体名称,是可以使用中文的,但当编码文件不匹配时会出现乱码的错误。可以使用Unicode编码来避免这种错误。
可以用escape()来测试是什么字体
font-weigth:字体粗细
字体加粗可以使用b和strong标签外,还可以使用CSS来实现
fong-weight可用于定义字体粗细,其可用属性值有:normal(400),bold(700),bolder,lighter,100-900(100的整数倍)
1 |
|
font-style:字体风格
font-style属性用于定义字体风格,如设置斜体,倾斜,或正常字体。其可用属性值如下:
- normal:默认值,显示正常字体
- italic:显示斜体字样
- oblique:显示倾斜字体
tip::平时我们很少使用斜体字样,反而喜欢把斜体标签(i,em)改为普通模式
1 |
|
font:综合设置字体样式(重点)
font属性对字体样式进行综合设置,其基本语法格式如下:
选择器{font:font-style font-weight font-size/line-height font-family;}
使用font属性时,必须按照上面顺序写,不能更换顺序,各属性以空格隔开
注意:其中不要的属性可以省略,但必须保留font-size和font-family,否则font属性将不起作用
3.CSS注释
语法:/* 要注释的内容*/
subline中快捷键:Ctrl+/
4.选择器
想将CSS样式用于特定的HTML元素,首先需要找到该元素。在CSS中,执行这一任务的样式规则被称为选择器(选择符)。
标签选择器
标签选择器是指HTML标签作为选择器,按标签名分类,为页面中某一类标签指定统一的CSS样式。其基本语法如下:
1 | 标签名{属性1:值1;属性2:值2;属性2:值3;} |
优点:快速为页面中同类型标签统一格式
缺点:不能设计差异化格式
类选择器
类选择器用"."进行标识,后面紧跟类名。其基本语法格式:
1 | .类名{属性1:值1;属性2:值2;属性2:值3;} |
类选择器的最大优势是可以为元素对象定义单独或相同的样式。
1 |
|
tips::
长名称或词组可以用中横线来命名
不建议用下划线来命名CSS选择器
尽量不要用数字,中文命名
多类名选择器
我们可以给标签指定多个类名
1 |
|
tips::
样式显示效果和HTML元素中类名先后顺序无关,与CSS样式书写的上下顺序有关
各类名之间用空格隔开
ID选择器
对比类选择器
1 | #名字{属性1:值1;属性2:值2;属性2:值3;} |
ID选择器与类选择器的区别
W3C规定,同一个页面内,不允许有相同名字的ID出现,当时允许相同名字的class
通配符选择器
通配符选择器用"*"号表示,其基本语法如下
1 | * {属性1:值1;属性2:值2;属性2:值3;} |
伪类选择器
伪类选择器用于向某些选择器中添加特殊效果。比如给链接添加特殊效果,也可以选择第N个元素
链接伪类选择器
1 | :link 未访问的链接 |
注意写的时候,他们的顺序不要颠倒,记忆方法:love hate
在实际中,我们可以简写链接伪类选择器(去除一些不要的功能)
1 |
|
结构(位置)选择器(CSS3)
1 | :first-child 选取属于其父类元素的首个子元素的指定选择器 |
目标伪类选择器(CSS3)
:target 目标伪类选择器,选择当前活动的目标元素
1 |
|
5.CSS外观属性
color:文本颜色
color属性用于定义文本颜色,其取值有如下三种:
1.预定义颜色值
2.十六进制
3.RGB代码,如红色可表示为RGB(255,0,0)或rgb(100%,0%,0%)(注意:百分号不可以省略)
1 |
|
line-height:行间距
line-height用于设置行高,常用属性值单位有三种:像素(px)相对值(em)百分比(%)。一般情况下,行距比字号大七八像素即可
text-align:对齐方式
用于设置文本的水平对齐,其属性值如下:
left: 左对齐(默认)
center:居中对齐
right:右对齐
text-indent:首行缩进
用于设置首行文本的缩进,其属性值可为不同单位的数值,em字符宽度的倍数,或者相对浏览器宽度的百分比。允许设置负值,推荐用👍em作为单位(1em就是一个字的宽度)
letter-spacing:字间距
用于定义字间距,其属性值可为不同单位的数值,允许使用负值,默认为normal
word-spacing:单词间距
用于定义英文单词之间的间距,对中文无效。
与letter-spacing的区别:都可对英文进行设置,letter-spacing设置的是字母之间的间隔,而word-spacing是单词之间的间隔
颜色半透明(CSS3)
在CSS3中可以用半透明的文字颜色,语法格式如下:
color:rgba(r,g,b,a) a取值在0,1之间
文字阴影(CSS3)
text-shadow:水平位置,竖直位置,模糊距离,阴影颜色;
- h-shadow:必须,水平阴影的位置,可以为负值
- v-shadow:必须,竖直阴影的位置,可以为负值
- blur:可选,模糊的距离
- color:可选,阴影的颜色
6.引入CSS样式表
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head中,并且用于style定义。style标签可以放在HTML文档任何位置
内行式(内联式)
通过标签的style属性来设置元素的样式,其基本语法格式如下:
1 | <标签 style="属性一:属性值一;属性二:属性值二;属性三:属性值三;">内容</标签> |
外部样式表(外联式)
将所有的样式放在一个或多个以CSS为扩展名的外部样式表文件中,通过link标签将外部链式表文件链接到HTML文档中。语法:
1 | <head> |
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
7.标签显示模式
块级元素
每个块级元素都会占据一行或多行,可以对其设置对齐,高度,宽度等属性,常用于网页布局和网页结构的搭建。常见的块级元素:h1~h6,div,li,ul,ol,p
行内元素
行内元素(内联元素)不占用独立的区域,仅仅依靠自身字体大小和图形尺寸来支撑结构。一般不可以可以对其设置对齐,高度,宽度等属性
行内元素的特点:
-
和相邻行内元素在一行上。
-
高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
-
默认宽度就是它本身内容的宽度。
-
行内元素只能容纳文本或则其他行内元素。(a特殊)
tips:
- 只有文字才 能组成段落 因此 p 里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
- 链接里面不能再放链接
行内块元素(inline-block)
在行内元素中有几个特殊的标签、、
行内块元素的特点:
-
和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
-
默认宽度就是它本身内容的宽度。
-
高度,行高、外边距以及内边距都可以控制。
标签显示模式转换 display
块转行内:display:inline
行内转块:display:block
块、行内元素转换为行内块: display: inline-block
8.CSS复合选择器
交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格
并集选择器
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。
后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。
1 |
|
属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
选择器 | 含义 |
---|---|
E[attr]{} | 存在属性attr即可 |
E[attr=var]{} | 属性值等于var |
E[attr^=var]{} | 属性值以var开头 |
E[atte$=var]{} | 属性值以var结束 |
E[attr*=var]{} | 属性值含var字段 |
伪元素选择器(CSS3)
- E::first-letter文本的第一个单词或字
- E::first-line 文本第一行
- E::selection 可改变选中文本的样式
E::before和E::after
在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
1 | div::befor { |
9.CSS书写规范
1.空格规范
【强制】 选择器 与 { 之间必须包含空格。
【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
2.选择器规范
【强制】 每个选择器声明必须独占一行。
3.属性规范
【强制】 属性定义必须另起一行。
【强制】 属性定义后必须以分号结尾。
10.CSS 背景
背景图片(image)
语法
1 | background-image: url (url) |
背景平铺(repeat)
语法
1 | background-repeat: repeat | no-repeat | repeat-x | repeat-y |
背景位置(position)
语法
1 | background-position: length || length |
参数:
length : 百分数 | 由浮点数字和单位标识符组成的长度值
position : top | center | bottom | left | center | right
注意:
- position 后面是x坐标和y坐标。 可以使用方位名词或者精确单位。
- 如果和精确单位和方位名字混合使用,则必须是x坐标在前,y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
背景附着(attachment)
语法
1 | background-attachment : scroll | fixed |
背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
书写顺序没有固定的要求(建义用上述顺序)
背景透明(CSS3)
语法(类似颜色半透明)
1 | background: rgba(0,0,0,0.3); |
背景缩放(CSS3)
通过background-size设置背景图片的尺寸
其参数设置如下:
可以设置==长度单位(px)或百分比==(设置百分比时,参照盒子的宽高)
设置为==cover==时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover 最多
设置为==contain==会自动调整缩放比例,保证图片始终完整显示在背景区域。
多背景(CSS3)
以逗号分隔可以设置多背景,可用于自适应布局
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住,背景色通常都定义在最后一组上
eg
1 | div{ |
斜杠后边是设置图片大小,可不写
文本装饰(decoration)
语法
1 | text-decoration: none|underline|overline|line-through |
11.CSS三大特性
层叠 继承 优先级
CSS层叠性(后来居上)
层叠性是指多种CSS样式的叠加,一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
- 样式冲突,就近原则。 那个样式离着结构近,就执行那个样式。
- 样式不冲突,不会层叠
CSS继承性(子承父业)
继承性是指书写CSS样式表时,子标签会继承父标签的某些样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
CSS优先级
简单来说
- !important>行内样式表>内嵌(ID选择器>类,伪类选择器>标签选择器)
- 子元素定义的样式会覆盖继承来的样式。
CSS权重,有一套计算公式去计算,即CSS Specificity,我们称为CSS 特性或称非凡性
pecificity用一个四位的数字串来表示,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
继承或者* 的贡献值 | 0,0,0,0 |
---|---|
每个元素(标签)贡献值为 | 0,0,0,1 |
每个类,伪类贡献值为 | 0,0,1,0 |
每个ID贡献值为 | 0,1,0,0 |
每个行内样式贡献值 | 1,0,0,0 |
每个!important贡献值 | ∞ 无穷大 |
权重可以叠加
eg
a:hover 权重:0,0,1,1
12.盒子模型(CSS重点)
盒子边框(border)
语法
1 | border : border-width || border-style || border-color |
盒子边框写法总结
设置内容 | 样式属性 | 常用属性值 |
---|---|---|
各个边框 | border-top-style:上边框样式; border- bottom-width:下边框宽度;border-left-color:左边框颜色;border-right-color:右边框颜色; | |
样式综合设置 | border-style:上边 [右边 下边 左边]; | none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线 |
宽度综合设置 | border-width:上边 [右边 下边 左边]; | 像素值 |
颜色综合设置 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
边框综合设置 | border:四边宽度 四边样式 四边颜色; |
表格的细线边框
border-collapse:collapse; 表示边框合并在一起。
圆角边框(CSS3)
语法
1 | border-radius: 左上角 右上角 右下角 左下角; |
内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
注 :padding后面跟的数值表示意义类似border-radius
外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足一下两个条件:
- 必须是块级元素。
- 盒子必须指定了宽度(width)
然后就给左右的外边距都设置为auto。
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并
相邻块元素垂直外边距
上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者
嵌套块元素垂直外边距
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者
可以给父元素加上上边框或上内边距或添加overflow:hidden
CSS3盒模型
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode
2、box-sizing: border-box 盒子大小为 width,就是说padding 和 border 是包含到width里面的
盒子阴影
语法:
1 | box-shadow:水平阴影(必需) 垂直阴影(必需) 模糊距离 阴影尺寸 阴影颜色 内/外阴影(默认外阴影outset但是不能写,内阴影inset); |
13.浮动(float)
浮动
语法
1 | 选择器{float:属性值;} |
left 元素向左浮动
right 元素向右浮动
none 元素不浮动(默认值)
CSS的定位机制有3种:普通流(标准流)、浮动和定位
浮动脱离标准流,不占位置,会影响标准流,因此可能要清除浮动
清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题
清除浮动的方法
1.额外标签法
语法
1 | 选择器{clear:属性值;} |
在浮动元素末尾添加一个空的标签例如
,或则其他标签。缺点: 添加许多无意义的标签
1 |
|
2.父级添加overflow属性方法
可以给父级添加: overflow为 hidden|auto|scroll
缺点:无法显示溢出的元素
1 |
|
3.使用after伪元素清除浮动
:after 方式为1的升级版,不用单独加标签
语法
1 | .clearfix:after |
eg
1 |
|
4.使用before和after双伪元素清除浮动
1 | .clearfix:before,.clearfix:after { |
eg
1 |
|
14.定位
元素的定位属性
元素的定位属性主要包括定位模式和边偏移
1.边偏移
- top 顶端偏移量,定义元素相对于其父元素上边线的距离
- bottom 底部偏移量,定义元素相对于其父元素下边线的距离
- left 左侧偏移量,定义元素相对于其父元素左边线的距离
- right 右侧偏移量,定义元素相对于其父元素右边线的距离
2.定位模式
position属性用于定义元素的定位模式,语法如下:
选择器{position:属性值;}
position属性的常用值
值 | 描述 |
---|---|
static | 自动定位(默认定位方式),静态定位状态下,无法通过边偏移属性来改变元素的位置 |
relative | 相对定位,相对于其原文档流的位置进行定位,可以通过边偏移属性改变元素的位置 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
元素添加了 绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式
3.叠放次序(z-index)
调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,其取值可为正整数、负整数和0
只有相对定位,绝对定位,固定定位有此属性
元素的显示与隐藏
1.display 显示
display 设置或检索对象是否及如何显示。
display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外,同时还有显示元素的意思。
特点: 隐藏之后,不再保留位置。
2.visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点: 隐藏之后,继续保留原有位置
3.overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条