CSS总结

zxp_124

已于 2022-06-27 14:31:18 修改

阅读量150

点赞数

文章标签： css css3 html

于 2022-06-27 14:26:41 首次发布

本文链接：https://blog.csdn.net/zxp_124/article/details/125483056

版权

1、css

级联样式表，HTML控制页面元素，css控制页面布局与样式。

2、css引入方式

1.HTML head标签中(外部样式表)
<head>
<link rel="stylesheet" href="./css1.css">
</head>
2.HTML head标签中直接书写(内部样式表)
<head>
<style>书写css代码</style>
</head>
3、元素上直接书写 (内联样式)优先级最高
<div style="color:red;"> hello </div>

如果代码过多，建议第一种方法
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存，从而提高页面响应速度
3). 有利于代码分离（HTML和CSS），更容易阅读和维护

3、css语法

选择器+{}，{}中包含一条或多条语句，语句以";"分隔。

选择器：

1、类选择器：.类名{}
2、id选择器：#id{}
3、元素选择器：元素{}
4、通配符选择器（全选）：*{}
5、属性选择器，根据属性名和属性值选中元素
6、伪类选择器，选中某些元素的某种状态
1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

选择器的组合

1. 多个选择器并列, 用逗号分隔
2. 后代元素  空格
3. 子元素  >
4. 后相邻兄弟元素  +
5. 后面出现的所有兄弟元素  ~

4、常见样式声明

color

元素内部的文字颜色

三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。

rgb表示法：
rgb(0, 255, 0)
hex（16进制）表示法：
#红绿蓝  #fff白色

font-size

元素内部文字的尺寸大小

1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素 2）em：相对单位，相对于父元素的字体大小每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素，则使用浏览器默认字号。

5、盒模型

box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）

盒子类型：

行盒，display等于inline的元素
块盒，display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒：div、h1~h6、p

常见的行盒：span、a、img、video、audio

盒子的组成部分

所有盒子，都由下面几个部分组成，从内到外分别是：

内容 content

width、height，设置的是盒子内容的宽高

填充(内边距) padding

盒子边框到盒子内容的距离
padding: 上右下左

边框 border

border:1px solid red;

外边距 margin

边框到其他盒子的距离
margin: 上右下左

6、布局

常规流
浮动
定位

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

zxp_124

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结

目录1、css2、css引入方式3、css语法4、常见样式声明5、盒模型6、布局级联样式表，HTML控制页面元素，css控制页面布局与样式。1.HTML head标签中(外部样式表)<head><link rel="stylesheet" href="./css1.css"></head>2.HTML head标签中直接书写(内部样式表)<head><style>书写css代码</styl
复制链接

扫一扫