CSS知识概述

最新推荐文章于 2024-07-24 10:05:23 发布

Arrvine

最新推荐文章于 2024-07-24 10:05:23 发布

阅读量230

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： css

本文链接：https://blog.csdn.net/a_un_l/article/details/105645266

版权

HTML+CSS+JavaScript 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

一、基础知识
二、CSS选择器
三、CSS基础样式
四、盒模型
五、CSS定位

一、基础知识

CSS：指层叠样式表 (Cascading Style Sheets)
层叠顺序：外部样式表 < 内部样式表 < 内联样式（从左到右优先权从弱变强）
内联式：即为直接写在标签中，就像标签的属性一样

<p style="color: blue;">你好</p>

内部样式表：嵌入在head标签中

<head>
		<meta charset="utf-8">
		<title>html页面</title>
		<style>
			.lineType{
				width: 200px;
				height: 100px;
				padding: 5px;
				margin: 5px;
				background: blue;
			}
		</style>
	</head>

外部样式表：如其名，将CSS提取出来，成为一个单独的文件，由link标签与html文件链接

<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<title>div标签与盒模型</title>
	</head>

二、CSS选择器

CSS选择器有多种：元素选择器、派生选择器、id选择器、类选择器、属性选择器。选择器可以组合使用。

元素选择器

<h1>标题</h1>

定义样式：

h1 {font-family: sans-serif;}

派生选择器（又名上下文选择器）

<ul>
    <li>第一个列表</li>
     <li>第二个列表</li>
</ul>

定义样式：

ul {color:red;}
ul li{color:blue;}

上述中ul li{ }即为派生选择器，该选择器根据文档的上下文关系来确定某个标签的样式。

id选择器

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

定义样式：id选择器用“#”显示

#red {color:red;}
#green {color:green;}

每一个id 属性只能在每个 HTML 文档中出现一次，就如同人的身份证号一样，全世界每一个人身份证号都是唯一的。

类选择器

<p class="center">
	This paragraph will also be center-aligned.
</p>

定义样式：类选择器用点号“.”显示

.center {text-align: center}

属性选择器

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

type为input标签的属性，对该属性定义样式。

三、CSS基础样式

背景

属性	描述
background-color	设置背景色
background-image	设置背景图片
background-repeat	设置背景图片重复
background-position	设置图像在背景中位置
background-attachment	设置背景关联，防止背景随滚动条移动

文本

属性	描述
color	设置文本颜色
direction	设置文本方向
line-height	设置行高
letter-spacing	设置字符间距
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

字体

属性	描述
font	简写属性,作用是把所有针对字体的属性设置在一个声明中
font-family	设置字体系列
font-size	设置字体的尺寸
font-style	设置字体风格
font-variant	以小型大写字体或者正常字体显示文本
font-weight	设置字体的粗细

链接

属性	描述
link	普通的、未被访问的链接
visited	用户已访问的链接
hover	鼠标指针位于链接的上方
active	链接被点击的时刻

列表

属性	描述
list-style	简写属性,用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志
list-style-position	设置列表中列表项标志的位置
list-style-type	设置列表项标志的类型

表格

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框
border-spacing	设置分隔单元格边框的距离
caption-side	设置表格标题的位置
empty-cells	设置是否显示表格中的空单元格
table-layout	设置显示单元、行和列的算法

四、盒模型

在这里插入图片描述
margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。
margin和padding在定义时，按照顺时针顺序，上、右、下、左。分别对应margin-top、margin-right、margin-bottom、margin-left，padding同理。

div {
    width: 220px;
    padding: 10px 5px 2px 1px;
    border: 5px solid gray;
    margin: 0; 
}

五、CSS定位

三种定位机制：相对定位、绝对定位、固定定位
relative：相对定位会按照元素的原始位置对该元素进行移动，根据“父容器”左上角定位。

.pos_right{
	position:relative;
	left:20px
	/*表示pos_right的内容，在原来的基础上距离左边20px*/
}

absolute：绝对定位，元素可以放置到页面上的任何位置，与“父容器”位置有关，不占用文本空间。

h2.pos_abs{
	position:absolute;
	left:100px;
	top:150px;
	/*元素距离页面左侧 100px，距离页面顶部 150px*/
}

fixed：固定定位,无论页面如何滚动，该元素毫无动作，像“屏幕上的钉子户”，不占用文本空间。

p.one{
	position:fixed;
	left:5px;
	top:5px;
	/*元素距离左边5px,距离上边5px*/
}

CSS写到这里就结束了，这里列举了一些最常见的CSS的相关知识及属性，具体使用还是需要通过更多的实践由自己体会，也可以多看看别人的代码，学习学习。CSS更详细的解释、实例请前往W3School的CSS教程，当然菜鸟教程的也可以。

Arrvine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS知识概述

文章目录一、基础知识二、CSS选择器元素选择器派生选择器（又名上下文选择器）id选择器类选择器属性选择器三、CSS基础样式背景文本字体链接列表表格四、盒模型五、CSS定位一、基础知识CSS：指层叠样式表 (Cascading Style Sheets)层叠顺序：外部样式表 < 内部样式表 < 内联样式（从左到右优先权从弱变强）内联式：即为直接写在标签中，就像标签的属性一样&l...
复制链接

扫一扫

专栏目录