【Web前端开发】CSS基础

news2025/7/16 4:08:41

2.CSS

2.1CSS概念

CSS是一组样式设置的规则，称为层叠样式表，用于控制页面的外观样式。

使用CSS能够对网页中元素位置的排版进行像素控制，实现美化页面的效果，也能够做到页面的样式和结构分离。

2.2基本语法

通常都是：在head标签里头添加一个style样式标签，样式标签里添加要修改的样式

<head>

<title>标题</title>

<style>

选择器{

属性名：属性值;

                        属性名：属性值;

                        ……

                }

</style>

</head>

注：不同的选择器写法不一样；这种写法是内部样式的写法，对于样式较少的代码适合用内部样式。

2.3引入方式

内部样式表

行内样式表

行内样式的写法比内部样式优先级更高！

外部样式表

将CSS与Html分开来，创建一个css后缀的文件，将内部样式的style标签里的内容写法一样，再将html后缀的文件与css后缀的文件链接起来。

<link rel="stylesheet" href="xxx.css">

2.4CSS基本用法

1.选择器的种类

基础选择器

1）标签选择器：只要出现了该标签的位置都被修改了样式。使用时只需要加上标签即可，如下图的p标签（第一个）；

2）类选择器：使同一个标签出现不同的样式。给每个标签定义一个class，对应的内容在使用时需要加上一个点（.），如下图：

3）id选择器：每个id对应的值只能出现一次，所以往后设计id 时最好唯一。使用id对应的css需要加上一个井号（#），如下图：

4）通配符选择器：在实际开发中针对页面种所有元素默认样式进行消除，只要用来消除边距。使用时一个（*+空格）就会选取所有标签，如下图：

复合选择器

1）后代选择器：选择某个父元素中的某个子元素（子元素只要是父元素的后辈都可以）

元素1 元素2 {样式声明}

1）元素1和元素2要使用空格分割
2）元素1是父级，元素2是子集，只影响元素2

2）子选择器：父元素下只能选择子标签，改变的样式是子标签

元素1>元素2 { 样式声明 }

1）使用大于号分割
2）只选亲儿子, 不选孙子元素

3）并集选择器：多个选择器同时实现同一样式

元素1, 元素2 { 样式声明 }

1）通过逗号分割等多个元素. 
2）表示同时选中元素1和元素 2.
3）任何基础选择器都可以使用并集选择器.

4）伪类选择器：将一个超链接设置颜色，默认情况下、鼠标悬停该链接是、鼠标点击该链接时

a { 样式声明 }//默认情况下超链接的样式

a:hover { 样式声明 }//当鼠标悬停在超链接时的样式

a:action { 样式声明 }//当鼠标点击该链接字时的样式

2.常用元素属性

字体属性

1）字体 font-famliy：'宋体'等；

2）大小 font-size：20px；

3）字体粗细 font-weight：

4）字体倾斜 font-style：

文本属性

1）颜色 color：有以下三种方法表示颜色

color：red；
color：#ff0000；//第一个ff代表红的，第二个ff代表绿色，第三个ff代表蓝色
color：rgb(255,0,0)；同第二种相同，只是将ff转成十进制255

2）对齐方式 text-align： left、center、right（左、中、右）

3）首段缩进 text-indent：2em（缩进两个元素）、20px（缩进20个像素）

4）文本装饰 text-decoration：以下是常用取值

underline 下划线
none 什么都没有，可以用来去除超链接的下划线
overline 上划线
line-through 删除线

5）行高 line-height：行高=上边距+字体大小+下边距

背景属性

1）背景颜色 background-color：在该选择器下的背景样式。如果要整个页面都设置那就在body或者*中设置样式。

2）背景图片 backgound-image：url（//添加图片链接）

3）平铺方式 background-repeat：平铺就是在该范围内放一张图片后，还有剩余空间往后继续添加图片直至铺满。以下是常用取值

repeat 平铺（默认）
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 竖直平铺

4）背景位置 background-position：将背景图片设置位置（都是以左上角为原点），以下是参数取值

方位名词：top、left、right、bottom
精确单位：坐标或者百分比
混合单位：同时包含方位名词和精确单位（比如水平居中，竖直在20px）

5）背景图片大小background-size：背景图片大小。参数取值如下

cover：将背景尽可能地放大到最大
contain：将背景图片尽可能地最大完整地显现出来

圆角矩形

圆角矩形 border-radius：设置四个角地内切圆半径，以下是一些特殊圆角矩形（前提是需要设置一个矩形，可以通过设置width，height 和边框border（border:2px green solid））

生成圆形：矩形为正方形的基础上，border-radius的取值是正方形边长的一半
生成圆角矩形：border-radius是矩形height的一半
对四个角设置不同的圆弧：border-top-left-radius(顶左)、border-top-right-radius(顶右)、border-bottom-left-radius(底左)、border-bottom-right-radius(底右)

3.元素的显示模式

1）常见的显示模式

行内元素：不独占一行的标签（像：a、b、span等）
块级元素：独占一行的标签（像：div、h1~h6、p等）

2）改变显示模式 display：修改元素的显示模式。以下是参数取值

block：改成块级元素
inline：改成行内元素（不常用）
inline-block：改成行内块级元素

4.盒模型

1）边框 border：边框属性如下

border-width：边框粗细
border-style：默认没边框，1.solid 实线边框；2.dashed 虚线边框；3.dotted 点线边框
border-color：边框颜色
border-top / bottom / left / right：可以改变四个方向的边框。

注：如果我们呢设置一个200*100的矩形，那么边框的粗细会影响实际矩形的大小，为了不影响设置的矩形还是200*100，那么就要使用box-sizing：border-box（这样可以将边框粗细包含在内）

2）内边距 padding：有下面五种方式表示内边距

padding：5px；四个方向都是5px
padding：5px 10px；上下是5px，左右时10px
padding：5px 10px 20px；上是5px，左右是10px，下是20px
padding：5px 10px 20px 30px；上5，右10，下20，左30（按照顺时针顺序）
padding--top / bottom / left / right：可以设置四个方向的内边距

注：内边距也会占用空间，同上边的边框原理相同

3）外边距 margin ：同内边距的五种方式相同

取值为auto可以将矩形居中但是字体不居中（字体居中用text-align：center）

5.弹性布局（需要设置在父元素中）

正常情况下设置一个如下图会出现的情况

1）flex属性：主盒子中包含副盒子，如果要在主盒子中设置一个副盒子的长和宽，是没有变化的。如果想要设置副盒子的大小就要添加display：flex，添加之后副盒子才可以设置成想要的长和宽，再加上justify-content：space-around可以让每个副盒子之间的间隙相等，并且使每一个副盒子的前后都有间隙，如果想要修改竖直方向的排列方式可以修改align-items。效果如下：