文章目录
1.选择器
1.1基础选择器
1.1.1 标签选择器
标签名 {
属性:值;
}
p {
color: red;
font-size: 20px;
…………
}
不能差异化显示
1.1.2 类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器
语法:
结构需要用class属性来调用 class 类的意思
css 中定义类 (.name)[name 不能为标签名]
.red {
color:red;
}
HTML 中调用类(class=“name”)
<div class="red">
选择css中的类,就可以改变相应的属性
</div>
<p class="red">
我也要变红
</p>
1.1.3 id 选择器
id选择器 可以为标有id的HTML元素指定特定的样式。
HTML 元素以id属性 来设置id选择器,css中的id选择器以 “#” 来定义
语法:
CSS 中,以 # 号开头定义 id
#name {
element: value;
……
}
HTML中,通过 id=“name” 来调用
<p id="name">
……
</p>
注意:
一个 id 选择器只能被调用一次,过后就不能被调用了
1.1.4 通配符选择器
在CSS中,通配符选择器使用 "*"定义,它表示选取页面中所有元素(标签)。
语法:
*{
element: value;
……
}
2.字体属性
2.1 字体系列
CSS 使用 font-family 属性定义文本的字体系列。
p {font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft","微软雅黑";}
2.2 字体大小
CSS 使用 font-size 属性定义字体大小
p {
font-size: 20px;
}
h1 {
font-size: 30px;
}
/*标题标签比较特殊,需单独指定*/
2.3 字体粗细
CSS 使用 font-weight 属性定义字体粗细
一般更提倡用 数字(不跟px) 表示粗细
语法:
p {
font-weight: 700;
}
注:400=normal 700=bold
2.4 字体样式
CSS 中使用 font-style 属性设置文本风格
p {
font-style: normal;
}
属性值 | 作用 |
---|---|
normal | 浏览器的默认字体样式 |
italic | 倾斜体 |
2.5 字体复合属性
字体复合属性可以把以上文字样式综合起来写,这样可以更节约代码
语法:
body {
/*font-style font-weight font-size/line-height font-family*/
/*顺序不能改变,字体大小和字体不能省略*/
font: italic 700 20px "Microsoft yahei";
}
3. 文本属性
3.1 文本颜色
color 属性用于定义文本的颜色
div {
color: red;
}
表示 | 属性值 |
---|---|
预定义的颜色值 | red;green;blue; |
十六进制 | #FF0000; #FF6600; #29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
3.2 文本对齐
text-align 属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center;
}
属性 | |
---|---|
right | 右对齐 |
center | 居中 |
left | (默认)左对齐 |
3.3 装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}
属性值 | 描述 |
---|---|
none | 默认。没有装饰线(最常用)取消a签自带下划线 |
underline | 下划线。链接 a 自带下划线 |
overline | 上划线 |
line-through | 删除线 |
3.4 文本缩进
text-indent 属性用来指定文本的第一行缩进,通常是将段落的首行进行缩进
div {
text-indent: 10px;
}
em 是一个相对单位,就是当前元素(font-size)1个文字的大小
p {
text-indent: 2em;
}
3.5 行间距
line-height 属性用于设置行间距(行高)。可以控制文字 行与行之间的距离
p {
line-height: 26px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vX3IkofA-1692000496447)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20211224192809348.png)]
4.CSS 的引入方式
4.1 内嵌样式表
将CSS包含在HTML的< style> 标签中
4.2 行内样式表
行内样式表(内联样式表)是在元素标签内部的style 属性中设定CSS格式。适用于修改简单样式
<div style="color: red; font-size:12px;">
…………
</div>
4.3 外部样式表
在HTML页面中,使用< link> 标签引入这个文件
<link rel="stylesheet" href="css文件路径">
5.Emmet 语法
- 生成标签 直接输入标签名 按tab键即可,
- 想要生成多个标签 加上 * 就可以了比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签,可以用 > 比如 ul > li 就可以了
- 如果有兄弟关系的标签,用 + 就可以了,如div+p
- 如果生成带有类名或者id名字的,直接写 .demo 或者 #two tab键就可以了
- 如果生成的div类名是有顺序的,可以用自增符号$
6. 复合选择器
6.1 后代选择器
选择父元素里面的子元素。当标签发生嵌套时,内标签就成为外标签的后代
语法:
标签1 标签2 {
element: value;
}
标签2 是标签1 子标签
二者用空格分开
6.2 子选择器
只能选择作为某元素的最近一级子元素
语法:
标签1 > 标签2 {……}
上述语法表明选择标签1 里面的所有直接后代(子标签)标签2
- 标签1 和标签2 中间用 大于号 隔开
6.3 并集选择器
选择多组标签,同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号","连接而成,任何形式的选择器都可以作为并集选择器的一部分
语法:
标签1,标签2{……}
用逗号隔开
6.4 伪类选择器
用于向某些选择器添加特殊效果,比如给链接添加特殊效果,或选择第1 个,第n元素;
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover、:first-child
6.4.1链接伪类
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
注意事项:为了确保生效,请按照LVHA的顺序声明::link-:visited-:hover-:active.
6.4.2 foucs 伪类选择器
:foucs 伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况下< input> 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
input:foucs {
background-color: yellow;
}
7.元素显示模式
7.1 块元素
常见的块元素有< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等,其中< div>是最经典的块元素
块元素的特点:
- 独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 默认宽度是容器(父级宽度)的100%
- 是一个容器的盒子,里面可以放行内或者块级元素
注意:
- 文字类的标签内不能使用块级元素
- < p>标签主要用于存放文字,因此< p>里面不能放块级元素,特别是不能放< div>
- < h1>~< h6>同理
7.2行内元素
常见的行内元素有< a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>
其中< span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
特点:
- 相邻行内元素在一行上,一行可以显示多行
- 高、宽直接设置是无效的。
- 默认宽度就是他本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意:
- 链接里面不能放链接
- < a>里面可以放块级元素,但是给< a>转换一下块级模式最安全
7.3 行内块元素
在行内元素中有几个特殊的标签——< img/>、< input/>、< td>。
行内块元素的特点:
- 和相邻行内元素(行内块)在一行,但是他们之间会有空白缝隙。一行可以显示多个。
- 默认宽度就是他本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制。
7.4模式转换
- 转换为块元素: display:block
- 转换为行内元素:display:inline
- 装换为行内块 :display:inline-block
8.背景属性
8.1背景平铺
如果需要HTML页面上对背景图像进行平铺,可以使用background-repeat属性
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值 | 作用 |
---|---|
repeat | 背景图像在纵向和横向上平铺(默认的) |
no-repeat | 背景图像不平铺 |
repeat-x | 背景图像在横向上平铺 |
repeat-y | 背景图像在纵向上平铺 |
8.2背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position: x y;
参数代表的意思是:x 坐标和y 坐标,可以使用 方位名词和精确名词
参数值 | 说名 |
---|---|
length | 百分数|由浮点数和单位标识符组成的长度值 |
position | top | center | bottom | left | right 方位名词 |
9.三大特性
9.1 层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(覆盖)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
- 样式冲突,遵循的原则就是就近原则,那个样式离结构近,就执行哪个样式
- 样式不冲突,不会层叠
9.2 继承性
字标签会继承父类标签的某些样式,如文本颜色和字号;
- 恰当地使用继承可以简化代码,降低CSS样式的复杂性
- 子元素可以继承父元素的样式(text-,font-,line- 这些元素开头的可以继承,以及color属性)
9.3 优先级
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KOUrnWlE-1692000496447)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20211225235300562.png)]
继承的权重为0
10.盒子模型
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容
10.1 边框(border)
border 可以设置元素的边框。边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色
- 语法:
border:border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框样式 |
border-color | 边框颜色 |
- 简写:
border:1px solid red; /*无顺序*/
- 边框分开写法:
border-top:1px solid red; /*只设置上边框,其余同理*/
- border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法:
border-collapse:collapse;
- collapse 单词是合并的意思
- border-collapse:collapse; 表示相邻边框合并在一起
10.2 内边距(padding)
padding 属性用于设置内边距,即边框与内容之间的距离
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
简写:
值的个数 | 表达的意思 |
---|---|
padding:5px | 1个值,表示上下左右都有5 像素内边距 |
padding:5px 10px | 2个值,表示上下内边距是5 像素,左右内边距是10像素 |
padding:5px 10px 20px | 3个值,表示上内边距5像素,左右内边距10像素,下边距20像素 |
padding:5px 10px 20px 30px | 4个值,上右下左 |
10.3 外边距(margin)
margin 属性用于设置外边距,即控制盒子和盒子之间的距离
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
块级盒子水平水平居中:
- 盒子必须指定宽度(width)
- 盒子左右的外边距都设置为auto
.header {width:960px;margin:0 auto;}
常见的写法有三种:
- margin-left:auto;margin-right:auto;
- margin:auto;
- margin:0 auto;
垂直外边距合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mBHO9tt-1692000496448)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20211226232230028.png)]
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sZFenSUf-1692000496448)(C:\Users\86152\AppData\Roaming\Typora\typora-user-images\image-20211226232655125.png)]解决方案:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加overflow:hidden。
10.4 清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
* {
padding: 0;
margin: 0;
}
注意∶
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了心
11.盒子样式
11.1 圆角边框
border-radius 属性用于设置元素的外边框圆角
语法:
border-radius:length;
- 设置圆形边框:
- length 取为正方形块边长的一半;
- 设置两边圆形边框:
- length 取为矩形块宽的一半;
- length 可以同时取四个值:
- 分别对应:左上、右上、右下、左下
11.2盒子阴影
CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。
语法:
box-shadow:h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影位置,允许负值 |
v-shadow | 必需。垂直阴影位置,允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影(outset)改为内部阴影 |
默认为outset ,但不能主动设置为outset
11.3文字阴影
在css3中,我们可以使用text-shadow属性将阴影应用于文本。
语法:
text-shadow:h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影位置,允许负值 |
v-shadow | 必需。垂直阴影位置,允许负值 |
blur | 可选。模糊距离 |
color | 可选。阴影颜色 |
12.浮动(float)
12.1 浮动语法
网页布局第一准则:
- 多级块级元素纵向排列找标准流
- 多个块级元素横向排列找浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 {float:属性值;}
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
12.2 浮动特性
-
浮动元素会脱离标准流(脱标)
a. 脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)
b.浮动的盒子不再保留原先的位置
-
浮动的元素会一行内显示并且元素顶部对齐
a.注意∶浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮 动的盒子,多出的盒子会另起一行对齐。
-
浮动的元素会具有行内块元素的特性
a.如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
b.浮动的盒子中间是没有缝隙的,是紧挨着一起的
c.行内元素同理
13.清除浮动
-
清除浮动本质是清除浮动元素造成的影响
-
如果父盒子本身有高度,则不需要清除浮动
-
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
选择器 { clear:属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动影响 ) |
right | 不允许右侧有浮动元素(清除右侧浮动影响) |
both | 同时清除左右两侧浮动的影响 |
实际开发中,几乎只用clear:both
清除浮动的策略:闭合浮动
清除浮动的方法
-
额外标签法也称为隔墙法,是W3C推荐的做法。
-
父级添加overflow属性
-
父级添加after伪元素
-
父级添加双伪元素
a.额外标签法
额外标签法也称为隔墙法,是 W3C推荐的做法。
额外标签法会在浮动元素未尾添加一个空的标签。例如<div style=" clear:both”></ div>,或者其他标签(如< br />等)。
-
优点︰通俗易懂,书写方便
-
缺点︰添加许多无意义的标签,结构化较差
注意:要求这个新的空标签必须是块级元素。
b.父级添加overflow
可以给父级添加overflow属性,将其属性值设置为hidden、auto或 scroll 。
- 优点:代码简洁
- 缺点:溢出部分无法看见
c.after 伪元素法
:after 方式也是给父类添加
.clearfix:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
/*IE6、7专有*/
*zoom:1;
}
d.双伪元素清除浮动
.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
/*IE6、7专有*/
*zoom:1;
}
14.PS切图
14.1 常见的图片格式
- jpg图像格式∶JPEG ( JPG )对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的
- gif图像格式∶GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果
- png图像格式是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景.如果想要切成背景透明的图片,请选择png格式.
- PSD图像格式PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说,最大的优点我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.
14.2 PS切图
- 图层导出
- 切片导出
- 插件
15.CSS属性书写顺序
建议遵循以下顺序:
-
布局定位属性 : display / position / float / clear / visibility / overflow(建议display第一个写,毕竟关系到模式)
-
自身属性: width / height / margin / padding / border / background
-
文本属性: color / font / text-decoration / text-align / vertical-align / white-space / break-word
-
其他属性(CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient .
16. 页面布局整体思路
为了提高网页制作的效率,布局时通常有以下的整体思路∶
- 必须确定页面的版心(可视区),我们测量可得知。
- 分析页面中的行模块,以及每个行模块中的列模块。其实页面布局第一准则.
- 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置.页面布局第二准则
- 制作HTML结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要.
- 所以,先理清楚布局结构,再写代码尤为重要.这需要我们多写多积累.
17.定位
-
浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。
-
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏墓中某个位置,并目可以压住其他盒子.
定位︰将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
17.1 定位模式
定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
17.2 边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right 4个属性。
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离。 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离。 | |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离。 | |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
17.3 相对定位
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
语法:
选择器 {position:relative;}
相对定位特点:
- 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置(移动位置的时候,参照点是自己原来的位置)
- 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)
17.4 绝对定位
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
语法:
选择器 {position:absolute;}
绝对定位的特点:
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原来的位置(脱标)
17.5 固定定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景︰可以在浏览器页面滚动时元素的位置不会改变
语法:
选择器 {position:fixed;}
固定定位特点:
- 以浏览器可视窗口为参照点移动元素
- 跟父类元素没有任何关系
- 不随滚动条滚动
- 固定定位不再占有原先位置(脱标)
17.6 粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。
语法:
选择器 {position:sticky;top:10px;}
粘性定位的特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差,IE不支持。
17.7 定位叠放次序
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)
语法:
选择器 {z-index: 1;}
- 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上
- 如果属性值相同,则按照书写顺序,后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
17.8 拓展
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容。
18.元素的显示与隐藏
18.1 display
- display:none;隐藏对象
- display:block;出了转换为块级元素之外,同时还有显示元素的意思
display隐藏元素后,不再占有原来位置。
18.2 visibility
visibility属性用于指定一个元素应可见还是隐藏。
-
visibility : visible;元素可视
-
visibility : hidden;元素隐藏
visibility隐藏元素后,继续占有原来的位置。
18.3 overflow
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超窋自动显示滚动条,不超出不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
但是如果有定位的盒子,请慎用overflow:hidden因为它会隐藏多余的部分。