CSS基础进阶

最新推荐文章于 2023-07-09 21:24:46 发布

wy_43431863

最新推荐文章于 2023-07-09 21:24:46 发布

阅读量225

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43431863/article/details/121065338

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS基础

1、语法

在这里插入图片描述

选择器

标签选择器，以标签名称作为选择器
类选择器 .类名

-样式点定义，结构类(class)调用，一个或多个，开发最常用

在这里插入图片描述
规范

类选择器多类名使用

id选择器 #id

 样式#定义，结构id调用，只能调用一次，别人切勿使用

通配符选择器* {…}–将页面中所有标签修改样式
总结

字体属性

1、字体系列

当有好多个字体时先看用户网页有没有第一个字体，没有的话看第二个，都没有的话使用用户默认字体。

在这里插入图片描述

字体大小font-size
字体粗细 font-weight=>font-weight: 700;
nomal=400
bold=700
文字样式 font-style
nomal:正常
italic:倾斜
CSS复合属性

font: font-style font-weight font-size/line-weight font-family
其中font-size font-family不能省
eg:font: italic 700 16px 'Microsoft yahei'--顺序重要

CSS文本属性
1、color
2、对齐文本text-align 水平对齐

-  left
- right
- center

3、装饰文本text-decoration

给文本添加上划线、下划线、删除线

在这里插入图片描述
4、文本缩进text-indent

段落首行缩进
text-indent: 2em;//缩进当前元素两个文字的大小

5、行间距 line-height
在这里插入图片描述
测量行高技巧

文本属性总结
CSS引入方式
根据CSS书写的位置或者引入的方式不同，CSS样式表分为3类
1、内部样式表

2、行内样式表

3、外部样式表
样式单独放到CSS文件中
Chrome调试工具

CSS（二）

Emmet语法

快速生成HTML结构语法
快速生成CSS

1、width: 100px; // w100 tab
2、text-indent: 2em; // ti2em
3、/* lh26px   */
  line-height: 26px;
4、/* tdn */
  text-decoration: none;

右键格式化文档

CSS的复合选择器

是啥
后代选择器
子选择器

div>p  选择所有div里面所有最近一级P标签元素
元素1是父级、元素2是子级，最终选择的是元素2
元素2是亲儿子

在这里插入图片描述

并选择器
伪类选择器

注意事项

开发中常用写法
focu伪类选择器
复合选择器总结

CSS的元素显示模式

什么是元素的显示模式
块元素
行内元素
行内块元素
元素显示模式总结
元素显示模式转换

需要元素模式的转换，即一个模式的元素需要另外一种模式的特性，比如行内元素需要块内元素可以改变大小的特性
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块：display:inline-block;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 使行内元素具有块内元素可以定义长宽的性质 */
            display: block;
        }

        div {
            /* width: 100px;
            height: 100px; */
            /* 使块内元素具有行内元素可以并行在一行上的性质 */
            display: inline;
        }

        span {
            width: 300px;
            height: 300px;
            /* 行内元素转换为行内块元素 */
            display: inline-block;
            background-color: purple;
        }
    </style>
</head>

<body>
    <a href="#">金星阿姨</a>
    <a href="#">金星阿姨</a>
    <div> 我是块级元素</div>
    <div> 我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

snipaste
简洁版小米侧边栏

1、将行内元素a标签转换为块内元素，使得每个链接独占一行
2、鼠标经过时，背景颜色更改，通过:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            height: 40px;
            width: 231px;
            display: block;
            background-color: rgb(83, 87, 88);
            font-size: 14px;
            color: honeydew;
            text-decoration: none;
            text-indent: 2em;
        }
        a:hover {
            background-color: rgb(254, 103, 0);
        }
    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

单行文字垂直居中

CSS的背景

背景颜色bgi

background-image : none | url (url) 
参数： 
none : 　无背景图
url : 　使用绝对或相对地址指定背景图像

背景图片

语法： 
background-color : transparent | color 
参数： 
transparent : 　背景色透明
color : 　指定颜色。请参阅颜色单位和附录：颜色表

背景平铺

repeat : 　背景图像在纵向和横向上平铺
no-repeat : 　背景图像不平铺
repeat-x : 　背景图像在横向上平铺
repeat-y : 　背景图像在纵向平铺 
页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色

背景图片位置background-position

语法： 
background-position : length || length
background-position : position || position 
参数： 
length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位 
position : 　top | center | bottom | left | center | right 
 - 1、参数是方位名词
 background-position：left top;//(水平) (垂直)
 background-position：right center;//(水平) (垂直)
 如果只有一个参数，则另一个参数默认居中对齐
