CSS笔记
1. 网页的构成
网页的构成可以分为3类
-
-
外观：用于修饰结构体的，使用的技术是CSS
-
形为：用网页动起来，使用的技术是JavaScript
2. CSS简介
CSS又称层叠样式表，级联样式表。
作用：修饰和美化HTML
特点：层叠性、继承性
3. CSS的引入
CSS的引入有4种写法
方式一：行内样式表
<标签名 style="样式名: 值"></标签名>
特点：简单，无法复用，不推荐
方式二：内部样式表
在当前html文件的head标签中添加如下内容
1 <style> 2 CSS选择器{ 3 样式名: 值 4 } 5 </style>
特点：同文件中可以复用，可以统一管理样式
方式三：外部样式表
单独新建一个XXX.CSS文件，将样式写在该文件中
在HTML文件中引入该CSS文件即可。
<link rel="stylesheet" href="css/demo1.css"/>
特点：可以跨文件复用，可以统一管理样式（企业级开发推荐使用）
方式四：导入式
单独新建一个XXX.CSS文件，将样式写在该文件中
在HTML文件中使用下面方式导入
1 <style> 2 @import 'demo.css'; 3 </style>
特点：可以跨文件复用，可以统一管理样式
方式三与方式四的区别
方式三是先加载CSS，再显示HTML
方式四是先显示HTML，再加载CSS
|
|
作用
|
缺点
|
使用情况
|
用法
|
|---|---|---|---|---|
|
标签选择器
|
可以选出所有相同的标签，比如p
|
不能差异化选择
|
较多
|
p { color：red;}
|
|
类选择器
|
可以选出1个或者多个标签
|
可以根据需求选择
|
非常多
|
.nav { color: red; }
|
|
id选择器
|
一次只能选择器1个标签
|
只能使用一次
|
不推荐使用
|
#nav {color: red;}
|
|
通配符选择器
|
选择所有的标签
|
选择的太多，有部分不需要
|
不推荐使用
|
|
|
选择器
|
作用
|
缺点
|
使用情况
|
用法
|
|---|---|---|---|---|
|
交集选择器
|
通过多个交集精确范围
|
|
较多
|
p.a1
|
|
并集选择器
|
同时选中多个目标
|
|
较多
|
p,a
|
关系选择器
|
选择器
|
作用
|
缺点
|
使用情况
|
用法
|
|---|---|---|---|---|
|
后代选择器
|
选中目标目标后代中所有符合的元素
|
|
|
div p
|
|
父子选择器
|
选中目标所有符合的子元素
|
|
|
div>p
|
|
相邻选择器
|
选中目标后面紧挨的那个元素
|
|
|
div+p
|
|
兄弟选择器
|
选中指定标签后面的所有的目标兄弟标签
|
|
|
div~p
|
属性选择器
|
选择器
|
作用
|
|---|---|
|
[属性=属性值]
|
选中含有指定属性和指定属性值的元素
|
|
[属性^=属性值]
|
选中含有指定属性和指定属性值开头的元素
|
|
[属性$=属性值]
|
选中含有指定属性和指定属性值结尾的元素
|
|
[属性*=属性值]
|
选中指定属性名和含有指定属性值的元素
|
伪类选择器
|
选择器
|
例子
|
作用
|
|---|---|---|
|
:active
|
a:active
|
选择活动的链接。
|
|
:link
|
a:link
|
选择所有未被访问的链接。
|
|
:visited
|
a:visited
|
选择所有已访问的链接。
|
|
:hover
|
a:hover
|
选择鼠标悬停其上的链接。
|
|
:focus
|
input:focus
|
选择获得焦点的 <input> 元素。
|
|
|
|
|
|
:checked
|
input:checked
|
选择每个被选中的 <input> 元素。
|
|
:disabled
|
input:disabled
|
选择每个被禁用的 <input> 元素。
|
|
:enabled
|
input:enabled
|
选择每个已启用的 <input> 元素。
|
|
:read-only
|
input:read-only
|
选择指定了 "readonly" 属性的 <input> 元素。
|
|
:read-write
|
input:read-write
|
选择不带 "readonly" 属性的 <input> 元素。
|
|
:required
|
input:required
|
选择指定了 "required" 属性的 <input> 元素。
|
|
:optional
|
input:optional
|
选择不带 "required" 属性的 <input> 元素。
|
|
|
|
|
|
:first-child
|
p:first-child
|
选择作为其父的首个子元素的每个 <p> 元素。
|
|
:first-of-type
|
p:first-of-type
|
选择作为其父的首个 <p> 元素的每个 <p> 元素。
|
|
:last-child
|
p:last-child
|
选择作为其父的最后一个子元素的每个 <p> 元素。
|
|
:last-of-type
|
p:last-of-type
|
选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
|
|
:nth-child
|
p:nth-child(2)
|
选择作为其父的第二个子元素的每个 <p> 元素。 n：代表第几个 odd：奇数 even：偶数
|
|
:nth-last-child
|
p:nth-last-child(2)
|
选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
|
|
nth-last-of-type
|
p:nth-last-of-type(2)
|
选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
|
|
nth-of-type
|
p:nth-of-type(2)
|
选择作为其父的第二个 <p> 元素的每个 <p> 元素。
|
|
only-of-type
|
p:only-of-type
|
选择作为其父的唯一 <p> 元素的每个 <p> 元素。
|
|
only-child
|
p:only-child
|
选择作为其父的唯一子元素的 <p> 元素。
|
|
not
|
:not(p)
|
选择每个非 <p> 元素的元素。
|
|
|
|
|
|
|
|
|
伪元素选择器
|
选择器
|
例子
|
例子描述
|
|---|---|---|
|
::after
|
p::after
|
在每个 <p> 元素之后插入内容。
|
|
::before
|
p::before
|
在每个 <p> 元素之前插入内容。
|
|
::first-letter
|
p::first-letter
|
选择每个 <p> 元素的首字母。
|
|
::first-line
|
p::first-line
|
选择每个 <p> 元素的首行。
|
|
::selection
|
p::selection
|
选择用户选择的元素部分。
|
5. 选择器优先级
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
使用选择器相同的情况下：就近原则
使用选择器不同情况下：计算权值
|
选择器
|
权重值
|
|---|---|
|
通配选择符
|
0,0,0,0
|
|
标签选择器 、伪元素选择器
|
0,0,0,1
|
|
类选择器、属性选择器、伪类选择器
|
0,0,1,0
|
|
ID选择器
|
0,1,0,0
|
|
行内样式
|
1,0,0,0
|
|
@important
|
∞无穷大
|
1. 颜色的表现形式
英文字符 （提前定义好的 ）
十六进制 (使用#开头)
rgb （三原色） 取值范围 0-255
rgba a是透明度
2. 字体样式
font-family 字体的类型
color 字体颜色（前面不加font）
font-weight 取值范围是100-900 900是加粗效果 bold == 900
font-style 字体倾斜 italic
text-decoration: 字体划线
text-align 水平位置
letter-spacing 字体间隙
3. 尺寸样式
width 宽度
height 高度
line-height 行高 注意当一行的行高等于父级的高度的时候 就会产生垂直居中的一个效果
overflow
|
溢出
|
hidden
|
隐藏
|
scroll
|
元素会出现滚动条 当内容溢出的时候滚动条可用
|
auto
|
自动 没有溢出的时候就没有滚动条 一旦溢出就会出现滚动条
|
4. 背景样式
background-image 背景图片
background-repeat 背景图片平铺
contain 等比放大 直到背景图像的右边或者下边停止
7.元素分类
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素
1.块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
块级元素的特点：
-
独占一行
-
高度，宽度、外边距以及内边距都可以控制
-
宽度默认是容器（父级宽度）的100%
-
是一个容器及盒子，里面可以放行内或者块级元素
注意：
只有文字才能组成段落 ，因此 p 里面不能放块级元素，特别是 p 中不能放div
同理还有这些标签h1~h6,dt，他们都是文字类块级标签，里面不能放其他块级元素
2.行内元素(inline-level)
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素，有的地方也成内联元素
行内元素的特点：
-
相邻行内元素在一行上，一行可以显示多个
-
高、宽直接设置是无效的
-
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素
注意：
链接里面不能再放链接。
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全
3.行内块元素（inline-block）
在行内元素中有几个特殊的标签<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素
行内块元素的特点：
-
和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
-
默认宽度就是它本身内容的宽度。
-
高度，行高、外边距以及内边距都可以控制
8. 元素的显示与隐藏
1. opacity 透明度
控制元素的透明度
取值：0~1 （取值为0时完全不显示，为1时为元素初始状态）
2. display 显示状态
display 设置或检索对象是否及如何显示
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思
特点： 隐藏之后，不再保留位置
-
inline：行内元素
-
inline-block：行内块元素
-
block：块状元素
实际开发场景：
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
3. visibility 可见性
设置或检索是否显示对象
visibility：visible ; 对象可视
visibility：hidden; 对象隐藏
特点： 隐藏之后，继续保留原有位置
4. overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
|
属性值
|
描述
|
|---|---|
|
visible
|
不剪切内容也不添加滚动条
|
|
hidden
|
不显示超过对象尺寸的内容，超出的部分隐藏掉
|
|
scroll
|
不管超出内容否，总是显示滚动条
|
|
auto
|
超出自动显示滚动条，不超出不显示滚动条
|
实际开发场景：
-
清除浮动
-
隐藏超出内容，隐藏掉, 不允许内容超过父盒子
9. 盒子模型
每一个HTML元素都可以把它看成一个盒子，每个例子具有内容、内边距、边框、外边距
内容(content)
content: '123'
内边距(padding)
边框(border)
外边距(margin)
10. 样式属性拓展
1.鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
|
属性值
|
描述
|
|---|---|
|
default
|
小白 默认
|
|
pointer
|
小手
|
|
move
|
移动
|
|
text
|
文本
|
|
not-allowed
|
禁止
|
|
help
|
帮助
|
|
wait
|
等待
|
2.轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的
最直接的写法是 ： outline: 0; 或者 outline: none;
<input type="text" style="outline: 0;"/>
3.防止拖拽文本域resize
实际开发中，我们文本域右下角是不可以拖拽：
<textarea style="resize: none;"></textarea>
11.布局
CSS提供了3种方式来布局，分别是：普通流、浮动、定位
1.浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制
作用
-
让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段
-
可以实现盒子的垂直对齐等等..
-
浮动最早是用来控制图片，实现文字环绕图片的效果
语法
选择器 { float: 属性值; }
|
属性值
|
描述
|
|---|---|
|
none
|
元素不浮动（默认值）
|
|
left
|
元素向左浮动
|
|
right
|
元素向右浮动
|
float 属性会让盒子漂浮在标准流的上面，所以第二个标准流的盒子跑到浮动盒子的底下了
注意： 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐
清除浮动
浮动盒子不占原普通流的高度，会影响到布局，因此需要清除。清除浮动更准备的来说是清除浮动带来的效果
语法
选择器{clear:属性值;}
|
属性值
|
描述
|
|---|---|
|
left
|
不允许左侧有浮动元素（清除左侧浮动的影响）
|
|
right
|
不允许右侧有浮动元素（清除右侧浮动的影响）
|
|
both
|
同时清除左右两侧浮动的影响
|
但是我们实际工作中， 几乎只用 clear: both;
隔墙法（扩展）
2.定位
定位可以使盒子自由漂浮起来，便于我们布局。3种布局方式层级关系如下
普通流-->海底
浮动--->海面
定准--->天空
定位方式
选择器 { position: 属性值; }
| 取值 | 特点 |
|---|---|
| static | 静态定位是元素的默认定位方式，指定元素使用正常的布局 |
| relative | 相对于自己原来在标准流中位置来进行移动的(相对定位) |
| absolute | 相对于最近的非static定位父级元素来偏移(绝对定位) |
| fixed | 设置固定定位后 元素不会随滚动条移动而移动 |
|
样式
|
作用
|
|---|---|
|
top
|
控制上方的距离
|
|
left
|
控制左边的距离
|
|
right
|
控制右边距离
|
|
bottom
|
控制下面距离
|
绝对定位
相对定位
堆叠顺序（z-index）
3.弹性盒子
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器的属性
-
flex-direction
-
flex-wrap
-
flew-flow
-
justify-content
-
align-items
-
align-content
flex-direction
决定主轴的方向（即项目的排列方向）。
-
row: 默认值，表示沿水平方向，由左到右。
-
row-reverse ：表示沿水平方向，由右到左
-
column：表示垂直方向，由上到下
-
column-reverse:表示垂直方向，由下到上
flex-wrap
用于设置当项目在容器中一行无法显示的时候如何处理。
-
nowrap（默认）：不换行。
-
wrap：换行，第一行在上方。
-
wrap-reverse：换行，第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
第一个属性值为flex-direction的属性值
第二个属性值为flex-wrap的属性值
justify-content
用于设置项目在容器中的对齐方式。
-
flex-start：默认值，左对齐
-
flex-end：右对齐
-
center：居中对齐
-
space-between：两端对齐
-
space-around：每个项目两侧的间距相等
align-items
定义了项目在交叉轴上是如何对齐显示的
-
flex-start:交叉轴的起点对齐
-
flex-end 交叉轴的终点对齐
-
center 交叉轴居中对齐
-
baseline 项目的第一行文字的基线对齐
-
stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
-
flex-start：与交叉轴的起点对齐。
-
flex-end：与交叉轴的终点对齐。
-
center：与交叉轴的中点对齐。
-
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
-
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
-
stretch（默认值）：轴线占满整个交叉轴。
项目属性
-
order：设置项目排序的位置，默认值为0，数值越小越靠前
-
flex-grow：用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。
-
flex-shrink：表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。
-
flex-basis：表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。
-
flex： flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；
-
align-self：表示当前项目可以和其他项目拥有不一样的对齐方式。它有六个可能的值。默认值为auto
-
flex-start：顶端对齐
-
flex-end：底部对齐
-
center：竖直方向上居中对齐
-
baseline：item第一行文字的底部对齐
-
stretch：当item未设置高度时，item将和容器等高对齐
-
浙公网安备 33010602011771号