目录
1.CSS层叠样式表
CSS三大特性
- 层叠性:如果发生了样式冲突,那就会根据一定的规则(选择器优先级),进行样式层叠(覆盖)。
- 继承性:元素会自动拥有其父元素,或其祖先元素上所设置的某些样式。优先继承离得近的
- 优先级:!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * >继承的样式(多个选择器需要计算权重)
1.1基本语法
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明:
- 选择器通常是您需要设置样式的HTML元素
- 每条声明由一个属性和一个值组成
- 属性(property)是您希望设置的样式属性(style attribute)。属性与属性之前用分号,属性和值用冒号
1.2. 如何编写CSS
- 内联样式:将CSS代码直接写在HTML元素的style属性中
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">Hello World!</h1>
</body>
</html>
- 内部样式表:将CSS代码写在文档的<head>标签中的<style>标签中,直接在HTML文档中定义样式
<head>
<style>
/* CSS代码 */
</style>
</head>
- 外部样式表:将CSS代码保存到一个外部样式表文件中,然后通过文档头部的<link>标签来引入样式表
<head>
/*
引用外部的style.css,
rel属性:定义当前文档与被链接文档之间的关系。用于操作样式表时,rel属性的值为“stylesheet”
*/
<link rel="stylesheet" href="style.css">
</head>
- 样式优先级:当发生样式定义冲突时,浏览器首先会按照不同样式规则的优先级来应用样式;在相同的优先级下,则会按照样式定义的先后层次来应用样式,一般遵守"就近优先"原则
1.3CSS常用选择器
选择器权重算法:
CSS选择器用于定位你要操作的元素:
1. 3.1标签/元素选择器
选择所有的 <p>
元素,并将它们的文本颜色设置为红色
p {
color: red;
}
1.3.2. class类选择器
选择所有 class="red"
的任何元素,并将它们的文本颜色都设置为红色
.red {
color: red;
}
选择所有 class="red"
的div元素,并将它们的文本颜色都设置为黄色
div.red{
color: yellow;
}
1.3.3. id选择器
选择使用了 id="header"
的元素,并将它们的字体大小设置为 24 像素。id有唯一性
#header {
font-size: 24px;
}
1.3.4. 属性选择器
选择所有 target="_blank"
的 <a>
元素,并将它们的文本颜色设置为蓝色
a[target="_blank"] {
color: blue;
}
1.3.5. 组合选择器
- 选择所有
<h3>
元素和class="c1"的元素,并将它们的字体斜体
h3,.c1{
font-style: italic;
}
1.3.6. 层次选择器
- 空格:后代选择器,选择被div标签包裹的所有span标签
- '>':子代选择器,选择被div标签直接包裹的儿子,不会影响p标签中的span标签
- '+':兄弟选择器,选择div标签后面紧挨着的span标签,不会影响后续的兄弟标签,此标签只能影响后面的兄弟
div span{
font-weight: bolder;
background: red;
}
div > span{
font-weight: bolder;
background: red;
}
div + span{
font-weight: bolder;
background: red;
}
1.3.7. 伪类选择器
伪类是一种状态,给标签的一种状态设置样式就叫伪类选择器
伪类选择器:
<head>
/* 选中的是鼠标悬浮状态的a元素 */
a:hover{
color: orange
}
</head>
<body>
<a href="www.baidu.com"></a>
</body>
动态伪类
:hover:设置元素在其鼠标悬停时的样式
:read-only 选择有"readonly"的表单元素,注意只读包含禁用,所以也会影响具有"disabled"的表单元素
:read-write 选择没有"readonly"的表单元素,设置了disabled的元素也认为设置了readonly
:focus 选择拥有键盘输入焦点的元素 - 一般用于输入框中
结构伪类
:first-child 选择满足是其父元素的第一个子元素的元素
:last-child 选择满足是其父元素的最后一个子元素的元素
E:nth-child(n) { css样式 } - n可以是数子,2n,2n-1,even奇数,odd偶数,具体请看稳定
会选择父元素的第n个子元素E,如果第n个子元素不是E,则是无效选择符,但n会递增
否定伪类
:not(selector) 选择不满足selector的元素
UI伪类
:checked+要改变的元素 选择每个被选中的元素
:enable 选择每个已启动的元素
:disabled 选择每个已禁止的元素
注意:CSS3出现了伪元素选择器,有兴趣百度研究
::first-letter 选择指定元素的第一个单词
::first-line 选择指定元素的第一行
::after 在指定元素的内容前面插入内容
::before 在指定元素的内容后面插入内容
1.4CSS常用样式
1.4.1文本样式
示例:
<style>
p{
font-family: Arial; /* 字体类型:Arial */
font-size: 40px; /* 字体大小:40个像素点 */
color: orangered; /* 字体颜色:橙红色 */
font-weight: bolder; /* 文本重量:文本加粗 */
font-style: italic; /* 字体样式:斜体 */
text-align: center; /* 文本水平位置:居中 */
text-decoration: underline; /* 文本修饰:下划线 */
text-transform: uppercase; /* 文本转换:转大写 */
line-height: 1; /* 行高 - 可以用来调整上下高度 */
text-shadow: 15px 15px 2px #000000; /* 文本阴影:x轴 y轴 模糊度 颜色 */
}
</style>
<p>HelloWorld</p>
1.4.2背景样式
CSS中的background属性用于设置元素的背景样式,包括背景颜色、图片、定位等属性。常用样式如下:
示例:
<div class="box"></div>
<div class="box"></div>
<style>
.box{
width: 700px; /* 宽度:700个像素 */
height: 500px; /* 高度:500个像素 */
border: 1px solid gold; /* 边框:1个像素宽度 边框样式实线 边框颜色金色 */
background-color: aqua; /* 背景颜色:aqua */
/* background-color: rgba(255,255,125,0.5); *//* 还可以指定透明度 */
margin: 0 auto; /* 外边距:上下0 左右自动*/
}
body{
/*background-image: url("images/zbc.webp");*/ /* 背景图片:url地址 */
/*background-repeat: no-repeat;*/ /* 背景重复:不重复 */
/*background-position: top right;*/ /* 背景定位:顶部 右边 */
/*background-attachment: fixed;*/ /* 背景附属:固定 - 不随滚动条移动 */
/*还有一种简洁方法,将背景统一设置,加上背景颜色称之为背景五合一*/
/* 背景复合属性:位置可以换,也可以省略,因为样式值是唯一的不会冲突。一般建议背景颜色放在最前面 */
background:pink url("images/01.jpg") no-repeat top right fixed;
}
</style>
1.4.3光标样式
默认情况下,光标会根据用户的操作发生改变。比如当鼠标悬停在一个链接上时,光标将从指针形状变为手状形状。当鼠标悬停在文本区域时会显示 I 形状。而当鼠标悬停在一个按钮上时光标会显示为箭头
可以使用 cursor 属性指定显示给用户的鼠标光标类型(形状),该属性常用的取值有:
1、url:需要使用的自定义光标的URL
2、default:默认光标,通常是一个箭头
3、auto:默认,浏览器设置的光标
4、crosshair:光标呈现为十字线
5、pointer:光标呈现为一只手
6、move:指示某对象可以移动
7、e-resize:指示矩形框的边缘可被向右移动
8、ne-resize:指示矩形框的边缘可被向上以及向右移动
9、nw-resize:指示矩形框的边缘可被向上以及向左移动
10、n-resize:指示矩形框的边缘可被向上移动
11、s-resize:指示矩形框发热边缘可被向下移动
12、se-resize:指示矩形框的边缘可被向下以及向右移动
13、sw-resize:指示矩形框的边缘可被向下以及向左移动
14、w-resize:指示矩形框的边缘可被向左移动
15、text:光标指示文本
16、wait:指示程序正忙
17、help:指示可用的帮助
18、not-allowed:禁止
19、no-drop:无法释放
示例:
<style>
a:hover{
/* cursor: pointer; */
/* 图片没问题时显示图片,图片有问题时显示第二个值 */
cursor: url("images/pointer02.png"),no-drop;
}
</style>
<a href="#">点我升天!</a>
1.4.4列表样式
列表样式主要是列表项样式:list-style-type,list-style-image
list-style-type属性用于控制列表中列表项标志的样式。该属性的取值需要依据列表的类型
list-style-image属性可以用来替换列表项的标记
示例:
<style>
ol{
list-style-type:circle;
}
ul{
list-style-type: upper-alpha;
}
</style>
<ol>
<li>霸王别姬</li>
<li>大话西游</li>
<li>功夫</li>
</ol>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
列表项图像
通过为list-style-image属性赋值一个图像的URL来显示图像标志。但是在设置图像标志时,建议始终规定一个 list-style-type属性以定义常规标志。这样做的好处在于,如果图像不存在或者因为某种原因导致图像不可用时,可以替换显示常规标志
ol{
list-style-image: url("images/list01.png");
}
注意:列表项图像设置的图像需要小尺寸的才便于显示
1.4.5表格特有属性
控制表格的列宽:table-layout:auto(自动,默认值) | fixed(固定列宽,平均分)
控制单元格间距:border-spacing:1px
合并相邻的单元格的边框:broder-collapse:separate(默认值,不合并) | collapse(合并)
注意:使用broder-collapse合并单元格后,broder-spacing控制单元格间距无效
隐藏没有内容的单元格:empty-cells:show | hide
注意:使用合并相邻单元格边框后无效(生效了,只是没有效果被其他表格顶下去)
1.5overflow属性
overflow属性规定当内容溢出元素框时如何处理,可能的取值为:
visible:内容不会被修剪,会呈现在元素框之外,为默认值
hidden:内容会被修剪,并且其余内容是不可见的
scroll:内容会被修剪,但是始终会显示滚动条以便查看其余的内容
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
其他属性:
overflow-x:hidden | scroll | auto
overflow-y:hidden | scroll | auto
示例:
<div>
别指望减肥了,八戒走了十万八千里,也没见瘦下来,而且,他还吃素
</div>
<style>
div{
width: 200px;
height: 100px;
background: #ff4433;
white-space: nowrap; /* 不换行 */
/* word-wrap: break-word; 允许超出元素内容部分自动换行 */
overflow: hidden; /* auto | scroll | 默认visible |*/
overflow-x: hidden; /* auto | scroll | 默认visible |*/
overflow-y: hidden; /* auto | scroll | 默认visible |*/
}
</style>
1.6display属性
CSS中的display属性用于定义元素的布局方式和外观,**让块级元素和行内元素相互转换。常见的取值有block、inline、inline-block、none等
none:让生成的元素根本没有框,该框及其内容不再显示,不占用文档中的空间
block块级:让行内元素(比如<a>元素)表现得像块级元素一样,设置width、height有效,独占一行
inline行内:让块级元素(比如<p>元素)表现得像内联或行内元素一样,设置width、height无效,一行可显示多个
inline-block行内块:设置width、height有效,一行可显示多个
1.7盒子模型
1.7.1什么是盒子模型
盒子模型是指CSS中的一个重要概念,用来描述一个元素在页面中占据的空间和位置
在CSS中认为所有的HTML标签都是一个盒子,这些盒子有以下内容:边框border、内容content、内边距padding(内容与边框的距离)、外边距margin(盒子与盒子之间的距离)
1.7.2盒子模型详解
每个盒子都有:边界、边框、填充、内容四个属性。并且每个盒子都有尺寸。每个属性都包括四个部分:上、右、下、左这四部分,可同时设置,也可分别设置
盒子有尺寸,用CSS写法为宽度(width)和高度(height)
盒子有边框,用CSS写法为上下左右边框(border)
盒子有内边距,CSS写法为上下左右内边距(padding)
盒子有外边距,CSS写法为上下左右外边距(margin)
在HTML中,所有的容器标签都可以认为是一个盒子,但是行内标签与块标签有着明显的差别。 行内标签无法设置尺寸(宽度和高度)等等,块级标签才是一个完整的盒子,具有四大属性以上四大属性
1.7.3高度和宽度
行内标签无法设置宽度(width)和高度(height),块级元素可以,一般高度不需要设置,由内容撑高
1.7.4.边框border
边框、内边距和外边距是CSS中盒子模型的三个基本部分,它们都可以通过CSS样式来设置
边框:元素周围的边框线,可以设置边框线的样式、颜色和宽度等属性。通常用border属性来设置边框
.box {
border: 1px solid #000;
}
上面的代码中,表示.box元素设置了一条1像素宽的黑色实线边框
注意:也可以设置某一边的边框样式
border-bottom-left-radius/border-top-right-radius - 设置某一边圆角
border-top/bottom/left/right-width - 设置或检索对象顶/底/左/右边样式
1.7.5 内边距padding
内边距:元素内容区域和边框之间的距离,可以设置内边距的大小。通常用padding属性来设置内边距
.box {
padding: 20px;
}
上面的代码中,表示.box元素的内容区域和边框之间的距离为20像素
内边距属性的特殊说明:
1. 设置内联块级元素和块级元素的内边距
2. 行内元素可以设置左、右两边的内边距。若要设置上、下两边的内边距,必须先使该元素变为块级或内联块级元素
3. 改变padding的值,会改变了整个盒子的大小,因为内容宽高是固定了,添加padding会撑大盒子的尺寸
4. 但改变margin的值,则不改变整个盒子的大小,因为margin是盒子与盒子之间的距离,与盒子本身大小无关
1.7.6. 外边距margin
外边距:元素和其他元素之间的距离。可以设置外边距的大小和负值。通常用margin属性来设置外边距
.box {
margin: 10px;
}
上面的代码中,表示.box元素和其他元素之间的距离为10像素
外边距属性的特殊说明:
1. 内联块级元素和块级元素的可以设置外边距
2. 内联元素可以设置左、右两边的外边距。若要设置上、下两边的外边距,必须先使该元素变为块级元素或内联块级元素
3. 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
4. 如果提供两个,第一个用于上、下,第二个用于左、右。
5. 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下
1.7.7盒子阴影
box-shadow属性用于设置盒子的阴影用于设置盒子阴影
<div style="width: 200px;height: 200px;border: 1px solid black;box-shadow: 1px 1px 10px red;">
</div>
<div style="width: 200px;height: 200px;border: 1px solid black;box-shadow: 1px 1px 10px 10px red;">
</div>
none: 无阴影
第1个长度值:用来设置对象的阴影水平偏移值。可以为负值
第2个长度值:用来设置对象的阴影垂直偏移值。可以为负值
第3个值:用来设置对象的阴影模糊值。不允许负值
第4个值:设置对象的阴影的大小,不设置阴影大小,第四个值就是颜色
第5个值:设置对象的阴影的颜色
过度动画效果:transition: all 2s;
1.8.Flex弹性布局
Flex是Flexible Box的缩写,意为”弹性布局”,用来替代float浮动布局
任何一个容器都可以指定为Flex布局。
/* 启用弹性布局 */
.box{
display: flex;
}
行内元素也可以使用Flex布局。以下写法代表将display:inline和display:flex结合起来
/* 启用弹性布局,并变为行内元素 */
.box{
display: inline-flex;
}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
1.8.1基本概念
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
1.8.2容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.8.2.1flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值:
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
1.8.2.2flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
1.8.2.3flex-flow(了解)
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
1.8.2.4justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。也就是水平对齐
.box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
- space-evenly:平均对齐,在CSS3后续才加入的,是平均对齐
1.8.2.5align-items属性
align-items属性定义项目在交叉轴上如何对齐。也就是当前行的垂直对齐,分行对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。重点
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
1.8.2.6align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。也就是垂直对齐,不分行对齐。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取6个值。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
1.8.2.7flex-grow属性(重点)
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。