CSS基础知识

cxpxatu521

已于 2022-05-02 16:54:15 修改

阅读量706

点赞数

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

于 2021-12-18 19:57:00 首次发布

本文链接：https://blog.csdn.net/m0_51765966/article/details/122016215

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

层叠样式表基础知识

二. css进阶

1.选择器

标识被选中的元素

选择器分为三类：元素选择器，id选择器，类选择器

(1) 元素选择器

使用元素的标签名定位

示例:

<style>
h1{
	color:red;
}
</style>

(2) id选择器

唯一标识一个元素,一个HTML标签只能有一个唯一的id

以#开头，后面加上id名

(3) 类选择器

标识属于同一个类的所有元素

以.开头，后面跟上类名

三类选择器代码示例:

<html>
    <head>
        <title>标题</title>
        <style>
            h1{
                color:red;
            }
            #author{
                color:blue;
            }
            .article{
                color:yellow;
            }
        </style>
    </head>
    <body align = "center">
    <h1>静夜思</h1>
    <p id = "author" class = "article">唐&nbsp;&nbsp;&nbsp;李白</p>
    <p class = "article">床前明月光，</p>        
    <p class = "article">疑是地上霜。</p>        
    <p class = "article">举头望明月，</p>        
    <p class = "article">低头思故乡。</p>        
    </body>
</html>

选择器的优先级

id选择器 > 类选择器 > 元素选择器

2.css代码的位置

(1) 元素样式表/内联样式表

样式定义在元素内部,书写在元素的style属性中

(2) 内部样式表，书写在style标签中

style标签通常放在head标签中，让浏览器先加载css代码，提供良好的页面效果

(3) 外部样式表

将css代码写在一个css文件中，进行文件的引用

在需要引用的HTML中引用，有两种引用方式。
引用方式一(更常用）：

<link rel="stylesheet" type="text/css" href="css文件的路径"/>

引用方式二：

<style type="text/css">
	@import url("css文件路径");
</style>

外部样式表的优点:

解决了多页面样式重复而需要做的重复性工作；
有利于浏览器缓存，提高页面响应速度；
有利于代码分离，将html和css分开，提高代码的可读性和可维护性；

三种样式的优先级:元素样式 > 内部样式 > 外部样式 (遵循就近原则)

3.常见样式

(1) color: 元素内部的文本颜色

颜色值：

预设值，如red,green;
rgb(红色值，绿色值，蓝色值)

每种颜色的取值范围为0~255,0为最小值，255是最大值
#红绿蓝,每种颜色取值使用两位十六进制表示，如果每种颜色两位十六进制数值都相同，则可以每种颜色只写一个十六进制数值；

示例:
```
淘宝红： #ff4400 简写:#f40
```

(2) background-color:背景颜色

(3) font-size:元素内部的文字大小

单位:

px 像素
em:父级容器的大小(很少用），最终会被换算为真正的像素值
假设一个div中有文字，
这个div设置字体为20px,2em=40px;
rem
1rem:HTML根元素的字体大小
假设HTML标签设置字体大小为20px,1rem=20px;

各种单位的应用场景：
样式相对需要固定用px;
样式大小需要随着设备的设置而更改，使用rem;

(4) font-weight:文字粗细程度

可以设置数字，也可以设置为预设值

预设值：normal(正常粗细)，bold(加粗)

(5) font-family: 文字类型

为适应不同的环境，可以使用多种字体

(6) font-style:字体样式

通常用来设置斜体

(7) text-decoration：文本装饰线

可以设置为预设值:none(没有装饰线)，overline(上划线), underline(下划线), line-through(中间线)

(8) text-indent: 首行文本缩进

可以设置为em和px

(9) line-height: 行高

每行文本的高度，设置行高为容器的高度，可以让单行文本垂直居中

(10) width: 宽度

(11) height: 高度

(12) letter-spacing: 文字间隔

(13)text-align:元素内部文字的水平排列方式

默认靠左排列，可以设置为right(靠右排列), center(居中排列)

二. css进阶

1.选择器

选择器的作用：帮助精确选择元素

(1) 简单选择器

元素选择器
id选择器
类选择器
通配符选择器
```
*选中所有元素
```
属性选择器

根据属性名和属性值选择元素

[属性名=“属性值”]

示例:
```
[href="http://www.baidu.com"]
{
	color:red;
}
```
属性选择器，了解更多

伪类选择器

选中元素的某种状态

格式：

	元素名:伪类选择器名
 	示例: 
 	a:link{
 		color:red;	
 	}

常见的伪类选择器：

link:超链接未访问的状态

hover:鼠标悬停状态

active:激活状态，鼠标点击时的状态

visited:超链接访问之后的状态

伪元素选择器

选中元素的某个位置，通过作用域限定符::来标识

before选中元素的头部位置之前的位置

after选中元素的尾部位置之后的位置

示例:
```
span::before{
	content:"《";
 color:red;
}
span::after{
	content:"》";
	color:hotpink;
}
学习html和css中~~~~~~~~~~
```
展示效果:

(2) 选择器的组合

多个元素共同属性

中间以逗号间隔

示例:
```
p,h1{
	color:red;
}
```

后代关系

格式:上级元素+空格+下级元素

示例:

#d1 p{
	color:yellow;
}
<div id="d1">
	<p>啦啦啦</p>
</div>

子元素: >

选择直接子类

示例:

#d1>p{
	color:yellow;
}

