CSS基础知识_cssr-id-优快云博客

本文深入解析CSS的基础知识，涵盖样式嵌入方式、选择器、优先级、单位及属性等核心概念。从内联样式到外联样式表，从标签选择器到ID选择器，详述了CSS在网页布局中的应用技巧。

简介

基础语法
选择器{ 属性：属性值 }
声明：属性+属性值

嵌入方式

样例

<head>
	<title>---</title>
	<style type="text/css">           /*内联样式表*/
		*{...}
	</style>
    <link rel="stylesheet" href="外联范例.css">    /*外联样式表*/
</head>
<body>
	<p style="color:red">内联样式</p>
</body>

内联样式

当样式仅在一共元素上应用一次时
将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势

内联样式表

内嵌样式在head标签内
当单个文档需要特殊样式表，可以使用内部样式表
内部样式表只对当前页面有效

外联样式表

当样式需要应用于很多页面时，通常使用外部样式表
Rel属性：规定当前文档与被连接文档之间的关系

选择器

样例

/*特殊性值：0,0,0,0*/            /*css优先级*/
*{color:blue;}
/*特殊性值：0,0,0,1*/
a{color:yellow;}
/*特殊性值：0,0,1,1*/
.demo a{color:black;}
/*特殊性值：0,1,0,1*/
#demo a{color:orange;}
/*特殊性值：0,1,0,2*/
div#demo a{color:red;}
/*特殊性值：1,1,0,1*/
#demo a{color:green !important;}

通配选择器

*{···}

标签选择器

p{···}

类选择器

.classname §{···}
class属性
多个class选择器混用，用空格分开

id选择器

#idname §{···}
id选择器不可以多次使用

集体声明

body{···}
p,a{···}

优先级

css优先级就是给制定的css声明一个权重，它由匹配的选择器中每一个选择器类型的数值决定
权重计算

通配选择器*对特殊值没有贡献，加0,0,0,0,
元素和伪元素，加0,0,0,1
类选择器，属性选择器或伪类，加0,0,1,0
ID选择器的特殊性值，加0,1,0,0
!important，特殊性加1,0,0,0
!important为开发者提供了一个增加样式权重的方法，让浏览器首先执行这个语句，但是会破坏样式表中固有的级联规则

div{
	margin-left:20px!important;
    margin-left:40px;
}

内联样式>内部样式表>外部样式表

CSS样式

单位

在这里插入图片描述

颜色

在这里插入图片描述

文本

在这里插入图片描述

字体

font: 斜体粗体字号/行高字体
在这里插入图片描述

背景

background：颜色图片 repeat
在这里插入图片描述

超链接

a:hover必须位于a:linke和a:visited之后
a:active必须位于a:hover之后
在这里插入图片描述

列表

在这里插入图片描述

表格

未合并表格边框之前，表格具有双线条边框
（∵table，th以及td元素都有独立的边框）
在这里插入图片描述

盒子模型

在这里插入图片描述
1.页面元素的大小
2.边框样式
3.与其他元素之间的距离

页面中的所有元素都可以看成一个盒子，占据一定的页面空间
IE盒子模型（content部分包含了border和padding）

< div >的属性

border属性

border：width style color
在这里插入图片描述

padding&margin属性

（只有值为0时才能没有单位，不然单位取值：px，%（相对于外层盒子的宽度和高度））
在这里插入图片描述

合并和居中

在这里插入图片描述
注：margin的合并：垂直方向合并，水平方向不合并

图片，文字水平居中 text-align：center
div水平居中margin：任意值 auto；
文字垂直居中：设置inline-height和包含文字的那个DIV的Height一样高

定位机制

盒子在页面上的位置，怎么排列问题

文档流

block元素

特点：独占一行/可以设置元素的height，width，margin，padding
常见的block元素：< div >< p >< h1 >···< h6 >< ol >< ul >< table >< form >

inline元素

特点：不独占一行/width,height不可设置
常见的inline元素：< span >< a >

inline-block元素

特点：不独占一行/height,width,margin,padding都可设置
常见的inline-block元素：< img >

浮动定位

float属性

当设置浮动时，已经脱离原来文档流，其他元素占据原来元素的位置在这里插入图片描述

left：左浮动
right：右浮动
none：不浮动

clear属性

在这里插入图片描述

层定位

希望网页的元素可以层叠在另一个元素上面，出现叠加和覆盖的效果

position属性

在这里插入图片描述

fixed特点：不会随浏览器窗口的滚动条滚动而变化
relative&absolute

left/right/bottom属性

z-inde属性

z-index值大的在商城
在这里插入图片描述

CSS基础知识

CCS基础知识

简介

嵌入方式

样例

内联样式

内联样式表

外联样式表

选择器

样例

通配选择器

标签选择器

类选择器

id选择器

集体声明

优先级

CSS样式

单位

颜色

文本

字体

背景

超链接

列表

表格

盒子模型

< div >的属性

border属性

padding&margin属性

合并和居中

定位机制

文档流

block元素

inline元素

inline-block元素

浮动定位

float属性

clear属性

层定位

position属性

left/right/bottom属性

z-inde属性