CSS基础

最新推荐文章于 2024-10-01 23:54:35 发布

rancho辉

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

文章标签： CSS

本文链接：https://blog.youkuaiyun.com/amihui/article/details/102665231

CSS是什么

CSS，层叠样式表（Cascading Style Sheet）是网页添加样式的代码。它不是真正的编程语言，甚至不是标记语言，而是一门样式语言。

CSS创建

CSS接入HTML文档的方式有三种：

CSS文件接入：新创建一个CSS文件，例如styles.css。可以在head标签中使用link标签引入

<link href="./style.css" rel="stylesheet" type="text/css">

style标签写入：在head标签中创建< style >< /style >，将样式直接写入到style标签中。

...
	<head>
		<meta charset="utf-8">
		<title>css test</title>
		
		<style type="text/css">
			h1{
				line-height: 35px;
				font-size: 24px;
				color: #333;
			}
		</style>
	</head>
...

直接只用内联样式写在元素上，这样的样式层级最高，样式表无法修改

<p style="line-height: 24px;font-size: 16px;color: #666;">文章内容文章内容文章内容文章内容文章内容文章内容</p>

浏览器查看CSS

可以鼠标右键 “查看元素” 或者 “检查”
window直接F12就可以打开控制台查看
在这里插入图片描述

CSS选择器

在这里插入图片描述
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

CSS选择器参考手册大全

标签选择器

标签选择器，选择的是页面上所有的本类型的标签；会将页面中所有的相同元素赋予这个样式表

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		p{
			background: #EEEEEE;
		}
		span{
			background: red;
		}
	</style>
</head>
<body>
	<p>段落段落段落段落段落段落段落段落段落段落<span>插入一个span</span>段落段落段落段落段落段落段落段落段落段落段落</p>
	<p>段落段落段落段落段落段落段落段落段落段落<span>插入一个span</span>段落段落段落段落段落段落段落段落段落段落段落</p>
</body>

在这里插入图片描述

ID选择器

id选择器是唯一的，一个页面中只能有一个id名。
id选择器的选择符是“#”

<style type="text/css">
#mytitle{
	border:3px dashed green;
}
</style>

<!-- html -->
<h2 id="mytitle">你好</h2>

类选择器

最常用的选择器，规定用圆点.来定义、针对你想要的所有标签使用。优点：灵活。
class属性的特点：

特性1：类选择器可以被多种标签使用。
特性2：同一个标签可以使用多个类选择器。用空格隔开。

…

更多详细的CSS选择器说明：CSS的四种基本选择器和四种高级选择器

CSS部分样式讲解

一切皆盒子
编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

width，height：宽高
padding：即内边距，围绕着内容（比如段落）的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。

在这里插入图片描述
其实这个盒子可以理解为是一个人体，padding就是你的脂肪，border是你的皮，都是属于元素自身（查看宽高会有变化，宽高包含了padding和border）；margin就是人与人之间的间距了。

最常用的就是 px像数和 %
在这里插入图片描述

注释

注释就是不会被浏览器解析，只是给你自己写的一些想法或者标注
注释有两种：

/* */：在中间可以写多行注释
// 这是单行注释

/* 
这里就是注释了，可以写多行
折行也是可以的
*/
// 这是单行注释
// 折行了还需要再加一行

padding
内边距；一个二维盒子有四个面，就有四个padding。分别为：上右下左；

/* 应用于四个边 */
padding: 1em;

/* 垂直方向| 水平方向*/
padding: 5% 10%;

/* 顶部| 水平方向| 底部*/
padding: 1em 2em 2em; 

/* 顶部| 右边| 底部| 左边*/
padding: 2px 1em 0 1em;

padding: inherit;

margin
外间距；和padding类似，也有四个面，分别为：上右下左；

/* 元素块居中显示 : 上下间距为0 ，左右间距为自由间距*/
margin: 0 auto;
/* 该盒子是水平居中的, 上下边距为0 */
margin: auto;

position
定位！！这是CSS很重要的一个属性，有了这个属性你就可以将元素盒子移动到任何你想要到达的地方。
定位有五个值：static | relative | absolute | sticky | fixed
配合使用的就是left 、right、 top、 bottom；进行定位

这里只说常用的：
1、relative
相对定位，这个相对就是相对于自己的位置进行定位移动，之前所在位置空间会保留，见demo
2、absolute
绝对定位，absolute需要配合relative使用，父级使用relative的时候，子级才可以根据父级来定位；否则会找最外层的元素
3、fixed
固定定位，fixed可以无视所有元素，按照浏览器的屏幕定位。
4、static
默认参数，元素正常布局

demo 练习

float
浮动，指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
浮动会导致元素重叠，可以使用 clear: both; 清除浮动。

float demo

font
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。设置字体

/* 
	设置字体大小为12px
	设置行高为14px
	设置字体样式为 sans-serif
	设置字体粗细为 bold
*/
font: 12px/14px sans-serif bold

/* 可以分开写 */
font-size: 12px; // 字体大小
line-height: 14px; // 行高
font-family: 'sans-serif'; // 字体样式
font-weight: bold;  // 字体粗细