CSS基础入门

最新推荐文章于 2023-10-19 10:47:25 发布

Gol·D·Roger

最新推荐文章于 2023-10-19 10:47:25 发布

阅读量393

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_41004674/article/details/112112490

版权

1.1 什么是CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现[HTML](https://baike.baidu.com/item/HTML)（[标准通用标记语言](https://baike.baidu.com/item/标准通用标记语言/6805073)的一个应用）或[XML](https://baike.baidu.com/item/XML)（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.2 语法

选择器+样式

案例：

选择器用来指定cHTML标签的样式
属性和属性值以键值对的形式出现
属性和属性值用：分割
属性值以；结尾

1.3 代码风格

样式的格式书写
1. 紧凑型 h {color : red;}
2. 展开格式
样式大小写
空格规范
1. 属性的：后面保留一个空格
2. 选择器和大括号之间保留空格

CSS基础选择器

2.1 CSS选择器的作用

根据需求把不同的标签选出来，这就是选择器的作用。

找到指定的标签
更改指定的样式

2.2 基础选择器

标签选择器
- 优势：能够快速的把同一类标签选取出来
- 缺点：不能够差异化的处理样式
类选择器
- 优势：可以实现差异化的选额一个或多个标签
id选择器
通配符选择器

2.3 类选择器

多类名开发中使用的场景

可以把一些标签元素相同的样式放到一个类里面
这些标签都可以调用这个公共的类，然后调用自己独有的类
节省css代码，统一修改比较方便

2.4 id选择器

#定义，只能调用一次

一般用于页面唯一的元素

2.5 通配符选择器

在CSS中，使用*定义，可以选取所有的标签

2.6 font-family定义字体系列

每个字体需要使用英文逗号隔开
如果出现某个字体有多个单词构成使用空格分割和引号包裹
尽量使用系统中自带的字体

2.7 font-size字体大小

px常用的单位
可以给body设置默认的文字大小

2.8 font-weight字体粗细

属性值：bold或者700(加粗)

属性值：normal或者400(不加粗)

2.9 font-style文字样式

normal 标准样式
italic 浏览器会显示倾斜字体

3.1 字体的复合属性

把字体的属性写在一起，减少代码量

font：font-style font-weight font-size/line-height font-family

不能更换以上属性的顺序
不需要的属性值可以省略，注意font-size和font-family不能省略！！！

3.2 CSS的文本属性

文字颜色

red、green、blue属于预定义颜色
#ff00EE 十六进制
rgb(255,0,0)

对齐文本

text-align 设置文本内容水平对齐方式

left
center
right

装饰文本

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

none 默认无
underline 下划线
overline 上划线不常用
line-through 删除线不常用

文本缩进

text-indent 通常用段落的首行缩进

行间距

line-height 控制文字行与行之间的距离

行间距=上下间距+文本高度

如果存在多行，可以使用上一行文字的底部为起点到下一行文字的底部测量得出行间距。

3.3 CSS的引入方式

行内样式表(行内式)
内部样式表(嵌入式)
外部样式表(链接式)

3.3.1 内部样式表

写在html页面内部，把css代码抽取出来，放到style标签内

style标签可以放在html页面的任何位置，一般放在标签中

3.3.2 行内样式表

直接在标签内部写上style标签，适合修改比较简单的样式。

style本身就是属性
属性值使用双引号包裹
只能控制当前的标签
没有体现结构和样式分离，不常用！！！

3.3.3 外部样式表

实际开发多用于外部样式表，用于样式比较多的情况，核心是将样式单独写到CSS文件中，之后引入到html文件中。

新建一个CSS文件，把所有CSS代码都当如此文件中

3.3.4 引入方式总结

引入方式	优势	缺点	控制
行内样式表	书写简单，适用于简单的样式	结构和样式混写	单个标签
内部样式表	部分结构和样式分离	没有实现完全分离	单个页面
外部样式表	完全实现结构和样式的分离	需要引入	多个页面

CSS day02

1. Emmet语法

该语法的前身是Zen Coding，使用缩写，来提高html/css的编写速度

生成标签，直接输入标签名+tab键即可
如果想生成多个标签，加上就可以了，例如div3
如果存在父子级标签，使用> 比如ul > li 就可以了
如果存在兄弟关系的标签，用 + 就可以了比如div + p
如果生成带有类名或者id名的，直接使用.demo 或 #two tab
如果生成的div类名是有顺序的，可以使用自增 $ 符号
如果想要在标签内直接输入文字可以使用{}

1.1 快速格式化

ctrl + ,
搜索emmet.include

在system.json里设置如下代码：

"editor.formatOnType": true,
"editor.formatOnSave": true

2. 复合选择器

在CSS中分为基本选择器和复合选择器，所谓复合选择器实际就是把基础选择器进行组合形成的

复合选择可以更准确，更高效的选择目标元素
复合选择器是由两个或多个基础选择器，不同方式组合形成的
常用的复合选择有：后代选择器、子选择器、并集选择器、伪类选择器等等

2.1 后代选择器

后代选择器又称包涵选择器，可以选择父元素里面的子元素。

语法格式：父标签写在前面子元素写在后面用空格分隔

2.2 子元素选择器

只能选择某元素最近的一级选择器

语法格式：元素1 > 元素2

2.3 并集选择器

把一组不同的标签组合起来，同时为他们指定样式，通常用于集体声明

语法格式：使用，把各个选择器链接起来。

语法规范：尽量竖着来写

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果

语法格式：伪类选择器使用冒号：例如：hover ，：first-child

2.4.1 链接伪类选择器

a:link 用于设置链接的样式
a:visited 用于设置访问过的链接样式
a:hover 用于设置鼠标悬浮在其上的链接样式
a:active 用于设置活动的链接样式，即鼠标按下未弹起

注意：必须遵守LVHA的顺序，避免不生效

2.5 focus选择器

主要用于设置表单的样式

语法格式：冒号+focus

2.6 复合选择器总结

后代选择器	选择父元素下的任意子元素	儿子、孙子都可以	a b	常用
子选择器	只能选择与父元素最近的一级元素	只能是儿子	a > b	少用
并集选择器	由两个或多个基本选择器组成	用于集体声明	a,b	常用
链接伪类选择器	用于设置链接不同状态的样式	和链接相关	a：LVHA	常用
focus选择器	用于设置表单元素样式	和表单相关	input：focus	常用

3. 显示模式

什么是元素的显示模式？

作用：一个网页的标签是比较多的，在不同的地方可以用到不同标签，了解他们的特点可以更好的给网页做布局。

实际上就是标签或者元素以什么样的形式显示出来

HTML一般分为块级元素和行内元素

例如：

div块级元素独自占一行，一行又可以放多个span元素

3.1 块元素

h1、p、div、ol、ul。。。

独占一行
高度、宽度、内外边距都可以控制
宽度默认是容器的宽度
每一个容器及盒子，里面都可以放行内或者块级元素

注意：文字类的元素不能放块级元素

3.2 行内元素

a、ins、i、del、s、span、strong、em。。。

一行可以有多个行内元素
宽度和高度设置是无效的
默认的宽度是内容的宽度
行内元素只能容纳文本或其他行内元素

注意：

链接里面不能在放链接

特殊情况下a标签可以包含块级元素，但是最好给a标签转换成成块级元素

3.3 行内块元素

在行内元素中有几个特殊的标签，如：img、input、td他们同时具有块元素和行内元素的特点

在相邻的行内元素中，会有空格作为缝隙，一行可以放置多个–行内元素特点
宽度就是行内元素内容的宽度–行内元素特点
宽高和内外边距是可以设置的–块级元素特点

3.4 显示模式总结

行内元素	一行可以放多个	内容宽度为默认宽度	只能存文本或其他行内元素	无法设置宽高
块级元素	一行在只能放一个	默认宽度为容器宽度	可以存放任意元素	宽高和内外边距都可以设置
行内块元素	一行可以放多个	内容宽度为默认宽度		可以设置宽高

3.5 元素显示模式的转换

一个模式的元素需要另外一个模式的特性

display：block

display：inline

display：inline-block

3.4 小米侧边栏案例

<style>
        a {
            display: block;
            text-decoration: none;
            font-size: 14px;
            width: 291px;
            height: 50px;
            color: white;
            text-indent: 2em;
            background-color: rgb(153, 131, 107);
            如果要实现文字垂直居中那么只需要把行高==容器高度即可
            line-height: 50px;
            
        }
        a:hover {
            background-color: rgb(255, 103, 0);
        }
    </style>
</head>
<body>

    <!--首先把a标签由行内元素转换成块级元素-->
    <!--其次使用链接伪类标签完成鼠标悬停的样式-->
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 显示器</a>
    <a href="#">家电 插线板</a>
    <a href="#">出行 穿戴</a>
</body>

3.5 单行文字垂直居中原理

在这里插入图片描述

4. CSS背景

背景属性可以设置颜色、图片、位置、平铺、图像固定等等

background-color: transparent | color

一般情况下默认背景颜色是透明的

4.1 背景图片

常用于一些logo或者装饰性的小图片，或者超大图片。

优点：方便控制位置

background-image: url();

4.2 背景平铺

默认情况下都是平铺的

background-repeat: reeat | no-repeat | repeat-x | repeat-y

页面元素可以设置背景颜色和图片，但图片位于背景颜色上方

4.3 背景图片的位置

background-position：x y；

参数代表坐标，可以用方位名词或者精确单位

如果两个值都是方位名词，前后顺序是不影响效果的， left top == top left
如果只写一个方位词，那么第二参数默认居中对齐
如果使用精确单位，那么左边的参数代表X轴，右边的参数代表Y轴
如果采用混合写法，左边的一定是X轴

4.4 背景图片固定

是指背景图片是否随着页面其他原色移动而移动

background-attachment：scroll | fixed

4.5 背景图片的简写形式

一般定义为 background: 背景颜色、背景图片地址、背景展示方式、背景是否滚动、背景图片位置

4.6 背景颜色半透明

background: rbga(0,0,0,alpah[0~1])

5. CSS三大特性

5.1 层叠性

如果碰到冲突的样式那么根据就近原则进行覆盖

5.2 继承性

子元素可以继承父元素的样式(text-,font-,line-开头的可以继承包括color属性) 高度宽度不可继承
合理的使用继承能够极大减少代码量

行高的继承

font：15px/1.5 Micorsoft YaHei；

行高的继承可以不带单位
如果子元素没有设置行高，那么将自动继承父元素的1.5
当前子元素的行高是：文字大小*1.5

5.3 优先级

当选择器相同时执行层叠性，如果不同则执行优先级

5.4 选择器的权重

继承或 *	0，0，0，0
标签选择器	0，0，0，1
class选择器伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式style=”“	1，0，0，0
!important	无穷大

权重的特点：

由4组数字，不可进位
按从左到右的顺序进行比较，如果相同，则比较后位
可以理解为行内样式>id选择器>类选择器>标签选择器
继承的权重为0，如果没有单独选出，不管父元素的权重有多高都为0

    <style>
        虽然class选择器的权重大于标签选择器，但是继承的权重为0,小于标签选择器，所以优先执行P{}
        .nav {
            color: pink;
        }

        p {
            color:red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <p>我是子元素</p>
    </div>
</body>

5.5 权重的叠加

在复合选择器中，会出现权重叠加的情况，需要计算权重。

div ul li 0，0，0，3
.nav ul li 0，0，1，2
#nav ul li 0，1，0，2

CSS day03

1. 盒子模型

实际上就是把HTML中的布局元素看作成一个矩形的盒子(容器)

CSS盒子模型，本质上是对HTML元素的一种封装，它包括外边距、内边距、内容和边框

网页布局的核心本质

先准备好网页相关的元素，网页元素基本都是盒子
使用CSS设置盒子样式，并摆放到合适的位置
往盒子里添加内容

1.1 盒子属性

margin 外边距
padding 内边距
content 内容
border 边框

1.2 border

border-width
border-color
border-style
- solid 实线边框
- dashed 虚线边框
- dotted 点状边框
border：1px solid red 没有先后顺序

1.3 border-collapse

表格的细线边框：

作用：在表格场景中合并相邻的单元格

1.4 边框大小会影响盒子大小

1.5 padding

内容和边框的距离

简写的形式及意义

padding：5px 代表向下左右都是5px

padding：5px 10px 代表上下5px 左右10px

padding：5px 10px 6px 代表上是5px 左右10px 下是6px

padding：5px 10px 6px 8px 上右下左顺时针

1.6 padding也会影响盒子的实际大小

1.7 padding 不撑开盒子的情况

如果盒子本身没有指定宽度或高度，那么padding不会撑开盒子！！！

1.8 外边距的运用

可以让盒子水平居中，但必须满足下面两个条件

盒子必须制定了宽度
盒子的左右外边距都设置为auto

常见的三种写法：

margin-left：auto | margin-right：auto

margin：auto

margin：0 auto

1.9 外边距的合并与塌陷

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

当有两个块元素，并且是同级关系，上面的元素有margin-bottom属性，下面的元素有margin-top属性。此时这两个元素的间距并不是bottom+top，而是值较大的那个。称为相邻块元素垂直外边距的合并现象
当有两个嵌套元素时，父元素有上外边距，子元素也有上外边距。此时父元素会塌陷至较大的外边距值
- 给父元素设置边框
- 给父元素设置padding
- 给父元素设置overflow:hidden

清除内外边距

在网页中不同的元素有不同的内外边距，而且不同的浏览器也不一致，因此在布局前，取消所有元素的内外边距

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

注意：为了解决行内元素的兼容性，尽量只设置它左右的外边距！

2. PS的基本操作

在这里插入图片描述

3. 圆角边框

border-radius：length

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同

设置圆形盒子
- 先决条件原来的盒子必须是正方形，设置圆形的半径等于正方形款或者高的一半即可
设置椭圆形盒子
- 设置圆形的半径等于矩形高的的一半

4. 盒子阴影

语法格式：box-shadow：

h-shadow 水平阴影的位置
v-shadow
blur 模糊距离
spread 阴影尺寸
color 颜色
inset 将外部阴影改成内部阴影

注意：默认为outset，不需要手动写上，如果写上会不生效

5. 文字阴影

语法格式：text-shadow

h-shadow
v-shadow
blur 模糊程度
color

CSSday04

网页布局元素的分类有哪几种？

标准流
浮动
定位

1.1 什么是标准流

标准流也称为文件流或文档流，是按照默认的标签格式进行排列的。

如果是块元素，那么他们呢各自独占一行从上往下排列 div table ul ol li form p h hr…
如果是行内元素，那么他们各自在一行从左到右排列，如果碰到父元素那么自动换行 a span i em…

1.2 浮动

概念：创建浮动框，将其移动到一边，直到左边缘或者右边缘触及边缘，包含块或另一个浮动框的边缘

为什么要学习浮动？

问题：

如何将若干个div元素水平排列成一行，且元素间没有空隙？
如何让两个元素左右对齐？

使用传统标准流是无法解决的，这时候需要使用浮动，目的就是为了改变标签的默认排列方式！

语法格式：选择器 {float: none left right}

网页布局的第一准则：多个块级元素纵向排列时使用标注流，多个块级元素横向排列时使用浮动。

1.3 浮动特性

浮动元素会脱离标注牛(脱标)
- 浮动元素会脱离标准流的控制
- 不会保留原来的位置
浮动元素的对齐方式
- 当有多个元素设置浮动时，对齐方式为顶端对齐
- 浮动的元素紧贴着排列，当父元素一行放不下时，会自动另起一行。
无论什么元素一旦添加浮动，都具备行内块元素的特点
- 如果块级没有设置宽度，默认和父级一样。加浮动后，宽度由内容来决定
- 行内元素同理

1.4 浮动元素常和标准流的父元素

1.5 浮动元素的注意事项

浮动元素和标准流父元素的搭配：

先用标准流的父元素排列上下位置，再再内部用浮动元素排列左右

一个元素浮动了，理论上兄弟元素也要跟着一起浮动

一个盒子里有多个元素，如果一个元素浮动了，那么其他兄弟元素也要跟着浮动。
浮动的盒子只会影响到后面的标准流，不会影响到前面的盒子。

1.6 为什么要清除浮动

多数情况下我们不方便给标准流父元素设置高度，因为不知道内容的大小，一旦内容设置浮动后，它本身是不占用空间的。此时父元素的高度为0，这回影响其他元素的排版。

1.6.1 清除浮动的本质

概念：实际上就是清除浮动元素脱离标准后流带来的影响

策略：闭合浮动

方法：

额外标签法隔墙法
- 在浮动元素末尾添加空标签，且必须是块元素。clear: both left right
overflow
- 给父元素设置overflow属性，hidden auto
- 优点代码简洁
- 缺点无法显示溢出的部分
after伪元素
- .clearfix :after { content: “”,display:block height: 0; clear: both visibility: hidden}
- .clearfix { *zoom: 1} 用于兼容IE6、7
双伪元素
- .clearfix:before,.clearfix:after {content: “”; display: table;}
- .clearfix-after { clear: both;}
- .clearfix { *zoom: 1}
- 优点代码简洁，缺点是照顾低版本浏览器~

清除浮动总结：

父级没有高度
子元素浮动了
影响下面布局了

额外标签法隔墙法	通俗易懂，写法简单	添加了无意义的标签，结构性差
overflow	写法简单	无法显示溢出的部分
after伪元素法	书写复杂	IE6-7不支持:after,照顾了兼容性问题
双伪元素法	简洁易懂	IE6-7不支持:after,照顾了兼容性问题

CSSday05

为什么要使用定位？

为了解决标准文档流或浮动结局不了的问题

当滚动窗口的时候实现盒子固定在某个位置
某个元素可以在盒子自由移动，并且压住其他盒子

定位是将盒子定位在某一个位置，也就是摆盒子。

定位模式：决定元素在文档中的定位方式

static
relative
absolute
fixed

偏移量：决定元素的最终位置

top、left、right、bottom 决定元素距离盒子边框的距离

6.1 静态定位

元素的默认定位方式

按照标准流特性设置位置，没有边偏移

6.2 相对定位

相对于元素自身原来的位置，进行定位。
相对定位原来在标准流的位置任然保留，后面的盒子仍然用标准流的形式来对待它。(不脱标，继续保留原来的位置)

6.3 绝对定位

决定定位元素在移动时，必须相对于其父级元素

如果没有父元素或者父元素没有定位，默认按照浏览器定位
如果祖先元素有定位，则以最近的有定位祖先元素参考
绝对定位不占有原来的位置，脱标

6.4 固定定位

以浏览器的可视化窗口进行定位
不占有原来在标准流中的位置

6.4.1 固定到版心右侧

使用定位left 50%，走到版心的中间
使用margin-left50% 走到版心的右边

6.4.2 粘性定位

可以看作是相对定位和固定定位的结合

参照浏览器可视窗口进行定位
不占有原来标准流的位置
必须要有top bottom left right的其中只一，否则无效

6.5 定位总结

模式	是否脱标	移动基准	使用频率
static 静态定位	否	不能使用边偏移	少
relative 相对定位	否，保留原来的位置	根据自身位置进行偏移	多
absolute 绝对定位	是，不占有位置	根据父元素定位进行偏移	多
fixed 固定定位	是，不占有位置	根据浏览器可视窗口偏移	多
sticky 粘性定位	是，不占有位置	根据浏览器可视窗口偏移	多