CSS基础（一）

高考坐后排的边牧

已于 2022-09-17 15:19:16 修改

阅读量244

点赞数

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

于 2022-09-16 19:11:39 首次发布

本文链接：https://blog.csdn.net/weixin_44762483/article/details/126896218

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS

网页主要由三部分组成：

HTML：网页的骨架，网页结构的设计
CSS：网页的样式，用于美化网页，有了css样式，才能达到像素级还原
JavaScript：动态脚本，控制页面上动态动画，点击事件

css基本概念

CSS （Cascading Style Sheets）层叠样式表，主要用于控制网页中的样式显示。一般css样式是作用在标签上，控制标签的显示样式。

层叠：css样式可以在多个地方书写，可以在标签上添加style属性添加css样式代码、style标签中书写的、外部css文件中书写css代码，层叠在一起，相同的css属性只作用一个，不同的直接作用，最终都执行形成一套css样式作用标签上。

样式表：指的就是css代码；页面上可通过内联样式、内部样式、外部样式三种方式添加css代码。

网页中样式的来源

注意：所有的html标签默认是没有样式

浏览器默认的样式

所有的html标签默认没有样式，但是a、h标签等默认是浏览器添加的样式

浏览器用户自定义的样式

用户可以在浏览器中更改标签默认的样式

内联样式

在标签上添加style属性，在属性值中书写css样式代码

语法：

<p style="css属性1：css属性值1; css属性2：css属性值2；">
    
</p>

好处：

哪里需要样式写在哪儿
缺点：

多个元素有相同的样式时，需要重复书写

内部样式

在head标签中添加style标签，再通过选择器来书写css样式代码

语法：

<head>
    <style>
        选择器{
            css属性1：css属性值1；
            css属性2：css属性值2；
        }
    </style>
</head>

好处
- 结构和样式分离
- 结构清晰，利于后期代码维护
- 可以批量设置选中的标签样式
缺点：
- 结构和样式完全分离，目前还在一个文件中

外部样式

先创建一个后缀名为 .css文件，再里面通过选择器书写css样式代码，再在head标签中通过link标签引入css样式文件

语法：

<head>
     <link rel="stylesheet" href="连接css样式文件">
</head>

好处：
- 样式和结构代码完全分离
- 以后维护代码，可以一处处处改
- 以后我们可以将外部css文件进行压缩，减少文件体积
注意：优先级（权重大小）：内联权重最大，相同选择器，内部和外部采用就近原则，离标签越近的优先作用

选择器

相同选择器，后面的样式会盖住前面的样式

标签选择器

通过标签名找到指定的标签，没有指定范围，找到页面中所有的满足条件的标签

语法：

标签名{
    css属性1：css属性值1；
    css属性2：css属性值2;
}

类选择器

又称为class选择器，通过标签上的class名找到满足条件的标签，多个标签可以共享一个class名，提取公共样式

语法：

.class名{
    css属性1：css属性值1；
    css属性2：css属性值2;
}

注意：
- 标签上可以作用多个class名，中间使用空格隔开
- 如果选择器多个组合在一起，中间没有空格，代表并且的意思
```
找到页面中class名中即有op又有oa的标签
.op.oa{
    css样式代码
}
```

id选择器

id是标签上定义的属性，id唯一，找到页面中唯一的一个标签，精准定位。
通过标签上的id名找到满足条件的标签
id命名规则：
- 以数字、字母、-和_构成
- 不能以数字开头
- 不能包含特殊符号
语法：
```
#id名{
    css样式代码
}
```
注意：id是唯一，以后通过js会操作标签上id名，id选择器慎用。

优先级

相同选择器，内联样式权重最大，内部样式和外部样式采用就近原则
相同的选择器同时作用在一个标签上，后面的样式会盖住前面的样式
选择器权重（优先级）：id选择器>类选择器>标签选择器

背景样式

background-color:设置背景颜色
- 单词
- #十六进制
- rgb(0_255,0255,0~255)
background-image：设置背景图片
```
background-image:url(连接背景图片的文件路径);
```
- 背景图片默认从盒子左上角开始铺设，如果铺不满，默认重复铺设
- 注意：如果背景颜色和背景图片同时存在，图片盖住背景颜色
background-repeat:设置背景图片是否平铺
- repeat:默认值，x轴和y轴都平铺
- repeat-x:x轴方向上进行平铺
- repeat-y：y轴方向上进行平铺
- no-repeat:不平铺
- 应用：可以实现1px渐变背景平铺，减少图片的体积，从而优化网页
background-position:设置背景图片的显示位置
- x轴 y轴：
  - 单词：left right center top 上 bottom 下两两搭配使用
  - 固定像素：默认左上角 0px 0px
  - 百分比：50% 50% 相当于center center
background-size:设置背景图片的大小，css3提出
- contain:一边铺满，另一边默认重复平铺
- cover:等比放大图片，两边都铺满，超出部分隐藏
- x轴 y轴：宽度高度
  - 同时设置两个值，背景图片可能变形，所以只设置一个值，代表图片的宽度
background-attachment:设置背景图片是否固定（css3）
- scroll:默认值，图片会随着滚动条滚动
- fixed:背景图片固定在页面上
backgroud:复合属性
```
 background: pink url(img/img-3.jpg) no-repeat 50% 50% /100px 100px fixed; 
```
- /前面代表图片显示位置，/后面是背景图片的大小

雪碧图应用

将多张图片组合在一起，形成一张图片，减少请求服务器的次数，从而优化网页
原理：通过背景样式background-image和background-position来实现雪碧图效果
步骤：
1. 设置一个宽高刚好显示指定图标大小的标签
2. 通过background-image引入雪碧图
3. 在通过background-position设置雪碧图的显示位置，调整到指定的图标
注意：在开发中，x轴的正方向是水平向右，y轴的正方向是垂直向

文本样式

color:设置文本的颜色
text-align：设置文本的对齐方式
- left：左对齐
- center：居中
- right：右对齐
- 注意：可以控制标签中文本在水平方向的对齐方式，对行级标签同样有效
line-height:设置文本的行高
- 像素
- 百分比和数字：是参考字体的大小，相当于字体的倍数
- 注意：
  - 一行里面的文本在垂直方向上居中
  - 针对单行文本水平垂直居中，可以设置text-align:center; line-height等于盒子的高度
text-decoration:设置文本修饰
- none:无
- underline:下划线
- line-through:中划线，删除线
- overline:上划线
letter-spacing:设置字符间距，一个中文就是一个字符，一个英文字母就是一个字符
word-spacing:设置字间距，以文本中空格来区分
text-indent:设置首行缩进
text-transform:设置英文字母的大小写
- none：无
- capitalize：首字母大写
- uppercase:全大写
- lowercase: 全小写

行和块分类

行内标签（行内元素）

一般用于组织文本内容
特点：
- 共享一行
- 不支持宽高，宽高由内容决定
标签：span、label、i、a等等

块级标签（块级元素）

一般用于组织布局
特点：
- 独占一行，不能和其他标签在一行显示
- 支持宽高
标签：div、p、h、table、tr、ul、ol、li等等

行内块级标签（行内块级元素）

特点：
- 元素可以同行显示
- 支持宽高
标签：td、img、input、button、select等等

相互转化

通过display属性进行相互转化
取值：
- display:inline;转为行内元素
- display:inline-block;转为行内块级元素
- display:block;转为块级元素
- diaplay:none;隐藏元素，元素会从页面在消失，页面重绘
说明：本笔记根据网络视频教程整理。