CSS基础入门笔记

七月 15, 2018 114 2613 6 分钟

css

CSS基础入门知识学习笔记，包括选择器、常用样式等

前言

CSS 是一种样式规则语言，用来描述 Web 页面内容的外观，例如设置背景颜色和字体，布局内容或添加动画和其他装饰功能。

表现层：这一层决定了页面中的信息会以什么样的外观呈现出来。

1、选择器

1.1基本选择器

选择器	类型	功能描述
*	通配选择器	选择文档中所有的html元素
E	元素选择器	选择指定的类型的html元素
#id	ID选择器	选择指定ID属性值为“id”的任意类型的元素
.class	类选择器	选择指定的class属性值为“class”的任意类型的任意多个元素
selector1，selector2	群组选择器	将每一个选择器匹配的元素集合并

1.2 层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且F元素被包含在匹配的E元素内
E > F	子选择器	选择匹配的F元素，且F元素是E元素的子元素
E + F	相邻兄弟选择器	选择匹配的F元素，且F元素是E元素后面紧邻的兄弟元素
E ~ F	通用选择器	选择匹配的F元素，且F元素是E元素后面的所有兄弟元素

1.3 伪类选择器

伪类选择器语法书写时和其他的CSS选择器写法有所区别，都以冒号（：）开头；

1.3.1动态伪类选择器

选择器	类型	功能描述
E ： link	链接伪类选择器	选择匹配的E元素，并且E元素被设置了超链接，并且这个链接没有被点击
E ： visited	链接伪类选择器	选择匹配的E元素，并且E元素被设置了超链接，并且这个链接已被点击
E ： active	用户行为伪类选择器	选择匹配的E元素，并且E元素处于激活状态
E ： hover	用户行为伪类选择器	选择匹配的E元素，并且E元素上鼠标处于悬停状态
E ： focus	用户行为伪类选择器	选择匹配的E元素，且匹配的元素处于焦点状态

1.3.2 目标伪类选择器

选择器	类型	功能描述
E ： target	目标伪类选择器	选择匹配E的所有元素，且匹配元素被相关URL指向

1.3.3语言伪类选择器

<body lang="zh"></body>

1.3.4 UI元素状态伪类选择器

选择器	类型	功能描述
E ： checked	选中状态伪类选择器	匹配选中的复选按钮或单选按钮，并且他们是选中状态
E ： enabled	启用状态伪类选择器	匹配启用状态的表单元素
E ： disabled	不可用状态伪类选择器	匹配禁用状态的表单元素

1.3.5 结构伪类选择器语法

选择器	功能描述
E ： first-child	作为父元素的第一个子元素的E元素
E ： last-child	作为父元素的最后一个子元素的E元素
E ： root
E F：nth-child（n）	选中的F元素是E元素的第n个子元素
E F： nth-last-child（n）	选中的F元素是E元素的倒数第n个子元素
E ： nth-of-type（n）	选择父元素内具有指定类型的第n个E元素
E ： nth-last-of--type（n）	选择父元素内具有指定类型的倒数第n个E元素
E ： first-of-type	选择父元素内具有指定类型的第1个E元素
E ： last-of-type	选择父元素内具有指定类型的倒数第1个E元素
E ： only-child	选择父元素内只包含一个子元素,且该元素是E元素
E ： only-of-type	选择父元素内只包含一个类型的子元素，且该元素是E元素
E ： empty	选择没有子元素的元素

这里参数n可以是整数（1、2、3、4……），关键字（odd，even），还可以是公式（2n+1,-n+5），但n的起始值始终为1；

1.3.6 否定伪类选择器

E ： not（F）匹配所有除元素F外的E元素

1.4 伪元素

选择器	功能描述
E ：： first-letter	选择文本块的第一个字母
E ：： first-line	选择文本快的第一行
E ：： before 和E ：： after	主要用于清除浮动
E ：： selection	选中的E元素

1.5 属性选择器

选择器	功能描述
E[attr]	选中具有attr属性的E元素
E[attr=val]	选中具有attr属性，并且属性值为val的E元素
E[attr\|=val]	选中具有attr属性，并且属性值为val或以val-开头
E[attr~=val]	选中具有attr属性，并且属性值包含val的E元素，该属性值必须以空格隔开
E[attr*=val]	选中具有attr属性，并且属性值包含val的E元素
E[attr^=val]	选中具有attr属性，并且属性值以val开始的E元素
E[attr$=val]	选中具有attr属性，并且属性值以val结束的E元素

2、常见样式