- 2、参数是精确单位
第一个是x坐标,第二个1是y坐标
只有一个值，这个值是x，另一个默认垂直居中的
- 3、混合单位
两个值是精确单位和混合名词混用的，第一个值是x坐标,第二个值是y坐标。

打开网上图片的方法
在这里插入图片描述

背景图像固定bga

语法：  
background-attachment : scroll | fixed 
参数： 
scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定 
说明： 
设置或检索背景图像是随对象内容滚动还是固定的。

复合背景写法

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

背景颜色半透明

background: rgba(0,0,0,0.3);
最后一个参数alpha：透明度取值在0~1之间

总结
五彩导航案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav a {
            text-decoration: none;
            display: inline-block;
            width: 120px;
            height: 58px;
            line-height: 48px;
            background-color: pink;
            text-align: center;
            color: white;
        }

        .nav .bg1 {
            background-image: url(../images/bg1.png);
        }

        .nav .bg1:hover {
            background-image: url(../images/bg11.png);
        }

        .nav .bg2 {
            background-image: url(../images/bg2.png);
        }

        .nav .bg2:hover {
            background-image: url(../images/bg22.png);
        }

        .nav .bg3 {
            background-image: url(../images/bg3.png);
        }

        .nav .bg3:hover {
            background-image: url(../images/bg3.jpg);
        }

        .nav .bg4 {
            background-image: url(../images/bg4.png);
        }

        .nav .bg4:hover {
            background-image: url(../images/bg1.png);
        }

        .nav .bg5 {
            background-image: url(../images/bg5.png);
        }

        .nav .bg5:hover {
            background-image: url(../images/bg4.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
</body>

</html>

CSS的三大特性

1、层叠性

样式冲突，就近原则
样式不冲突，不会层叠性质
div {
color: red;
}
div {
color: pink;
}

在这里插入图片描述

2、继承性
子标签继承父标签的某些样式，如文本颜色和字号{text-,font-,line-这些元素开头的可以继承以及color属性}

行高的继承性
1）行高带单位

2）行高不带单位–子元素行高就是当前文字大小乘以参数大小
优势：子元素可以根据自己文字大小调整行高
3、优先级
1、选择器相同，则执行层叠性

2、选择器不同，则根据选择器权重执行
在这里插入图片描述

**注意！**不管父元素权重有多高，子元素得到的权重都是0

复合选择器叠加权重
复合选择器有权重叠加的问题
权重虽然会叠加但是不会进位 0，0，0，10

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 继承的权重为0 */
        .nav {
            color: red;
        }

        li {
            color: pink;
        }

        /* 权重10 */
        .pink {
            color: yellowgreen;
            font-weight: 700;
        }

        /* 权重11 */
        .nav1 li {
            color: royalblue;
        }

        .nav2 li {
            color: rebeccapurple;
        }

        .nav2 .pink1 {
            color: pink;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </div>
    <div class="nav1">
        <li class="pink">4</li>
        <li>5</li>
        <li>6</li>
    </div>
    <div class="nav2">
        <li class="pink1">7</li>
        <li>8</li>
        <li>9</li>
    </div>
</body>

</html>

在这里插入图片描述

盒子

1.1、盒子模型
1.2 边框

语法： 
 
border : 
border-width ：单位px，粗细
border-style ：
			1、solid实线边框
			2、dashed虚线边框 
			3、dotted:点线边框
border-color ：

1.3边框简写&上、下、左、右边框

border：1px solid res;没有顺序
上边框：border-top：5px solid pink;
下边框：border-bottom：10px dashed purple;
左边框：border-left
右边框：border-right

1.4表格的细线边框

/* 合并相邻边框 */
            border-collapse: collapse;

边框会影响盒子实际大小

测量时不量边框，加边框就会增加上下左右边框的大小

1.5、内边距
1.6、盒子模型之内边距复合写法
1、内边距也会影响盒子实际大小解决方案：要保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可
2、内边距不影响盒子大小的情况：如果盒子本身未指定width/height属性，则此时padding不会撑开盒子大小解释：2.1、块元素标签，且本身未指定宽度，默认宽度就是浏览器的宽度，再怎么增加内边距，盒子宽度不会变，只会改变高度 2.2、下面这种情况不会改变盒子大小
案例：新浪版导航栏案例：新浪版导航栏
1.7 外边距margin
外边距典型应用
1.8、行内元素和行内块元素水平居中

给父元素添加text-align:center即可

1.9、外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值

在这里插入图片描述

1.10、清除内外边距

清除内外边距的原因：不同的浏览器默认的内外边距是不一样的
以后写CSS默认第一句
* {
	margin：0；
	padding：0；
}

行内元素尽量只设置左右的内外边距，因为上下边距设置了也没作用
但是转换为块级和行内块元素就可以了

PS基本操作
产品模块案例

在这里插入图片描述

去掉li前面项目符号的小圆点

list-style:none;

圆角边框 border-radius: length;–length数值或百分比设置的越大，弧度越大。

做圆形

先设置一个正方形，然后让圆角值设置为高度的一般即可或者写为50%

圆角矩形

先设置一个矩形，圆角值设置为高度的一半

设置不同的圆角–如果跟两个值就是对角数值一样

盒子阴影box-shadow && 文字阴影 text-shadow

语法

在这里插入图片描述

h-shadow越大，阴影越往右走，v-shadow越大，阴影越往下走，blur表示的是阴影的虚实，为0即为纯实阴影，数值越大越虚，spread越大，阴影面积越大，insert默认外阴影，outset不写。

CSS浮动

11.1 浮动

在这里插入图片描述

为什么需要浮动

有很多的布局效果，标准流无法完成，此时可用浮动完成布局，因为浮动可以改变很多标签的默认的排列方式
典型应用：让多个块级元素一行内排列显示
网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动

1）
在这里插入图片描述
2）

浮动特性（重难点）
1、浮动元素会脱离标准流

2、浮动的元素会一行内显示并且元素顶部对齐
在这里插入图片描述

3、浮动的元素会具有行内块元素的特性

当给行内元素加了浮动之后，行内元素就可以设置高度了，也即**- 任何元素都可以浮动，不管原先是什么模式的元素，添加了浮动之后具有行内块元素的特性**

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来定
浮动的盒子中间是没有缝隙的，是紧挨着的
行内元素同理

浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

网页布局三大准则

1多个块级元素纵向排列找标准流，横向排列找浮动
2、先设置盒子大小，之后设置盒子的位置

11.2、常见网页布局

在这里插入图片描述

浮动布局注意点
1、浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采用和浮动排列左右位置
2、一个元素浮动了，理论上其余兄弟元素也要浮动
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那麽其他兄弟也应该浮动，以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

11.3、清除浮动

为什么需要清除浮动
清除浮动本质–清除浮动元素造成的影响
清除浮动语法
清除浮动方法

在这里插入图片描述

方法一：额外标签法

在这里插入图片描述

方法二：父级添加overflow

在这里插入图片描述

方法三：伪元素清除浮动

例如：
在这里插入图片描述

方法四：双伪元素清除浮动

清除浮动总结

11.4、PS切图

常见图片格式
PS切图

1、图层切片（最简单）
仅仅导出图片：右击图片->右边栏找到该图层右键导出图片
导出加另一层文字的图片：选中图片图层按shift 再选中文字的图层然后找到上栏图层菜单的合并图层（ctrl+e) 右键导出

2、切片切图

1）底色保持原色

2）底色为透明的
在这里插入图片描述

3、PS插件切图

11.5、学成在线案例

CSS属性书写顺序
网页布局整体思路
制作过程

1、导航栏制作
注意！1）导航栏的链接用（li+a）来制作
2）在同一行的盒子必须加浮动
3)注意按钮默认有边框
文本框和按钮是行内块元素，有间距

在这里插入图片描述

表单和按钮制作，注意间隔

在这里插入图片描述

banner部分制作

一般这种导航栏，我们都用ul-li-a来设定，然后给li设置高度，因为a是行元素
&lt是’<’,&gt是’>’

课程表模块
浮动的盒子不用考虑外边距合并的问题
水平居中：text-align:center; 垂直居中：line-height:小盒子高度

banner模块

精品推荐小模块

精品推荐大模块

在这里插入图片描述

小技巧：对于很多个盒子中间都有间隔，不方便给每排最后一个盒子拎出来的情况。把父盒子宽度增大

注意
因为精品推荐大模块没给高度，所以下面添加元素的时候被撑开造成浮动，我们要清除浮动造成的影响

底部制作

成品展示

在这里插入图片描述

2.定位

为什么需要定位

当滚动鼠标向下滑动页面时，有些元素是固定在屏幕上的，这种效果是标准流和浮动都无法快速实现的，此时需要定位来实现
所以：
1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式position
边偏移：就是盒子的移动到最终位置，

静态定位=标准流（了解）

默认定位方式，无定位意思

相对定位 relative

在元素移动位置的时候，根据原来坐标位置移动的
语法：
选择器 { position: relative; }
相对定位特点;
1、他是相对自己原来的位置移动的
2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置)
因此相对定位并没有脱标，最典型的应用是给绝对定位当爹

