CSS基础-CSDN博客

本文链接：https://blog.csdn.net/qq_42068654/article/details/82192842

CSS

1.什么是CSS

Cascading Style Sheet（层叠样式表/级联样式表）

2.CSS的作用是什么

CSS是对网页HTML内容的修饰

3.为什么要使用CSS

CSS提供了很多HTML无法完成的显示效果，样式和内容写在一起会显得非常臃肿，使用CSS可以单独的将样式抽离出来，提高开发效率。
抽离出来的CSS可以单独加载，能够实现多个页面的共享，节约网站的带宽，从而节约成本。

4.CSS的引入方式

4.1行内样式

对标签添加一个style属性

<标签 style="样式"></标签>

4.2内部样式表

在html中的head标签中添加style标签

<html>
    <head>
        <style>样式定义</style>
    </head>
</html>

4.3外部样式表

在html中的head标签中添加link标签引入外部.css文件

<html>
    <head>
        <link rel="stylesheet" href="css文件路径">
    </head>
</html>

5.行内样式

当设置的属性非常少，需要设置的标签也非常少(只有一处)时，建议使用行内样式。

5.1颜色控制样式

**字体颜色格式：**color：颜色值
其中颜色值可以为
1）英文单词，如：red，green，blue等。
2）三原色，rgb（0~255，0~255，0~255），其中r为红，g为绿，b为蓝，数字越大代表该颜色越深。rgba（0~255，0~255，0~255，0~1）最后一位为透明度，0表示完全透明，1表示不透明
3）十六进制数，如：#FF0000，同样前两位代表红，中间两位代表绿，最后两位代表蓝，数越大代表该颜色越深。
背景颜色格式： background-color：背景颜色

5.2字体相关样式

格式：
font-size：像素大小像素单位(px);  改变字体大小的样式
font-family：字体名称;  改变字体的样式
font-style：italic;  使文字变为斜体的样式
font-weight：bold;  使文字变为粗体的样式

5.3控制对齐方式的样式

格式：
text-align：center;  居中
text-align：left;  左对齐
text-align：right;  右对齐

5.4背景相关样式

格式：
background-image：url(背景图片路径);  加入背景图片样式
background-repeat：no-repeat（不重复）/repeat-x（横向重复）/repeat-y（纵向重复）/repeat（双向重复）;  控制背景图片如何重复的样式
background-size：像素大小像素单位(px);  控制背景图大小的样式

5.5div（容器）标签

容器标签，可以容纳其它标签
格式：

<div>
    <p>
    <table>
    ...
    </table>
    </p>
</div>

div的作用：用于页面布局，以及对表单的统一处理。

5.6宽度和高度

格式：
width：宽度单位
height：高度单位
ps：(以父元素为基准) 可以以像素px为单位，也可以以页面百分比%为单位

5.7边框

格式：
border-color：边框颜色
border-style：边框样式
border-width：边框宽度
ps：可以将三者合并为：border:边框颜色边框样式边框宽度;

6.间距

6.1内间距

标签和内容之间的间隙，称为内间距。
padding 10px 10px 10px 10px;
上右下左
padding 10px 10px;
上下左右
padding 10px;
上下左右

6.2外间距

同级标签之间的间隙，称为外间距。
margin 10px 10px 10px 10px;
上右下左
margin 10px 10px;
上下左右
margin 10px;
上下左右

7.z-index

代表该元素在Z轴的位置，数字越大表示显示优先级越高（要配合绝对定位使用）
格式：
position:absolute; left:x坐标（向右）; top:y坐标（向下）

8.选择器

8.1元素选择器

根据标签的名称进行匹配，对所有该标签进行修饰

标签名{样式}

8.2class选择器

根据标签的class属性值进行匹配，对class属性取值为该值的标签进行修饰

.class值{样式}

8.3id选择器

根据标签的id属性值进行匹配，对id属性取值为该值的标签进行修饰

#id值{样式}

8.4其他选择器

父子选择器：父选择器>子选择器
最终选中的是子选择器匹配的标签，须满足条件：父标签要和父选择器匹配

后代选择器、祖先选择器

伪类选择器：
hover：当鼠标悬浮在标签上时匹配
nth-child：与第n个孩子元素匹配
last-child：与最后一个孩子元素匹配

8.5选择器的优先级

1)多个选择器匹配到同一个标签时，优先级为：
!important > style行内样式 > #id选择器 > .class选择器 > 元素选择器
ps：!important 用来提升某个样式的优先级
样式 !important
2)子标签可以从父标签继承某个样式
3)子标签定义了与父标签同名的样式，会覆盖父标签的样式
4)相同的选择器后定义的内容会覆盖先定义的内容

9.在网页间重用样式

可以更大程度地在多个网页间重用样式，让网站的风格统一

导出方法：需要用到外部样式表，把选择器及样式的定义放在一个 *.css 的文件中（样式表文件）
导入方法：在另一个网页导入外部的样式表

格式：

<link rel="stylesheet" href="路径/css文件名">

ps：内部样式表可以采用覆盖的方法实现本网页特殊的样式。