2.1、边框

border-width：设置元素边框的粗细
border-color：设置元素边框的颜色
border-style：设置元素边框的样式
border-radius：设置元素圆角边框，none |<length>{1,4}，none:表示没有圆角如果要重置边框圆角，设置none没有作用，必须border-radius：0；

缩写语法：border：border-width border-color border-style;

2.2、背景

background-origin: padding-box || border-box || content-box；

padding-box：默认值，决定background-position起始位置从padding的外边缘开始显示背景图片；
border-box：决定background-position起始位置从border的外边缘开始显示背景图片；
content-box：决定background-position起始位置从content的外边缘开始显示背景图片；

background-clip: border-box || padding-box || content-box

border-box：默认值，元素背景图像从元素的border区域向外裁剪；即元素边框之外的背景图像将被裁剪掉；
padding-box：元素背景图像从padding区域向外裁剪；即元素padding区域之外的背景图像将被裁剪掉；
content-box：元素背景图像从content区域向外裁剪；即元素内容区域之外的背景图像将被裁剪掉；

background-size：auto || <具体整数值> || <百分比> || cover || contain;

auto：默认值，保持背景图的高度和宽度；
具体整数值：将改变背景图片的大小；
百分比：将改变背景图片的大小，取值0~100%，按元素宽高计算百分比；
cover：保持背景图本身宽高比例，同时保证容器被全部占满；
contain：保持背景图本身宽高比例，同时保证图片全部在容器内；

2.3、变形

函数	功能描述
translate()	移动元素，有两个扩展函数translateX()和translateY();
scale()	缩小或放大元素，有两个扩展函数scaleX(）和scaleY（);
rotate()	选择元素
skew()	让元素倾斜，在此基础上有两个扩展函数skewX（）和skewY（);
matrix()	定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

函数	功能描述
translate3d（）	移动元素，用来指定一个3D变形位移量
translateZ（）	指定3D位移在Z轴的位移量
scale3d（）	缩放一个元素
scaleZ（)	指定Z轴的缩放向量
rotate3d（）	指定元素具有一个三维旋转的角度
rotateX(),rotateY(),rotateZ()	让元素具有一个旋转角度
perspective（）	指定一个透视投影矩阵
matrix3d（）	定义矩阵变形

2.3.1、transform-origin属性

用来指定元素的中心点位置；默认情况，变形的原点在元素的中心点，或者X轴和Y轴的50%处；

语法：transform-origin:原点水平方向的位置原点垂直方向的位置；

缩放，旋转，倾斜可以通过transform-origin设置原点，但平移始终以元素中心点进行位移；

2.3.2、transform-style属性

用来指定3D元素在嵌套空间如何显示：flat和preserve-3d；该属性需要设置在父元素中；

flat（默认值）：表示所有元素在2D平面呈现；

preserve-3d：所有子元素在3D空间呈现；

三种类型

1、嵌套样式：位置在head的<style></style>中，作用于当前样式所处的页面，主要用于存放一些当前页面会用到的样式

2、行内样式：位置在标签中通过style来设置

只能作用在当前标签之中，适用于整个页面只有这个标签出现了这个样式

3、外联样式：存放于独立的***.css文件，通过link标签引入。所有的页面都可以使用，适用于存放一些所有页面都会用到的公共样式

三种特性

继承性：子元素可以继承父元素的样式

color；text-,font-,line-开头的属性都是可以继承的

应用：给body设置一个字体，页面上所有的标签都能够继承这个属性

特殊性：a标签的颜色不能继承、h1-h6标签的字体大小不能继承

层叠性：后面的规则覆盖前面的规则，优先级：

1、标签选择器（例如，h1）和伪元素（例如，::before）+1分

类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）+10分

ID 选择器（例如，#example）+100分

内联样式总共1000分

2、!important（例如 display: none !important;）覆盖所有上面所有优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

盒模型

浏览器的渲染引擎会根据CSS 基础框盒模型将所有元素表示为一个个矩形的盒子

Content box: 这个区域是用来显示内容

Padding box: 包围在内容区域外部的空白区域

Border box: 边框盒包裹内容和内边距

Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域

布局

布局定位属性：display / float / position / visibility (显示/隐藏，仍占位)

绝对定位，相对于具有相对定位的父元素进行定位，若没有则相对于body定位

固定定位，它是将一个元素相对浏览器视口固定

恰饭区

广告位招租

Power by Node.js + Nuxt.js，由腾讯云提供服务, 已经稳稳地存活了 8年95天