Css3学习日志 --css层叠样式表

最新推荐文章于 2023-08-27 11:11:13 发布

学习一直在路上

最新推荐文章于 2023-08-27 11:11:13 发布

阅读量219

点赞数

文章标签： nginx 前端 html5

本文链接：https://blog.csdn.net/weixin_38204966/article/details/121415457

版权

学习目标：

掌握css层叠样式表基础教程
CSS语法、选择器、字体样式、边框、背景、图片格式详解

学习内容：

css样式规则

基本语法：

A{
属性:值;
属性:值;
}

1、选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2、属性和属性值以“键值对“的形式出现。
3、属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。
4、属性和属性值之间用英文”:"链接。
5、多个”键对值”之间用英文“:"进行区分。
可以用段落和表格的对齐的演示。

css字体样式

：

font-size:字体大小;
font-family:宋体（字体格式）;
font-weight:字体粗细;
color:字体颜色;

Google图标测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		span {
			font-size: 100px;
		}
		.blue{
			color: blue;
		}
		.orange{
				color: orange;
		}
		.red{
			color: red;
		}
		.green{
			color: green;
		}
		</style>
	</head>
	<body>
		<span class="blue">G</span>
		<span class="red">o</span>
		<span class="orange">o</span>
		<span class="blue">g</span>
		<span class="green">l</span>
		<span class="red">e</span>
	</body>
</html>

CSS文本

color 属性用于设置文本的颜色。

body {
  color: blue;
}

h1 {
  color: green;
}

css文本对齐

text-align 属性用于设置文本的水平对齐方式。

/*水平居中对齐*/
h1 {
  text-align: center;
}
/*居中左对齐*/
h2 {
  text-align: left;
}
/*居中右对齐*/
h3 {
  text-align: right;
}

文字装饰：

text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线。

a {
  text-decoration: none;
}

文字缩进

text-indent 属性用于指定文本第一行的缩进：

p {
  text-indent: 50px;
}

字母间距

字与字之间的间隔
letter-spacing

h1 {
  letter-spacing: 3px;
}

字间距

每个单词之间的间隔
word-spacing

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

行高

line-height 属性用于指定行之间的间距：

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

选择器：
类选择器：class，好比人的名字，是可以重复使用的
id选择器：id 好比人的身份证，只能使用一次，不能重复使用

链接伪类选择器：

 						:link 链接为访问的链接
 						:visited 链接已访问的链接
 						:honver 鼠标移动到连接上
 						:active 选定的链接（当点击链接，不松开鼠标时的状态）

first-child:选取属于其父元素的首个子元素的指定选择器
last-child：选取属于其父元素的最后一个子元素的指定选择器
nth-child(n)：匹配属于其父元素的第n个元素，不论元素类型even 偶数 odd 奇数如果用公式n从0开始2n就是0 2 4 6 8
3n 0 3 6 9
：nth-last-child（n）：选择器匹配属于其元素的第n个子元素的每个元素，不论元素类型，从最后一个子元素开始技术。
n可以是数字，关键词或公式

目标伪类选择器：

target：可用于当前活动的目标元素

line-height:行高

css调用

内部样式表
内部样式在 HTML 页面的 head部分内的 style 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部样式表：
调用外部css

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

行内 CSS
行内样式在相关元素的 “style” 属性中定义：

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

注释

位于元素内的 CSS 注释，以 / 开始，以 / 结束：

/* 这是一条单行注释 */

背景图片跟随页面滚动

background-attachment:
跟随：fixed
不跟随：scroll

/*跟随页面滚动*/
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
/*不跟随页面滚动*/
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

css外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。
margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 左边距
外边距合并
指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

CSS内边距

padding 属性是以下各内边距属性
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

CSS宽高

css设置div元素的高度与宽度
height:高度
width：宽度

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

css框模型

内容 - 框的内容，其中显示文本和图像。
paading内边距 - 清除内容周围的区域。内边距是透明的。
border边框 - 围绕内边距和内容的边框。
margin外边距 - 清除边界外的区域。外边距是透明的。

设置链接样式

链接可以使用任何 CSS 属性来设置样式。
可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
  }

学习时间：

11月19日-11月23日

学习一直在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Css3学习日志 --css层叠样式表

学习目标：掌握css层叠样式表CSS语法、选择器、字体样式、边框、背景、图片格式详解、定位、浮动、盒模型。CSS3新增选择器及新增属性、圆角、阴影、伸缩布局、变形、过渡、动画。学习内容：css样式规则A{属性:值;属性:值;}1、选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。2、属性和属性值以“键值对“的形式出现。3、属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。4、属性和属性值之间用英文”:"链接。5、多个”键对值”之间用英文“:"
复制链接

扫一扫