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

本文链接：https://blog.youkuaiyun.com/qiqibei666/article/details/84932085

1. 是什么？

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

2. 作用：

• CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
• CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

3. 特点：

实现网页内容与样式的分离

4. CSS选择器优先级：

1. !importment>行内样式>id选择器>类选择器>HTML标签选择器>通配符选择器>继承>浏览器默认属性（同一级中后写的会覆盖先写的形式）

2. 多个选择器一起使用仅限于类选择器：

class(<span class="menu niu">栏目二</span>)class(<span class="menu niu">栏目二</span>)

3. 类选择器与ID选择器同时设置：

HTML页：
	<body>
	    <span class="menu">栏目一</span>
	    <span class="menu niu">栏目二</span>
	    <span class="menu">栏目三</span>
	    <span id="special">栏目四</span>
	    <span class="title">这是<span>一二三四</span>条新闻标题</span>
	</body>
	
	body {
	}
	.menu {/*栏目样式*/
	    color:blueviolet;
	}
	
	.title { /*新闻标题样式*/
	    color: blue;
	    font-weight: bold;
	}
	
	#special {
	    font-weight:bold;/*加粗*/
	    color:coral;
	}
	
	.title span{
	    color:indigo;
	    font-size:20px;/*字体大小*/
	}
	.niu {
	    text-decoration:underline;/*下划线*/
	    color:#ff0000;
	}

效果图：
在这里插入图片描述

4. 核心内容：标准流、盒子模型、浮动、定位

1. 标准流：（div快捷元素，span行内元素）HTML标签的排列方式

2. 盒子模型：网页设计中经常用到的CSS技术所使用的一种思维模型；

属性：内容(content)-蓝色框、内边距(padding)、边框(border)、外边距(margin);

在这里插入图片描述
3. 浮动：使元素向左或向右移动，其周围的元素也会重新排列，往往是用于图像，在布局时也非常有用

img
{/*设置右浮动*/
    float:right;
}

4. 定位：position 属性指定了元素的定位类型

position 属性：static、relative、fixed、absolute、sticky

//静态定位
div.static {
    position: static;
    border: 5px solid #9CCFFF;
}

//相对定位
h2.pos_top
{
    position:relative;
    top:-50px;
}

//绝对定位
h2
{
    position:absolute;
    left:100px;
    top:150px;
}

小结：

不怕不知道，就怕不知道；