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;
}

typeinput标签的属性,对该属性定义样式。

三、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教程,当然菜鸟教程的也可以。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值