查阅文档:
W3C:w3school 在线教程
MDN:MDN Web Docs
基本概念
CSS(层叠样式表)(cascading style sheets)也称为CSS样式表、级联样式表,是一种标记语言
作用:设置元素的外观显示样式、网页版面布局
组成
CSS语法规范由:选择器以及一条或多条声明组成。声明采用键值对的写法,属性和属性值相对的形式。
选择器{
属性:属性值;
属性:属性值;
}
p {
color: tomato;
}
选择器
选择器的作用:根据不同的需求把不同的标签选出来
选择器分为基础选择器和复合选择器
基础选择器
基础选择器:单个选择器组成的 | ||
---|---|---|
标签选择器 | p { 样式 } | 用HTML标签名作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。 把某一类标签全部选择出来,快速的为页面中同类型的标签统一设置样式 |
类选择器 | .className { 样式 } | 想要差异化选择不同的标签,单独选一个或者几个标签。 一个标签可以有多个类名,多个类名之间用空格分开。 |
id选择器 | #idName { 样式 } | 可以为标有特定id的HTML元素指定特有的样式。 一般用于页面唯一性的元素上,经常和JavaScript搭配使用 |
通配符选择器 | * { 样式 } | 选取页面中所有的元素。 通配符选择器不需要调用,自动给所有元素使用样式。特殊情况使用 |
复合选择器
CSS复合选择器:复合选择器是建立在基础选择器之上的,对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素。是由俩个或多个基础选择器,通过不同的方式组合而成。 | ||
---|---|---|
后代选择器 (包含选择器) | ol li { 样式 } | 可以选择父元素里面的子元素。选父元素里面所有的子元素 外层标签 内层标签{}当嵌套的时候,内层标签就是外层标签的子元素 |
子选择器 | ol>li { 样式 } | 只选择作为某元素的最近一级子元素。 选父元素下一级的子元素,只有一级 |
并集选择器 | div,p { 样式 } | 可以选择多组标签,同时为他们定义相同的样式。 通常用于集体声明各个元素之间用逗号隔开 |
伪类选择器 | 向某些选择器添加特殊的效果,或者第n个元素。有链接伪类、结构伪类、等等 用(:)冒号表示,冒号前后不能有空格 |
链接伪类选择器:常和a标签配合使用 按照顺序声明,否则有些将不能起效果。Link,Visited,Hover,Active | |
---|---|
选择所有未被访问过的链接 | a:link |
选择所有已被访问过的链接 | a:visited |
选择鼠标指针位于其上的链接,鼠标聚焦的时候 | a:hover |
选择活动链接(鼠标按下,未弹起的链接) | a:active |
focus伪类选择器:常和表单配合使用 | |
---|---|
选取获得焦点的表单元素 | input:focus |
三种引进方式
按照CSS书写的位置或者引入的方式不同,CSS样式表可以分为三大类 | |
---|---|
行内样式表(行内式) | 在元素标签内部的style属性设定CSS样式,适用于简单样式。控制当前的标签样式 |
内部样式表(嵌入式) | 写在HTML页面内部,将所有的CSS代码抽取出来,单独放在一个<style>标签中,一般放在<head>中,可以方便控制整个页面的样式,代码结构清晰 |
外部样式表(链接式) | 实际开发使用的,样式比较多的情况, 样式单独写到CSS文件中,之后把CSS文件通过link引入到HTML文件中。 <link rel=”stylesheet” href=”xx.css”> |
三大特性
层叠性、继承性、优先级
层叠性:相同选择器给设置相同的样式,此时一个样式就会覆盖另一个冲突的样式。 |
---|
原则:就近原则,哪个离结构近就执行哪个 |
继承性:子标签会继承父标签中的某些样式,简化代码,如文本颜色和字号 |
---|
例如:text-,font-,line-height,color等 |
行高的继承:font:12px/1.5 ‘Microsoft YaHei’;子元素行高是子元素文字大小的1.5倍 可以让里面的子元素根据自己的文字大小自动调整行高 |
优先级:当同一个元素指定多个选择器,就会有优先级的产生 |
---|
选择器相同的时候:就近原则 |
选择器不同的时候:根据优先级从高到低,这里是权重的问题 |
权重:从高到低写。 比较的时候先比较第一位,哪个数字大哪个权重高,若一样,再比较第二位,依此类推。 |
---|
!important,这个权重最高 !important用法:直接在样式属性里面写。例:color: pink!important; |
行内样式(1,0,0,0) |
id选择器(0,1,0,0) |
类选择器/伪类选择器(0,0,1,0) |
标签选择器(0,0,0,1) |
继承/*(0,0,0,0) |
权重叠加:复合选择器会有权重叠加的问题
ul li {
color: green;
}
例如:这是俩个标签选择器(0,0,0,1)+(0,0,0,1)=(0,0,0,2)
元素三种显示模式
元素的显示模式:元素以什么方式进行显示
分类 | ||
---|---|---|
块元素 | 特点 | 独占一行; 高度、宽度、内外边距可以控制; 宽度默认是容器(父元素)的100%; 是一个容器及盒子,里面可以放行内或者块级元素。 |
例如 | h1-h6、p、div、ul、ol、li等 | |
注意 | 文字类的元素内不能用块级元素。比如p不能放块级标签。 | |
行内元素(内联元素) | 特点 | 一行可以显示多个; 高、宽直接设置是无效的; 默认宽度是它内容本身宽度; 行内元素只能容纳文本或其他行内元素。 |
例如 | span、a、strong、b、em、i、del、s、ins、u等 | |
注意 | a里面不能放a,可以放块级元素 | |
行内块元素 | 特点 | 和相邻行内元素(行内块)在一行上,一行可以显示多个; 默认宽高是它本身内容的高度; 高度、行高、内外边距都可以设置 |
例如 | img、input、td | |
注意 | 同时具有块元素和行内元素的特点 |
元素显示模式的转换:一个模式的元素需要另外一个模式的特性 | |
---|---|
行内转换为块级 | display:block; |
块级元素转换为行内 | display:inline; |
转换为行内块元素 | display:inline-block; |
样式
字体样式 | font- | 属性值 |
---|---|---|
字体系列 | font-family | 定义文本字体。比如‘宋体’ ‘Microsoft YaHei’ |
字体大小 | font-size | 最常用单位px |
字体粗细 | font-weight | bold是加粗效果;bolder特粗;lighter细体;normal不加粗 数字400等价于normal,数字不带单位,700加粗,数字可以在(0,900+)取值 |
字体样式 | font-style | 文本的风格,normal正常,italic斜体。默认正常 |
简写 | font:风格 粗细 大小 字体 | 简写:简写font的时候,size和family必须保留,其他可以省略 font:italic 700 16px/26px ‘Microsoft YaHei’; |
文本样式 | text- | 属性值 |
---|---|---|
文本颜色 | color | 预定义(red)、十六进制(#FF00FF)、RGB(rgb(255,0,255)或(100%,0%,20%))。十六进制用的最多 |
文本对齐 | text-align | left左(默认)、right右、center中间 只能设置元素内文本内容的水平对齐方式 |
装饰文本 | text-decoration | 设置文本下划线、删除线、上划线等 none(默认)没有;underline下划线;overline上划线;line-through删除线 |
文本缩进 | text-indent | 指定文本的第一行缩进,通常将段落的首行缩进,跟数字单位 |
行间距 | line-height | 设置行间的距离,可以控制文字行与行之间的距离。 行间距=上间距+文本高度+下间距,行间距是一行的行高 小技巧:line-height=height时,行高等于盒子的高,所以文字垂直居中 |
背景样式 | background- | 属性值 |
---|---|---|
背景颜色 | background-color | 一般情况下背景颜色默认值是transparent透明的,也可以手动设置为透明色 |
背景颜色半透明 | background | rbga(0,0,0,.8) |
背景图片 | 背景图片、图片平铺、背景图片位置、背景图像固定 |
背景图片 | background- | 属性值:背景图片会在背景颜色的上面 |
---|---|---|
背景图片 | background-image | none或者url(这里写路径) 实际用于logo或者装饰性的小图片或者超大的背景图片,优点是便于控制位置 |
图片平铺 | background-repeat | repeat平铺(默认),no-repeat不平铺,repeat-x沿着x轴平铺,repeat-y沿着y轴平铺 |
图片位置 | background-position:x y | x y;可以用方位名词或者精确单位。 |
方位名词:right、left、center、top、bottom 俩个值都是方位名词,没有顺序关系。 一个词是方位名词,第二个词默认是center。 | ||
精确参数:x坐标,y坐标。参考点在左上角。 只有一个参数,默认参数是x轴,y轴垂直居中 | ||
混合单位:方位名词可以和精确参数混合使用,x,y | ||
图像固定 | background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 scroll滚动、fixed固定。默认是滚动的 |
简写 | background | 没有固定的顺序,一般这样的顺序写 background: color url(url) repeat scroll position |
元素的显示与隐藏
本质:让一个元素在页面中隐藏或者显示出来
属性 | 语义 | 属性值 |
---|---|---|
display | 一个元素如何显示 | none 隐藏元素,脱标不再占有原来的位置 |
block 显示元素,或者转换成块级元素 | ||
visibility | 元素隐藏还是可见 默认属性值inherit继承上一个父对象的可见性 | visible 元素可见 |
hidden 元素隐藏,继续占有原来的位置 | ||
overflow | 溢出部分,显示隐藏 默认属性值visible元素可见 | hidden 溢出的部分隐藏起来 |
scroll 溢出的部分,显示滚动条来查看。不溢出也有滚动条 | ||
auto 溢出的部分,在需要的时候添加滚动条。不溢出没有滚动条 |