绝对定位

相对于祖先元素来移动位置
语法：
选择器 { position : ; }
特点：
1、如果没有祖先元素或者祖先元素没有定义，则以浏览器为准来移动
2、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的定位祖先元素为参考点移动位置。
3、绝对定位不再占有原先的位置。（脱标）
问题
1、绝对定位和相对定位到底有那些使用场景？
2、为什么说相对定位给绝对定位当爹呢？

子绝父相的由来

子级用绝对定位的话，父级要用相对定位
1、子级绝对定位，不会占有位置，可以放到父盒子里面任何一个地方，不会影响其他的兄弟盒子
2、父盒子需要加定位限制子盒子在父盒子内显示
3、父盒子布局时，需要占有位置，因此父亲只能是相对定位
这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

固定定位

固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 { position：fixed;}
固定定位的特点：
1、以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
2、固定定位不在占有原先的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位小技巧
在这里插入图片描述

固定定位技巧：固定在版心右侧位置

在这里插入图片描述

8. 粘性定位（了解）

相对定位和固定定位的混合。Sticky粘性的.
语法：
选择器 { position: sticky; top: 10px;}
特点：
1、以浏览器的可视窗口为参照点移动元素（固定定位特点）
2、粘性定位占有原先的位置（相对定位特点）
3、必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差。IE不支持。

