CSS样式与布局精要-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43813560/article/details/88701813

CSS 指层叠样式表 (Cascading Style Sheets)
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

CSS 语法
CSS 语法由三部分构成：选择器、属性和值：

selector {property: value}

基本选择器：
1.标签选择器
基本语法：标签名 {属性名：值，…}
2.类选择器
基本语法：.类名 {属性名：值，…}
3.id选择器
基本语法：#id名 {属性名：值，…}
4.通配符选择器（声明所有标签的属性）
基本语法：* {属性名：值，…}

id选择器和类选择器的区别：
id是唯一的，每个id只能出现在一个标签中。而相同的类名可以附加给多个标签,同样一个标签也可以有多个类名，用空格分隔即可。如< div class=“类名1 类名2”>

层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1浏览器缺省设置
2外部样式表
3内部样式表（位于标签内部）
4内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

其中外部样式表最为常用，它完全实现了网页结构与样式的分离，具体操作如下：
1.建立所需的CSS文件。
2.在需要调用该CSS样式的HTML文件中：

<head>
	<link href="css文件路径" rel="stylesheet">
</head>

CSS背景：

background-color	背景颜色
background-image	背景图片	url(images/图片路径)
background-repeat	背景是否平铺	no-repeat repeat-x(y)
background-position	背景位置	方位名词：top left right center bottom 精确单位：x y
background-attachment	背景固定还是滚动	scroll（默认滚动） fixed（固定）
背景的复合写法
background:颜色图片平铺滚动位置		background：red url(image.jpg) no-repeat fixed 50% 0

网页布局实质：
把网页元素如文字图片等放入盒子中（可以把双标签都看成一个盒子），然后利用CSS摆放盒子的过程，就是网页布局。

盒子边框：border
语法：border：width style color

	常用属性
border-style	none(默认无边框） solid（单实线） dashed（虚线）dotted（点线） double（双实线）
border-方位	方位：top bottom left right

合并表格边框：
table{border-collapse：collapse}

圆角边框：border-radius：左上角右上角右下角左下角
只有一个属性值时，代表四个角都被影响
有两个属性值时代表对角
只有一个属性值且为50%或设定width的一半时矩形框变成圆形

内边距：padding
内边距是指内容与边框之间的距离
属性值的情况与border-radius基本一致，以上边距瞬时值旋转。

外边距：margin
边框与外部（可能是浏览器边缘或其他盒子）的距离
取值顺序与内边距一样

外边距实现盒子居中：
条件：

盒子内的文字居中：
div {text-align：center；}

清除内外边距：
有些盒子本身就有默认的边距，为了方便的控制网页中的元素，制作网页中，常使用如下代码来清除内外边距
* { padding：0；margin：0；}

注意尽量不要给行内元素指定上下的内外边距

嵌套块元素垂直外边距的合并：
简单来说即无法调整子元素在父元素块内的位置
解决方案：

元素的定位属性：
元素的定位属性主要包括边偏移和定位模式

前端基础--CSS