目录
CSSDisplay(显示)与Visibility(可见性)
-
CSS语法
CSS规则由两个主要部分组成:选择器,以及一条或多条声明。(每条声明由一个属性和一个值组成。CSS声明总是以分号结束,声明以大括号括起来。)
属性名,属性值关键字推荐小写;
属性值前面,冒号后面,保留一个空格;
选择器(标签)和大括号中间保留空格。
CSS注释:以 /* 开始,以 */ 结束。
-
CSS元素
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度高度 | 它本身内容的宽度 |
块级元素的特点:
- 比较霸道,自己独占一行;
- 高度,宽度,外边距一级内边距都可以控制;
- 宽度默认值是容器的100%;
- 是一个容器及盒子,里面可以放行内或者块级元素。
常见块级元素:<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等
行内元素的特点:
- 相邻行内元素在一行上,一行可以显示多个;
- 高,宽直接设置是无效的;
- 默认宽度就是它本身内容的宽度;
- 行内元素只能容纳文本或者其他行内元素。
常见行内元素:<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
行内块元素特点:
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一 行可以显示多个(行内元素特点)。
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
常见行内块元素:<img />,<input />,<td>
-
CSS选择器
选择器分为基础选择器和复合选择器。
基础选择器是由单个选择器组成的。
类选择器-多类名 使用方式:<div class="one two three">多类名</div>
使用场景:把一些标签元素相同的样式放在同一个类里面
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出相同的标签,比如p | 不能差异化选择 | 较多 | p{color:red;} |
类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 | .nav{color:red;} |
id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和JS搭配 | #nav{color:red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 特殊情况使用 | *{color:red;} |
注意:1.id选择器中,ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2.class选择器中,类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
-
CSS样式表
插入样式表的三种方法
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
-
样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便,权重高 结构样式混乱 较少 控制一个标签 内部样式表 部分结构样式表 没有彻底分离 较多 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 最多 控制多个页面
注意:
1.外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。不要在属性和单位之间留空格。
2.内部样式表可以使用<style>标签来定义样式。
3.内联样式由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。
4.如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
优先级
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
-
CSS背景
使用简写属性时,属性值的顺序为::
background-color 设置颜色
background-image 设置背景图像
background-repeat 设置背景水平或垂直平铺
background-attachment 设置背景图像是否可以滚动移动
background-position 设置背景图像定位
背景色半透明 backgr:rgba(0,0,0,0.3);后面必须是4个值
-
CSS文本格式
color指定颜色:
- 十六进制值 - 如: #FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
text-align:设置对齐方式
letter-spacing:设置字符间距
word-spacing:设置字间距
line-height:设置行间距
text-shadow:设置文本阴影
vertical-align:设置元素垂直对齐
white-space:设置元素空白的处理方式
text-decoration:设置或删除文本的修饰
属性值:none:默认没有装饰线;
underline:下划线;
overline:上划线;
line-through:删除线
text-transform:指定在一个文本中的大写和小写
text-indent:指定文本第一行的缩进 em是一个相对文本。
注意: 对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。
-
CSS字体
在CSS中,有两种类型的字体系列名称:
- 通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace")
- 特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier")
font-family:设置字体格式,像宋体,黑体等。
font-style:设置字体是否倾斜。
属性值:normal:标准字体;
italic:斜体。
font-size:设置字体大小。 谷歌默认字体大小16px。
font-weight:设置字体粗细。
属性值:normal:不加粗;
bold:加粗;
100-900:400等同于normal,700等同于bold。
-
CSS链接
四个链接状态:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
-
CSS列表
有序列表(ol):列表项标记用特殊图形(如小黑点、小方框等)。
无序列表(ul):列表项的标记有数字或字母。
list-style:可以指定列表所有属性。
list-style-type:指定列表项标记属性。
list-style-image:指定列表项标记的图像。
list-style-position:设置列表项标志的位置。
-
CSS表格
border:指定列表边框。
border-collapse:设置表格的边框是否被折叠成一个单一的边框或隔开。
height:设置表格高度。
width:设置表格宽度。
text-align:设置表格内文字对齐。
vertical-align:设置垂直对齐。
-
CSS盒子模型
div:定义盒子模型。
Margin(外边距) - 清除边框外的区域,外边距是透明的。
margin:简写属性。
margin-bottom:设置下外边距。
margin-left:设置做外边距。
margin-right:设置有外边距。
margin-top:设置上外边距。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
padding:简写属性。
padding-bottom:设置下内边距。
padding-left:设置左内边距。
padding-right:设置右内边距。
padding-top:设置上内边距。
Content(内容) - 盒子的内容,显示文本和图像。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
-
CSS边框属性
border-style:定义边框样式。
border-collapse:控制相邻单元格的边框。
border-width:定义边框宽度。
border-color:定义边框颜色。
border-radius:设置圆角边框样式。
border-top-style:定义上边框。
border-bottom-style:定义下边框。
border-left-style:定义左边框。
border-right-style:定义右边框。
-
CSS轮廓(outline)
outline:可定义所有轮廓属性。
outline-color:定义轮廓颜色。
outline-width:定义轮廓宽度。
outline-style:定义轮廓样式。
-
css阴影
box-shadow:设置盒子阴影。
属性值:h-shadow:必需,水平阴影位置,允许负值。
v-shadow:必需,垂直阴影位置,允许负值。
blur:可选,模糊距离。
color:可选,阴影颜色。
spread:可选,阴影尺寸。
inset:可选,将外部阴影改成内部阴影。
text-shadow:设置文字阴影。
属性值:h-shadow:必需,水平阴影位置,允许负值。
v-shadow:必需,垂直阴影位置,允许负值。
blur:可选,模糊距离。
color:可选,阴影颜色。
-
CSS尺寸(Dimension)
属性 | 描述 |
---|---|
height | 设置元素高度。 |
line-height | 设置行高。 |
max-height | 设置元素最大高度。 |
max-width | 设置元素最大宽度。 |
min-height | 设置元素最小高度。 |
width | 设置元素宽度。 |
-
CSSDisplay(显示)与Visibility(可见性)
display:块和内联元素。
-
CSS Position(定位)
position:指定了元素的定位类型。
属性值:
static:HTML的默认值,没有定位。
relative:相对定位。
fixed:元素位置相对于浏览器窗口是固定位置。即窗口是滚动的它也不滚动。
absolute:绝对定位。
sticky:粘性定位。
z-index:指定重叠元素顺序。
总结:
定位模式
|
是否脱标
|
移动位置
|
是否常用
|
---|---|---|---|
static
静态定位
| 否 | 不能使用边位移 | 很少 |
relative相对定位 | 否 | 相对于自身位移 | 常用 |
absolute绝对定位 | 是 | 带有定位的父级 | 常用 |
fixed固定定位 | 是 | 浏览器可视区 | 常用 |
sticky粘性定位 | 否 | 浏览器可视区 | 当前阶段用得少 |
定位拓展:
1.绝对定位盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中,可以通过以下方法实现水平和垂直居中。
① left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;:让盒子向左移动自身宽度的一半。
2.定位特殊性
绝对定位和固定定位和浮动类似。
1. 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
3.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。
4.绝对定位(固定定位)会完全压住盒子
浮动元素只会压住它下面标准流的盒子,不会压住下面标准流盒子里面的文字(像图片)。浮动之所以不会压住文字,因为浮动产生的最初目的是为了做文字环绕效果的。
绝对定位(固定定位) 会压住下面标准流所有的内容。
-
CSS布局
Overflow:用于控制内容溢出元素框时现实的方式。
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意:overflow 属性只工作于指定高度的块元素上。
水平&垂直对齐
元素居中对齐:margin:auto;
文本居中对齐:text-align:center;
图片居中对齐:margin:auto;
左右对齐:position:absolute; float:left(right);
垂直居中对齐:padding
line-height
position和transform
-
CSS浮动
所谓的标准流: 就是标签按照规定好默认方式排列。
块级元素会独占一行,从上向下顺序排列。
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
常用元素:span、a、i、em 等
float:定义元素浮动显示。
属性值:none:元素不浮动。
left:元素向左浮动。
right:元素向右浮动。
清除浮动
1.clear 属性值:both,left,right
2.额外标签法
优点:通俗易懂,书写方便。 缺点:添加许多无意义的标签,结构化较差。
3.父级添加overflow清除浮动。 属性值:hidden,auto,scroll
优点:代码简洁。 缺点:无法显示溢出的部分。
4.:after伪元素法
优点:没有增加标签,结构更简单。 缺点:照顾低版本浏览器。
5.双伪元素清除浮动
- 清除浮动本质是:清除浮动的本质是清除浮动元素脱离标准流造成的影响。
- 清除浮动策略是:闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.。
- 额外标签法:隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加清
- 除浮动样式实际工作可能会遇到,但是不常用。
-
CSS组合选择符
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格 分隔)
- 子元素选择器(以大于 > 号分隔)
- 相邻兄弟选择器(以加号 + 分隔)
- 普通兄弟选择器(以波浪号 ~ 分隔)
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及使用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格.nav a |
子代选择器 | 选择最近一级元素 | 只能选亲儿子 | 较少 | 符号是大于.nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号.nav,.header |
链接伪类选择器 | 选择不同状态的链接 | 跟连接相关 | 较多 | 重点记住a{}和a:hover实际开发的写法 |
:focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus记住这个写法 |
-
CSS伪类(Pseudo-classes)
语法
伪类语法:selector:pseudo-class {property:value;}
CSS类:selector.class:pseudo-class {property:value;}
选择器 | 示例 | 示例说明 |
---|---|---|
:checked | input:checked | 选择所有选中的表单元素 |
:disabled | input:disabled | 选择所有禁用的表单元素 |
:empty | p:empty | 选择所有没有子元素的p元素 |
:enabled | input:enabled | 选择所有启用的表单元素 |
:first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
:in-range | input:in-range | 选择元素指定范围内的值 |
:invalid | input:invalid | 选择所有无效的元素 |
:last-child | p:last-child | 选择所有p元素的最后一个子元素 |
:last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
:not(selector) | :not(p) | 选择所有p以外的元素 |
:nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
:nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
:nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
:only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
:only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
:optional | input:optional | 选择没有"required"的元素属性 |
:out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
:read-only | input:read-only | 选择只读属性的元素属性 |
:read-write | input:read-write | 选择没有只读属性的元素属性 |
:required | input:required | 选择有"required"属性指定的元素属性 |
:root | root | 选择文档的根元素 |
:target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
:valid | input:valid | 选择所有有效值的属性 |
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
:first-line | p:first-line | 选择每个<p> 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
:before | p:before | 在每个<p>元素之前插入内容 |
:after | p:after | 在每个<p>元素之后插入内容 |
:lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
-
CSS伪元素
语法
伪元素的语法:selector:pseudo-element {property:value;}
CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;}
:first-line伪元素
用于向文本的首行设置特殊样式。下面的属性可应用于 "first-line" 伪元素:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter伪元素
用于向文本的首字母设置特殊样式。下面的属性可应用于 "first-letter" 伪元素:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
选择器 | 示例 | 示例说明 |
---|---|---|
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
:first-line | p:first-line | 选择每个<p> 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
:before | p:before | 在每个<p>元素之前插入内容 |
:after | p:after | 在每个<p>元素之后插入内容 |
:lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
-
CSS导航栏
1.导航栏等于连接链表。
2.有垂直导航跟水平导航(有内联或者浮动两种方法)。
3..active:激活当前导航条实例。
4.固定导航条:固定在头部:top:0;
固定在底部:bottom:0;
-
CSS下拉菜单
:hover
选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
cursor:网页制作CSS中的光标类型。一般扩展名为.cur.
属性值:cursor:crosshair; 十字锥心
cursor:pointer; 手
cursor:hand; 箭头
cursor:wait; 等待
cursor:help; 帮助
cursor:no-drop; 无法释放
cursor:text; 文字编辑
cursor:move; 可移动对象
-
CSS提示工具
1.使用容器元素 (like <div>) 并添加 一个 类。在鼠标移动到 <div> 上时显示提示信息。
2.提示文本放在内联元素上(如 <span>)。
3.div类使用 position:relative, 提示文本需要设置定位值 position:absolute。
4.:hover 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示。
5.工具显示在指定元素的右侧(left:100+内边距%) ,右侧(right:100+内边距%)。
6.显示在头部或者底部:bottom:100%;或者top:100%;需要使用 margin-left 属性,设置一个值,计算来源是使用宽度的一半来居中对齐
7.添加箭头:用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志,箭头是由边框组成的,但组合起来后提示工具像个语音信息框。
8.淡入效果:可以使用 CSS3 transition 属性及 opacity 属性来实现。
eg:
-
CSS图像透明/不透明
CSS3中属性的透明度是 opacity。
IE9,Firefox,Chrome,Opera,和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。
IE8和早期版本使用滤镜:alpha(opacity= x)。 x可以采取的值是从0 - 100。较低的值,使得元素更加透明。
-
CSS媒体类型
@media 规则允许在相同样式表为不同媒体设置不同的样式。
媒体类型 | 描述 |
---|---|
all | 用于所有的媒体设备。 |
aural | 用于语音和音频合成器。 |
braille | 用于盲人用点字法触觉回馈设备。 |
embossed | 用于分页的盲人用点字法打印机。 |
handheld | 用于小的手持的设备。 |
用于打印机。 | |
projection | 用于方案展示,比如幻灯片。 |
screen | 用于电脑显示器。 |
tty | 用于使用固定密度字母栅格的媒体,比如电传打字机和终端。 |
tv | 用于电视机类型的设备。 |
-
CSS属性选择器
具有特定属性的HTML元素样式不仅仅是class和id。
IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。
"value 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: *=, ^=, $=
1.attribute 属性中包含 value:[attribute~=value]
2.attribute 属性以 value 开头:[attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开。
[attribute^=value] 属性的前几个字母是 value 就可以 。
3.attribute 属性以 value 结尾:[attribute$=value]
-
CSS计数器
counter-reset
:创建或者重置计数器
counter-increment:
递增变量
content
:插入生成的内容
counter()
或 counters()
函数:将计数器的值添加到元素