前端之CSS——网页的皮肤!!

目录

一、CSS简单介绍

二、css内容

2.1        css的编写方式

2.2        css选择器

2.3        样式属性

2.4        css包围盒

2.5        css中的display

2.6        css中的定位

2.7        css中的浮动与清除

2.7        弹性容器

2.8        字体图标

2.9        渐变与动画


一、CSS简单介绍

CSS(层叠样式表)是一种用于描述网页样式和外观的样式表语言。它与HTML结合使用,用于控制网页的布局、颜色、字体、大小和其他视觉方面的属性。CSS的设计目标是将样式与内容分离,使得网页的结构和样式可以独立管理和修改。

CSS基本上由一系列规则组成,每个规则由选择器(Selector)和一组声明(Declaration)组成。选择器用于选择HTML中的元素,而声明则定义了与选定元素相关的样式属性和值。

二、css内容

2.1        css的编写方式

1、行内样式表,优先级最高。直接使用style属性写在标签中,只针对这一个标签。

2、内部样式表,在head标签中使用style标签包裹,针对当前HTML中所有满足条件的标签。

3、外部样式表,写在css文件中,通过link引入html中。可以被多个html文件引入使用。

一般先引入外部样式表,再编写内部样式表。

2.2        css选择器

1、四种基本选择器

(1)*        通配符选择器,可以选择所有标签

(2)标签名        标签选择器,匹配固定标签

(3).类名        类名选择器,匹配所有拥有该类名的选择器

(4)#id        id选择器,匹配拥有id的标签

2、5种符号选择器

(1),        逗号左右满足一个即可被选择

(2)空格        子孙选择器

(3)>        子集选择器

(4)+        选择相邻的下一个

(5)~        选择下面多个

3、属性选择器

(1)[attr]        选择拥有该属性的标签

(2)[attr=值]        拥有属性并且值等于

(3)[attr^=值]        拥有属性并且以值为开头

(4)[attr$=值]        拥有属性并且以值为结尾

4、伪类选择器,在正常的选择器后面加:使用

(1):hover        鼠标划入

(2):active        鼠标点下

(3):first-of-type        第一个

(4):last-of-type        最后一个

(5):nth-of-type(n)        正数第n个

(6):nth-last-of-type(n)        倒数第n个

(7)odd  奇数      even 偶数

2.3        样式属性

1、字体相关font-

(1)font-family,字体类型,多个字体使用逗号分隔

(2)font-size,字体大小,默认16px

(3)font-weight,字体粗细,400为normal,700为bold

(4)font-style,italic斜体

2、文本相关text

(1)text-transform,capitalize首字母大写;lowercase全小写;uppercase全大写

(2)text-align,默认left居左,center居中,right居右

(3)text-ident缩进,2em表示缩进两个字符

(4)text-decoration,none去除下划线

3、背景相关background

(1)background-color,背景色

(2)background-image,背景图,优先级高

(3)background-repeat,重复,no-repeat不重复

(4)background-position,位置,left、right、center、top、bottom,也可以直接设置100px,500px

(5)background-size,尺寸,100%,contain长边全部展示,短边补空;cover短边完全展示,长边隐藏

4、列表相关list-style

(1)list-style-type,circle空心圆;disc实心圆;square方块;lower-alpha小写字母;lower-roman罗马数字小写

(2)list-style-position,编号位置,outside外侧;inside内侧

(3)list-style-image,图片,url()引入

(4)list-style:none,去除所有样式

2.4        css包围盒

1、border上下左右,有属性width、style、color,一般写为:1px solid red

2、padding,内补,只有宽度,使用自己的背景色

3、margin,外部,只有宽度,使用父元素背景色,一般写为margin:0 auto

表示上下为0,左右自动居中

4、padding与margin支持四种写法,有顺序区分

(1)一个数值,表示上下左右都一样

(2)二个数值,上下、左右

(3)三个数值,上、左右、下

(4)四个数值,上、右、下、左

5、更改包围盒计算方式,border-box,

2.5        css中的display

1、inline 行内元素,不可以给宽高

2、block 块元素,占一行,可以给宽高

3、inline-block 行内块,多个块放在一行,可以给宽高

4、none 隐藏,不显示

2.6        css中的定位

1、static 静态定位,从左到右,从上向下

2、relative,相对定位,相对于文档流静态定位发生偏移,占用文档位置,可以top、left等约束

3、absolute 绝对定位,参考外层第一个非static标签发生偏移,不占用文档位置

4、fixed 固定定位,参考浏览器位置

5、sticky 粘性定位,没有达到粘性位置时相当于静态定位,达到粘性位置时相当于固定定位

2.7        css中的浮动与清除

1、float 浮动,分为left和right

(1)left 左浮动,靠左排列,排列在上一个左浮动的右侧

(2)right右浮动,靠右排列,排列在上一个右浮动的右侧

2、clear清除浮动

(1)left,左边不能有左浮动

(2)right,右边不能有右浮动

(3)both,清除左右浮动,后续元素不会被浮动元素覆盖

2.7        弹性容器

display:flex

常用容器属性:

1、flex-direction:row / row-reverse / column / column-reverse

2、flex-wrap:wrap / no-wrap / wrap-reverse

3、justify-content:

        flex-start主轴开始位置;

        flex-end主轴结束位置;

        center主轴居中;

        space-between中间有空白;

        space-around两边中间都有空白

4、align-items:

        flex-start交叉轴起始位置

        flex-end交叉轴结束

        center居中

5、align-content:

        flex-start交叉轴起始位置

        flex-end交叉轴结束

        center居中

2.8        字体图标

自定义字体:@font-size:font-family:name,src:url()

!imortant表示最高优先级

2.9        渐变与动画

transition:all 0.5s  linear

动画:animation,@keyframes name {  0%{}  100%{}}

animation: name 0.5s linear infinite

transform:rotate();translate();scale()

相关推荐

  1. 网页皮肤——css

    2024-04-02 09:48:01       4 阅读
  2. 前端小白学习路(CSS3 二)

    2024-04-02 09:48:01       6 阅读
  3. 前端小白学习路(CSS3 一)

    2024-04-02 09:48:01       8 阅读
  4. 前端小白学习路(CSS3 三)

    2024-04-02 09:48:01       8 阅读
  5. web前端css、style

    2024-04-02 09:48:01       31 阅读

最近更新

  1. leetcode705-Design HashSet

    2024-04-02 09:48:01       8 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-04-02 09:48:01       8 阅读
  3. vue3、vue2中nextTick源码解析

    2024-04-02 09:48:01       8 阅读
  4. 高级IO——React服务器简单实现

    2024-04-02 09:48:01       8 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-04-02 09:48:01       7 阅读
  6. go第三方库go.uber.org介绍

    2024-04-02 09:48:01       8 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-04-02 09:48:01       9 阅读

热门阅读

  1. vue2 预览word文件

    2024-04-02 09:48:01       5 阅读
  2. C++宝强越狱1.0.6版本

    2024-04-02 09:48:01       5 阅读
  3. python 批量向MQTT服务器推送数据

    2024-04-02 09:48:01       5 阅读
  4. FastAPI Web框架教程 第13章 WebSocket

    2024-04-02 09:48:01       4 阅读
  5. 设计模式-单例模式(懒汉式)

    2024-04-02 09:48:01       5 阅读
  6. Anaconda conda常用命令

    2024-04-02 09:48:01       9 阅读