<div id="d1">
	<p>啦啦啦1</p>
    <p>啦啦啦2</p>
    <p>啦啦啦3</p>
    <div >
    	<p>啦啦啦4</p>
    </div>
</div>

渲染效果:
在这里插入图片描述

相邻兄弟元素:+

选中当前元素的后面的第一个兄弟元素

格式: 当前元素+下一个选中元素名

示例：
```
#p1+p{
	color:blue;
}

啦啦啦1
啦啦啦2
啦啦啦3
```
渲染效果:
兄弟元素:~

选中当前元素的后面的所有兄弟元素

格式: 当前元素~兄弟元素名

示例：
```
#p1~p{
	color:blue;
}

啦啦啦1
啦啦啦2
啦啦啦3
```
渲染效果:

2.层叠

(1) 概念

声明冲突:

同一个样式，多次应用到同一个元素

层叠：

解决样式声明冲突的过程，也叫做权重计算

(2) 过程

比较重要性

从高到低为：

开发者样式表中!important样式,

开发者样式表中普通样式,

浏览器默认样式
比较特殊性

当重要性比较完之后，重要性相同，这时候比较特殊性

根据选择器进行判断

总体规则:选择器范围越窄，特殊性越强
比较源次序

3.继承

子级元素会继承父级元素的某些css属性,通常字体类型可以继承

inherit可以让子元素属性值继承父元素

4.属性值的计算

确定声明值

参考样式表中没有冲突的声明，作为css属性值
层叠冲突

对样式表有冲突的声明使用层叠规则，确定css属性值
使用继承

对当前没有属性值的属性，如果可以继承，继承父元素的值
使用默认值

对没有属性值的属性，使用默认值

5.盒子模型

每个元素都会在页面生成一个矩形区域，也就是一个盒子

(1) 盒子类型

行盒

display属性值为inline的元素，inline是display默认属性，行盒在页面中不换行
块盒

display属性值为block的元素，块盒独占一行

(2)盒子组成

内容

常见属性：width,height
内边距(填充)

对应属性:padding-left,padding-right,padding-top,padding-bottom

简写属性：

padding:top right bottom left(上右下左);

padding:top right; (上下内边距值相等，左右内边距值相等)

padding:top;(上下左右四个方向的内边距值都相等)
1. 边框
  
  对应属性：
  
  边框粗细 border-width:上右下左；
  
  边框样式 border-style:上右下左；
  
  边框颜色 border-color:上右下左；
  
  简写 border: 边框粗细边框样式边框颜色；
外边距

边框到其它盒子的距离

对应属性：

margin-top、 margin-right、 margin-bottom、 margin-left

简写属性:

margin:上右下左；

6.视觉格式化模型

页面中多个盒子的排列规则

大体上分为三种：常规流、浮动、定位

(1) 常规流

常规流又被称之为文档流，所有元素在默认情况下，都属于常规流

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

知识点：

包含块：每个盒子都有自己的包含块，包含块决定了盒子的排列区域

绝大多数情况下，盒子的包含块是父元素的内容盒

如果要将一个盒子设置为行盒，可以将display属性设置为inline；
如果要将一个盒子设置为块盒，可以将display属性设置为block；

块盒的排列规则

每个块盒的总宽度，必须刚好等于包含块的宽度

如果要在常规流中设置块盒水平居中，则可以将margin 属性设置为auto.

每个块盒垂直方向上的

height设置为auto表示适应内容的高度，

margin设置为auto，表示水平居中.
百分比取值

padding、margin、宽度都可以取值为百分比，所有百分比相对于包含块的宽度
上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并，取值为两个外边距的较大值

(2)浮动

设置方式

设置float属性

属性值为left,元素靠上靠左浮动；

属性值为left,元素靠上靠右浮动；

清除浮动：

设置clear属性，

clear属性置为left，表示清除左浮动；

clear属性置为right，表示清除右浮动；

clear属性置为both，表示清除左右浮动；

特点

当一个元素浮动后，它一定是块盒(可以设置display属性为block);
浮动元素的包含快和常规流一样，都是父元素的内容盒；
盒子尺寸

宽度为auto时，适应内容宽度；

高度为auto时，适应内容高度；

margin为auto时，表示为0；
盒子排列

左浮动的盒子靠上靠左排列；

右浮动的盒子考上靠右排列；

浮动盒子在包含块中排列时，会避开常规流块盒；

常规流块盒在排列时，无视浮动盒子；

行盒在排列时，会避开浮动盒子；

(3)定位

手动控制元素在包含块中的精确位置

position属性

默认值为static(静态定位/不定位)；

relative:相对定位

absolute:绝对定位

fixed:固定定位

一个元素只要position属性的取值不是static，就是一个定位元素

位置对应属性

left：距离左边的偏移量

right：距离右边的偏移量

top：距离上边的偏移量

bottom：距离下边的偏移量

相对定位

元素不会脱离文档流，只是在原来的位置上偏移

绝对定位

元素相对于祖先中第一个定位元素进行偏移

固定定位

相对于浏览器的窗口进行定位

cxpxatu521

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识

@TOC一.css基础1.选择器标识被选中的元素选择器分为三类：元素选择器，id选择器，类选择器(1) 元素选择器使用元素的标签名定位示例:<style>h1{ color:red;}</style>(2) id选择器唯一标识一个元素,一个HTML标签只能有一个唯一的id以#开头，后面加上id名(3) 类选择器标识属于同一个类的所有元素以.开头，后面跟上类名三类选择器代码示例:<html> <head>
复制链接

扫一扫