定位总结

在这里插入图片描述
10. 定位的叠放次序 z-index

使用定位布局可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
语法：
选择器 { z-index: 1;}

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来者居上
数字后面不能加单位
只有定位的盒子才有z-index属性

定位的扩展

绝对定位的盒子水平、垂直居中

如果是普通标准流的盒子水平居中的方法是margin: auto；
但是如果给盒子定位了，如果不设置top、left等属性的值，就会让盒子靠着旁边
一个小算法实现：
1、让盒子的left走50%-父容器宽度的一半，此时盒子最左侧靠着浏览器中间分界线的
2、margin 负值往左边走自己盒子宽度的一半

在这里插入图片描述

然后再垂直居中
1、top:50%
2、margin-top: -（盒子高度一半）

2、定位特殊特性

绝对定位和固定定位也和浮动类似
1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

3、脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

4、绝对定位（固定定位）会完全压住盒子

与浮动元素不同，只会压住他下面标准流的盒子，但是不会压住标准流盒子里面的文字（图片），但是绝对定位（固定定位）会压住下面标准流所有的内容

浮动元素：在这里插入图片描述
绝对定位（固定定位）

12. 淘宝焦点图布局分析

13. 网页模型总结

在这里插入图片描述

2.元素的显示与隐藏

在这里插入图片描述

点击❌后就隐藏掉了，类似网站广告，当我们点击关闭就不见了，但我们重新刷新页面，会重新出现
本质：让一个元素在页面中隐藏或者显示出来

display属性

用于设置一个元素如何显示

display: none; 隐藏对象
display: block; 除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置

visibility可见性

属性用于指定一个元素应可见还是隐藏

visibility：visible;元素可视
visibility: hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置
如果隐藏元素想要原来的位置，就用visibility：hidde
如果隐藏元素不想要原来的位置，就用display：none(用处更多重点)

overflow 溢出

指定了如果内容溢出一个元素的狂（超过其指定宽度及高度）时，会发生什么
** **：

在这里插入图片描述

土豆案例

<style>
        .tudou {
            position: relative;
            width: 442px;
            height: 325px;
            background-color: pink;
            margin: 100px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        .tudou:hover .mask {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

效果：
在这里插入图片描述
当鼠标经过

wy_43431863

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础进阶

CSS1、语法选择器标签选择器，以标签名称作为选择器类选择器 .类名-样式点定义，结构类(class)调用，一个或多个，开发最常用规范类选择器多类名使用id选择器 #id 样式#定义，结构id调用，只能调用一次，别人切勿使用通配符选择器* {…}–将页面中所有标签修改样式总结字体属性1、字体系列当有好多个字体时先看用户网页有没有第一个字体，没有的话看第二个，都没有的话使用用户默认字体。字体大小font-size字体粗细 f
复制链接

扫一扫